Let’s bring your 3D scene to life by adding a rotating cube. In this milestone, you'll learn how to combine geometry, material, lighting, camera, renderer, and controls — all the essentials to see and interact with a 3D object.

✅ What You'll Do

• [ ] Create a 3D cube using geometry and material
• [ ] Set up a camera and renderer
• [ ] Add OrbitControls to interact with the scene
• [ ] Animate your cube to rotate in real-time

✨ Step-by-Step Breakdown

🧱 Step 1: Set Up the Scene and the Cube

import * as THREE from "<https://cdn.skypack.dev/[email protected]/build/three.module.js>";

// Create a 3D scene (like a virtual stage)
const scene = new THREE.Scene();

// Create a cube shape
const geometry = new THREE.BoxGeometry(100, 100, 100);

// Add material (green color)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Combine shape and color into a mesh
const cube = new THREE.Mesh(geometry, material);

// Add the cube to the scene
scene.add(cube);

🎥 Step 2: Add the Camera

const camera = new THREE.PerspectiveCamera(
  75, // Field of view
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1, // Near clipping plane
  1000 // Far clipping plane
);

// Move the camera back so we can see the cube
camera.position.z = 500;

🖼️ Step 3: Set Up the Renderer

const renderer = new THREE.WebGLRenderer({ alpha: true }); // Transparent background
renderer.setSize(window.innerWidth, window.innerHeight);

// Add renderer's canvas to the webpage
const canvas = document.getElementById("container3D");
canvas.appendChild(renderer.domElement);

🌀 Step 4: Animate the Cube

const animate = function () {
  requestAnimationFrame(animate); // Call this function every frame

  // Add rotation to the cube
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // Draw the scene from the camera's point of view
  renderer.render(scene, camera);
};

animate(); // Start animation