In this milestone, you’ll bring your 3D world to life by initializing the Three.js essentials: the scene, camera, and renderer. Once set up, you'll have a running render loop — the core of any interactive 3D experience.

✅ What You'll Do

• [ ] Set up the scene, camera, and renderer
• [ ] Add lighting to illuminate the model
• [ ] Start the render loop to keep things animated

🧠 Step 1: Add Your Three.js Setup

Replace or update your app.js with the following code. This will prepare everything you need to view and move around your future 3D model:

// Import Three.js and dependencies
import * as THREE from "<https://cdn.skypack.dev/[email protected]/build/three.module.js>";
import { GLTFLoader } from "<https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js>";
import { gsap } from "<https://cdn.skypack.dev/gsap>";

// Create Scene
const scene = new THREE.Scene();

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

camera.position.set(10, 50, 200); // Set camera position

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

// Add renderer to DOM
document.getElementById("container3D").appendChild(renderer.domElement);

// Add Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 3);
scene.add(ambientLight);

const topLight = new THREE.DirectionalLight(0xffffff, 2);
topLight.position.set(0, 500, 500);
scene.add(topLight);

// Render Loop
const reRender3D = () => {
  requestAnimationFrame(reRender3D);
  renderer.render(scene, camera);
};
reRender3D();

🎯 What This Code Does

• Scene: Your virtual space where everything lives
• Camera: Positioned to view your 3D model from a distance
• Renderer: Draws the scene into the browser
• Lighting: Makes your model visible and gives it depth
• Render Loop: Keeps updating the screen (like a game loop)

👀 What You Should See

Right now, your page should still look the same — but behind the scenes, your 3D world is fully set up and running. You’ve laid the technical groundwork to load and interact with 3D models in the next milestone.