Aadil Mallick

📜 Why Three.js

I've always thought that Three.js was cool, and wanted to learn how 3D modeling can work with javascript. So that's why I came out and tried Three.js. I learned that there are three essential parts to a three.js project: the scene, camera, and renderer. The scene contains everything that three.js will render. The camera shows us the model from a perspective that we choose. The renderer handles how the 3d objects are rendered.

Once the scene, camera, and renderer are all set up, we can get ready to start creating. Making shapes in three.js is a simple process.

1. Create a geometry using something from three.js
2. Create material. You can either use basic or standard material to start off. Basic material is not affected by light.
3. Finally, you can create the object by using the Three.mesh() method, which takes in a geometry and a material and meshes them together to create a 3D shape.

After we create a shape, we can position them and rotate them. But you can't animate them until you initiate a game loop. A game loop is nothing special to three.js. You can make a game loop using the requestAnimationFrame() function, which uses recursion to request a new frame each time. Inside the function you're requesting to rerun every frame, you can start changing the position and rotating objects, which actually animates the objects.