How can I create 3D animations using Three.js?

How can I create 3D animations using Three.js?

To create 3D animations with Three.js, you'll need to set up a scene, camera, and renderer. Start by including the Three.js library in your project.

What are the basic components I need to understand?

The basic components include the scene, camera, renderer, geometries, materials, and lights. Each plays a crucial role in rendering your 3D animations.

Can you give me an example of a simple animation?

Sure! You can create a rotating cube by updating its rotation in the animation loop. Would you like to see the code for that?

Yes, please share the code!

Here's a simple example:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

This will create a rotating green cube!