My very first three.js project! Inspired by ilithya.rocks's homepage.

Instead of an old-fashion summary, I'm going to do a Q&A format for fun. As if I'm talking to myself, like with ChatGPT ... right. Enjoy!

Q: What inspired you to make this ... thing?
A: *Cough* Playstation *Cough*. And not Fisher-Price. Even though their slogan sounds oddly familiar here. Nevertheless, it was the process of making this flashy, swivelly, jump-in-your-face animation that inspired those words to come to life ;)

My inspiration board in Figma.

Q: How did you make the shapes?
A: Making the shapes were fairly straightforward. The circle, triangle and square were the easiest as they all use the same shape. More specifically, the TorusGeometry. Modifying the number of tubularSegments gave rise to the three shapes. Can you guess how many tubularSegments are required to make the three shapes? You can try it on here to find out.

Making the 'X' was “hard” at first because I really wanted to re-use TorusGeometry. But, if you were resourceful like me AND aware that TextGeometry was used to create the 3D text ... then you would have saved yourself the misery of pairing two TorusGeometry macaronis together.

That's one good-looking TorusGeometry macaroni. Should I make an 'X' using two of these? Maybe using TextGeometry might be easier...

Q: Why does it render so slowly on my computer?
A: Hmm. I'm working on that. Maybe. Eventually. Just have some patience, okay. How can you not be astounded that 200+ X's, circles, triangles, and squares are floating in zero-gravity, real-time, inside your computer. It's heavy computation. Or I'm too lazy to optimize the program.

Q: What is next?
A: That's a good question. 🙂

Q: Where can I learn this stuff?
A: I've been learning it from threejs-journey. Pretty good stuff. But you can also find some good tutorials on Three.js's docs.

Q: Not a question, but this is awesome!
A: Aww, thanks!

Q: Later!
A: K bye, thx for chatting.