Spaces:

varunv2004
/

3jsguide

Running

App Files Files Community

varunv2004 commited on Aug 30, 2025

Commit

6f466be

verified ·

1 Parent(s): ae05fc2

Update index.html

Browse files

Files changed (1) hide show

index.html +552 -617

index.html CHANGED Viewed

@@ -1,101 +1,177 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gemini AI Guide to 3D Game Creation</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script>
-    <script type="importmap">
-    {
-      "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
-        "cannon-es": "https://unpkg.com/cannon-es@0.20.0/dist/cannon-es.js",
-        "cannon-es-debugger": "https://unpkg.com/cannon-es-debugger@1.0.0/dist/cannon-es-debugger.js"
-      }
-    }
-    </script>
     <style>
-        body { font-family: 'Inter', sans-serif; background-color: #fdfbf8; color: #3f3c36; }
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono&display=swap');
-        .tab-active { border-color: #a58d6f; color: #a58d6f; background-color: #f5f2ed; }
-        .tab-inactive { border-color: transparent; color: #78716c; }
-        .content-section { display: none; }
-        .content-section.active { display: block; }
-        code { font-family: 'Roboto Mono', monospace; background-color: #f5f2ed; padding: 0.1rem 0.3rem; border-radius: 4px; color: #846c5b; }
-        pre { background-color: #f5f2ed; padding: 1rem; border-radius: 8px; overflow-x: auto; border: 1px solid #e7e5e4; }
-        .interactive-canvas-container { position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 350px; max-height: 50vh; background-color: #e7e5e4; border-radius: 8px; }
-        .debug-console { background-color: #2d2a26; color: #e7e5e4; border-radius: 8px; height: 300px; padding: 1rem; overflow-y: auto; }
-        .debug-line { border-bottom: 1px solid #44403c; padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
-        .debug-error { color: #f87171; }
-        .debug-info { color: #60a5fa; }
-        .debug-warn { color: #facc15; }
-        .accordion-button.open .accordion-arrow { transform: rotate(180deg); }
-        .accordion-arrow { transition: transform 0.2s ease-in-out; }
-        .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
     </style>
 </head>
-<body class="antialiased">
     <div class="container mx-auto p-4 sm:p-6 lg:p-8">
         <header class="text-center mb-8">
             <h1 class="text-4xl md:text-5xl font-bold text-gray-800" style="color: #654321;">Varun Mulay's Guide to 3D Web Development</h1>
             <p class="mt-2 text-lg text-gray-600" style="color: #78716c;">An interactive guide to creating 3D games and simulations with Three.js.</p>
         </header>
-        <!-- Tab Navigation -->
-        <nav class="mb-8 border-b border-gray-200">
-            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="tab-nav">
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="fundamentals">1. Fundamentals</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="controls">2. Orbital Controls</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="models">3. Importing Models</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="physics">4. Physics with Cannon.js</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="particles">5. Particle & Fluid Simulation</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="debugging">6. Debugging</button></li>
-                <li><button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" data-tab="model-viewer">7. Model Viewer</button></li>
             </ul>
         </nav>
-        <!-- Content Sections -->
         <main id="tab-content">
             <!-- 1. Fundamentals -->
-            <section id="fundamentals" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Three.js Fundamentals: The Core Components</h2>
-                <p>Every Three.js application, from a simple cube to a complex game, is built upon three core components: the <code>Scene</code>, the <code>Camera</code>, and the <code>Renderer</code>. Think of it like a movie set: the Scene is the stage where all your actors (3D objects) reside, the Camera is how the audience views the stage, and the Renderer is the crew that captures the camera's view and projects it onto the screen. This section provides an interactive demonstration of these foundational elements.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
-                        <div id="fundamentals-canvas-container" class="interactive-canvas-container"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
-                            <button id="move-x-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Move X</button>
-                            <button id="move-y-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Move Y</button>
-                            <button id="change-color-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Change Color</button>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Core Logic Explained</h3>
-                        <p class="mb-4">Below is the essential JavaScript code. The interactive buttons on the left directly call functions that modify the cube's properties. See how simple commands can create dynamic changes in the 3D scene.</p>
-                        <pre><code class="language-javascript">
 // 1. Scene: The container for all objects
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0xf0f0f0);
 // 2. Camera: Defines the viewpoint
 const camera = new THREE.PerspectiveCamera(
-    75, // Field of View
-    width / height, // Aspect Ratio
-    0.1, // Near clip plane
-    1000 // Far clip plane
 );
 camera.position.z = 5;
 // 3. Renderer: Renders the scene
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize(width, height);
-document.body.appendChild(renderer.domElement);
-// Add lighting for materials to be visible
 const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
@@ -104,9 +180,7 @@ scene.add(directionalLight);
 // Create an object (Mesh = Geometry + Material)
 const geometry = new THREE.BoxGeometry(1, 1, 1);
-const material = new THREE.MeshStandardMaterial({
-    color: 0x846c5b
-});
 const cube = new THREE.Mesh(geometry, material);
 scene.add(cube);
@@ -118,27 +192,19 @@ function animate() {
     renderer.render(scene, camera);
 }
 animate();
-// --- Interactive Functions ---
-function moveCubeX() {
-    cube.position.x += 0.5;
-}
-function changeCubeColor() {
-    cube.material.color.setHex(Math.random() * 0xffffff);
-}
-                        </code></pre>
                     </div>
                 </div>
             </section>
             <!-- 2. Orbital Controls -->
-            <section id="controls" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Mastering Orbital Controls</h2>
-                <p>Static scenes are boring. <code>OrbitControls</code> is a powerful and essential tool that gives the user freedom to pan, zoom, and rotate the camera around a target. This makes your scene instantly interactive and explorable. However, its implementation has a few common pitfalls. This section explains the correct setup and provides a troubleshooting guide for the most frequent errors, ensuring a smooth user experience.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Correct Implementation</h3>
-                        <pre><code class="language-javascript">
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 // ... After setting up scene, camera, renderer
@@ -146,57 +212,45 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 // Initialize controls
 const controls = new OrbitControls(camera, renderer.domElement);
-// Optional but recommended configurations
-controls.enableDamping = true; // Adds inertia for a smoother feel
-controls.dampingFactor = 0.05;
-controls.screenSpacePanning = false; // Restricts panning to a plane
-controls.minDistance = 2; // Min zoom
-controls.maxDistance = 10; // Max zoom
-controls.maxPolarAngle = Math.PI / 2; // Prevents looking from below ground
 // CRITICAL: Update controls in the animation loop
 function animate() {
     requestAnimationFrame(animate);
-    // This is required if enableDamping is true
     controls.update();
     renderer.render(scene, camera);
 }
 animate();
-                        </code></pre>
                     </div>
                     <div class="space-y-4">
                         <h3 class="text-xl font-semibold mb-2">Troubleshooting Common Errors</h3>
-                        <div class="accordion-item bg-white border border-gray-200 rounded-md">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>My controls feel laggy or don't stop immediately.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
                                 <p><strong>Cause:</strong> You have set <code>controls.enableDamping = true</code> but forgotten to call <code>controls.update()</code> inside your animation loop.</p>
-                                <p><strong>Fix:</strong> Add <code>controls.update()</code> to your <code>animate</code> function. This ensures the controls smoothly decelerate each frame.</p>
                             </div>
                         </div>
-                        <div class="accordion-item bg-white border border-gray-200 rounded-md">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>The camera zooms in/out but doesn't rotate.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
-                                <p><strong>Cause:</strong> The OrbitControls script has not loaded correctly, or you have a JavaScript error elsewhere that is stopping the script execution.</p>
-                                <p><strong>Fix:</strong> Check your browser's developer console (F12) for errors. Ensure the path to <code>OrbitControls.js</code> in your import is correct and that the Three.js library itself has loaded first.</p>
                             </div>
                         </div>
-                        <div class="accordion-item bg-white border border-gray-200 rounded-md">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>My camera can go below the "ground" plane.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
                                 <p><strong>Cause:</strong> The default polar angle allows for 360-degree vertical rotation.</p>
-                                <p><strong>Fix:</strong> Limit the vertical rotation by setting <code>controls.maxPolarAngle</code>. For example, <code>controls.maxPolarAngle = Math.PI / 2;</code> prevents the camera from going below the horizontal equator.</p>
                             </div>
                         </div>
                     </div>
@@ -204,12 +258,12 @@ animate();
             </section>
             <!-- 3. Importing Models -->
-            <section id="models" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Importing 3D Models (.glb/.gltf)</h2>
-                 <p>Primitives are great for learning, but real projects use complex 3D models created in software like Blender or Maya. The most common and recommended format for the web is <code>gLTF</code> (or its binary version, <code>.glb</code>) because it's optimized for fast loading and rendering. Use the button below to upload a model from your computer. You can use the sliders to interactively adjust its position, rotation, and scale, which are the fundamental transformations you'll apply to any object in your scene.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
-                        <div id="models-canvas-container" class="interactive-canvas-container"></div>
                         <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-white border rounded-md">
                             <div>
                                 <label for="model-pos-x" class="block text-sm font-medium">Position X</label>
@@ -229,279 +283,98 @@ animate();
                                 Upload Model (.glb/.gltf)
                                 <input type="file" id="model-upload" class="hidden" accept=".glb, .gltf">
                             </label>
-                            <span id="loading-indicator" class="px-4 py-2 text-gray-500 hidden">Loading...</span>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Model Loader & Transformation Code</h3>
-                        <p class="mb-4">Loading models is an asynchronous operation. You use a specific loader (<code>GLTFLoader</code> here), provide a path to your model, and define a callback function that executes once the model has loaded successfully. Inside this callback, you can add the model to the scene and manipulate it.</p>
-                        <pre><code id="model-code-output" class="language-javascript">
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 const loader = new GLTFLoader();
-let model;
-// Event listener for file input
-document.getElementById('model-upload').addEventListener('change', (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-    // Create a local URL for the uploaded file
-    const url = URL.createObjectURL(file);
-    // Display loading indicator
-    document.getElementById('loading-indicator').classList.remove('hidden');
-    // Remove any previously loaded model
-    if (model) {
-        scene.remove(model);
-        model = null;
-    }
-    loader.load(
-        url,
-        function (gltf) {
-            model = gltf.scene;
-            // --- Transformations applied here ---
-            model.position.set(0, -1, 0);
-            model.rotation.y = 0;
-            model.scale.set(1.5, 1.5, 1.5);
-            scene.add(model);
-            // Clean up the temporary URL
-            URL.revokeObjectURL(url);
-            // Hide loading indicator
-            document.getElementById('loading-indicator').classList.add('hidden');
-        },
-        undefined, // onProgress callback (optional)
-        function (error) {
-            console.error('An error occurred while loading the model:', error);
-            document.getElementById('loading-indicator').classList.add('hidden');
-        }
-    );
-});
-// In your update logic (called by sliders):
-function updateModel() {
-    if (model) {
-        model.position.x = /* slider value */;
-        model.rotation.y = /* slider value */;
-        const scale = /* slider value */;
-        model.scale.set(scale, scale, scale);
     }
-}
-                        </code></pre>
                     </div>
                 </div>
             </section>
             <!-- 4. Physics with Cannon.js -->
-            <section id="physics" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">The Physics Engine: Cannon.js</h2>
-                <p>A static scene is a portfolio piece, but a game needs dynamic interaction and realistic movement. Three.js is a rendering engine, so it doesn't handle physics. That's where a separate library like **Cannon.js** comes in. Cannon.js handles the backend calculations for gravity, collisions, and forces, while you use its results to update the positions and rotations of your visible Three.js objects. This section demonstrates how to use the **cannon-es-debugger** to visualize physics shapes and uses a collision event listener to provide immediate feedback on interactions. This is critical for debugging why objects might "fall through" floors or collide unexpectedly.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
-                        <div id="physics-canvas-container" class="interactive-canvas-container"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
-                            <button id="drop-ball-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Ball</button>
                             <label class="flex items-center space-x-2 px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm">
-                                <input type="checkbox" id="physics-debug-toggle" class="form-checkbox h-4 w-4 text-gray-600 transition-colors">
                                 <span class="text-sm font-medium text-gray-700">Debug Physics</span>
                             </label>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Connecting Physics to Rendering</h3>
-                        <p class="mb-4">The core loop of a physics-based game involves two key steps: first, advance the physics world, then update the visual objects based on the new physics positions. The code below shows how to set up the debug visualization and react to collisions.</p>
-                        <pre><code class="language-javascript">
 import * as CANNON from 'cannon-es';
 import * as CannonDebugRenderer from 'cannon-es-debugger';
-// ... Three.js setup ...
-// 1. Create the Physics World
-const world = new CANNON.World({
-  gravity: new CANNON.Vec3(0, -9.82, 0) // Simulates gravity
-});
-// 2. Initialize the debug renderer
 const cannonDebugRenderer = new CannonDebugRenderer.default(scene, world);
-// 3. Create the physical ground plane
-const groundShape = new CANNON.Plane();
-const groundBody = new CANNON.Body({ mass: 0 }); // mass 0 makes it static
 groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
 world.addBody(groundBody);
-// Function to create a new sphere
-function createSphere() {
-  const radius = 0.5;
-  const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x846c5b });
-  const sphereMesh = new THREE.Mesh(new THREE.SphereGeometry(radius), sphereMaterial);
-  sphereMesh.position.y = 10;
-  scene.add(sphereMesh);
-  const sphereBody = new CANNON.Body({
-    mass: 1,
-    shape: new CANNON.Sphere(radius)
-  });
-  sphereBody.position.y = 10;
-  world.addBody(sphereBody);
-  // Add a collision listener
-  sphereBody.addEventListener('collide', (event) => {
-    // Flash the sphere red on collision
-    sphereMesh.material.color.setHex(0xff0000);
-    setTimeout(() => {
-      sphereMesh.material.color.setHex(0x846c5b);
-    }, 200);
-  });
-}
-// 4. Update both in the animation loop
 function animate() {
     requestAnimationFrame(animate);
-    // Step the physics world forward in time
     world.fixedStep();
-    // Update the visual representation
     cannonDebugRenderer.update();
     // Sync each Three.js mesh with its Cannon.js body
-    // ... loop through meshes and bodies ...
     renderer.render(scene, camera);
 }
 animate();
-                        </code></pre>
-                        <h3 class="text-xl font-semibold mt-4 mb-2">Common Cannon.js Issues</h3>
-                        <div class="accordion-item bg-white border border-gray-200 rounded-md">
-                            <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
-                                <span>My objects fall forever through the floor.</span>
-                                <span class="accordion-arrow transform transition-transform">▼</span>
-                            </button>
-                            <div class="accordion-content px-4 pb-4">
-                                <p><strong>Cause:</strong> You need a static, non-moving ground plane for the objects to collide with. The objects are falling because there is no collision body for them to interact with.</p>
-                                <p><strong>Fix:</strong> Create a ground body in Cannon.js with a mass of 0. This makes it static and unmovable, effectively creating an infinite floor. For example: <code>const groundBody = new CANNON.Body({ mass: 0 }); groundBody.addShape(new CANNON.Plane()); groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); world.addBody(groundBody);</code></p>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </section>
             <!-- 5. Particle & Fluid Simulation -->
-            <section id="particles" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Buoyancy and Density Simulation</h2>
-                <p>Simulating how different materials react to water can be a challenge. In this simple demonstration, we've created a custom particle system to show the difference between wood and metal. Wood, being less dense, floats on the surface, while metal, being denser, continues to sink. Click the buttons below to see the difference.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
-                        <div id="particles-canvas-container" class="interactive-canvas-container"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
-                            <button id="drop-wood-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Wood</button>
-                            <button id="drop-metal-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Metal</button>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Simulation Logic</h3>
-                        <p class="mb-4">Here's a breakdown of the code that creates the simulation. The particle system is handled by a custom array that stores each particle's type. The animation loop then applies a different "physics" rule to each particle once it hits the water plane.</p>
-                        <pre><code class="language-javascript">
-import { Water } from 'three/addons/objects/Water.js';
-// ... Three.js setup ...
-// Create the water plane
-const waterGeometry = new THREE.PlaneGeometry(2000, 2000);
-const water = new Water(
-    waterGeometry,
-    {
-        textureWidth: 512,
-        textureHeight: 512,
-        waterNormals: new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg', function (texture) {
-            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-        }),
-        sunDirection: new THREE.Vector3(0, 1, 0),
-        sunColor: 0x48494b,
-        waterColor: 0x005577,
-        distortionScale: 3.7,
-        fog: scene.fog !== undefined
-    }
-);
-water.rotation.x = -Math.PI / 2;
-scene.add(water);
-// Setup the particle system
-const particleCount = 500;
-const positions = new Float32Array(particleCount * 3);
-const velocities = new Float32Array(particleCount * 3);
-const particleTypes = new Array(particleCount).fill(null);
-const colors = new Float32Array(particleCount * 3);
-const particleGeometry = new THREE.BufferGeometry();
-particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-particleGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-const particleMaterial = new THREE.PointsMaterial({
-    size: 0.5,
-    vertexColors: true,
-    sizeAttenuation: true,
-    transparent: true,
-    opacity: 0.9,
-    blending: THREE.AdditiveBlending
-});
-const particleSystem = new THREE.Points(particleGeometry, particleMaterial);
-scene.add(particleSystem);
-const woodColor = new THREE.Color(0x8B4513); // Brown color for wood
-const metalColor = new THREE.Color(0x708090); // Gray color for metal
-let particleCursor = 0;
-// Function to spawn particles based on type
-const spawnParticles = (type) => {
-    const count = 50;
-    const spread = 20;
-    const startY = 15;
-    for (let i = 0; i < count; i++) {
-        const idx = particleCursor * 3;
-        positions[idx] = (Math.random() - 0.5) * spread;
-        positions[idx + 1] = startY + Math.random() * 5;
-        positions[idx + 2] = (Math.random() - 0.5) * spread;
-        velocities[idx] = 0;
-        velocities[idx + 1] = -0.3 - Math.random() * 0.3;
-        velocities[idx + 2] = 0;
-        particleTypes[particleCursor] = type;
-        if (type === 'wood') {
-            woodColor.toArray(colors, idx);
-        } else {
-            metalColor.toArray(colors, idx);
-        }
-        particleCursor = (particleCursor + 1) % particleCount;
-    }
-    particleGeometry.attributes.position.needsUpdate = true;
-    particleGeometry.attributes.color.needsUpdate = true;
-};
-// Event listeners for the buttons
-document.getElementById('drop-wood-btn').onclick = () => spawnParticles('wood');
-document.getElementById('drop-metal-btn').onclick = () => spawnParticles('metal');
 // The main animation loop
 function animate() {
     requestAnimationFrame(animate);
-    controls.update();
-    water.material.uniforms['time'].value += 1.0 / 60.0;
     // Update particle positions and apply physics
     for (let i = 0; i < particleCount * 3; i += 3) {
         const particleIndex = i / 3;
@@ -531,25 +404,25 @@ function animate() {
     renderer.render(scene, camera);
 }
 animate();
-                        </code></pre>
                     </div>
                 </div>
             </section>
             <!-- 6. Debugging -->
-            <section id="debugging" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">A Game Developer's Debugging Toolkit</h2>
-                <p>When things go wrong in 3D, the errors can be cryptic. A blank screen is a common symptom for many different problems. Effective debugging requires understanding what the errors mean in a 3D context. This section simulates a debugging console with common errors you might encounter. Click on each error line to understand its likely cause and how to approach fixing it, turning you into a more effective problem solver.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                      <div class="space-y-4">
                         <h3 class="text-xl font-semibold mb-2">Interactive Debug Console</h3>
                         <div class="debug-console" id="debug-console">
-                            <div class="debug-line debug-info cursor-pointer" data-fix="fix1">▷ INFO: THREE.WebGLRenderer 164</div>
-                            <div class="debug-line debug-warn cursor-pointer" data-fix="fix2">▷ WARN: Scene has no lights. Objects may appear black.</div>
-                            <div class="debug-line debug-error cursor-pointer" data-fix="fix3">▷ ERROR: TypeError: Cannot read properties of undefined (reading 'scene')</div>
-                            <div class="debug-line debug-error cursor-pointer" data-fix="fix4">▷ ERROR: Failed to load resource: net::ERR_FILE_NOT_FOUND Horse.glb</div>
-                            <div class="debug-line debug-info cursor-pointer" data-fix="fix5">▷ INFO: Animation loop started.</div>
-                            <div class="debug-line debug-error cursor-pointer" data-fix="fix6">▷ ERROR: Uncaught TypeError: Cannot set properties of null (setting 'position')</div>
                         </div>
                      </div>
                      <div class="p-4 bg-white border rounded-md" id="debug-fix-display">
@@ -557,58 +430,25 @@ animate();
                         <p class="text-gray-500">Click on an error in the console to see a detailed explanation and solution here.</p>
                      </div>
                 </div>
-                <div id="fixes" class="hidden">
-                    <div id="fix1">
-                        <h4 class="font-bold">Renderer Information</h4>
-                        <p>This is a standard startup message confirming that the Three.js renderer has been successfully initialized. It's not an error. If you don't see this, it's likely Three.js itself failed to load.</p>
-                    </div>
-                    <div id="fix2">
-                         <h4 class="font-bold">Missing Lights</h4>
-                        <p><strong>Cause:</strong> Most materials, like <code>MeshStandardMaterial</code> or <code>MeshPhongMaterial</code>, require light to be visible. Without any lights in the scene, objects using these materials will render as black.</p>
-                        <p><strong>Fix:</strong> Add at least one light to your scene. An <code>AmbientLight</code> provides basic, flat illumination, while a <code>DirectionalLight</code> simulates a distant light source like the sun.</p>
-                        <pre><code>const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-scene.add(ambientLight);
-const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-directionalLight.position.set(5, 10, 7.5);
-scene.add(directionalLight);</code></pre>
-                    </div>
-                    <div id="fix3">
-                         <h4 class="font-bold">Undefined Property Error</h4>
-                        <p><strong>Cause:</strong> This typically happens when your model loader's callback function returns, but the model data (<code>gltf</code> in this case) is not what you expect. Your code tries to access <code>gltf.scene</code>, but <code>gltf</code> is undefined.</p>
-                        <p><strong>Fix:</strong> This is often a symptom of a failed model load. Check the console for an earlier error (like a 404 Not Found) that indicates the model file itself couldn't be fetched. The loader failed, so the callback received nothing.</p>
-                    </div>
-                    <div id="fix4">
-                        <h4 class="font-bold">Resource Not Found</h4>
-                        <p><strong>Cause:</strong> The path provided to the model loader (e.g., <code>GLTFLoader.load('path/to/model.glb')</code>) is incorrect. The browser cannot find the file at that location.</p>
-                        <p><strong>Fix:</strong> Double-check the file path. Is it relative or absolute? Is there a typo? Open your browser's "Network" tab in the developer tools to see the exact URL it tried to fetch and the 404 error response.</p>
-                    </div>
-                    <div id="fix5">
-                        <h4 class="font-bold">Animation Loop Started</h4>
-                        <p>This is a useful debugging message you can add yourself with <code>console.log()</code> to confirm that your <code>animate</code> function is being called. If your scene is static when it should be moving, and you don't see this message, you've likely forgotten to call <code>animate()</code> to start the loop.</p>
-                    </div>
-                     <div id="fix6">
-                        <h4 class="font-bold">`null` Property Error</h4>
-                        <p><strong>Cause:</strong> You are trying to use a variable before the object it represents has been fully created and added to the scene. For example, if you declare a variable <code>let cube;</code> at the top, then try to modify <code>cube.position</code> outside of the function that creates the cube, it will be <code>null</code> or <code>undefined</code>.</p>
-                        <p><strong>Fix:</strong> Make sure your object is initialized before you try to access its properties. A common solution is to wrap your code that interacts with the object in a conditional statement like <code>if (cube) { ... }</code>, or to ensure that your functions are called only after the object has been fully initialized.</p>
-                    </div>
-                </div>
             </section>
             <!-- 7. Model Viewer -->
-            <section id="model-viewer" class="content-section space-y-6">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">The Easy Way: Google's &lt;model-viewer&gt;</h2>
-                <p>For some use cases, like displaying a single product or a piece of art, a full Three.js scene is overkill. Google's <code>&lt;model-viewer&gt;</code> is a web component that lets you declaratively add a 3D model to a webpage with minimal code. It's incredibly powerful for simple showcases, offering features like AR placement, animations, and camera controls right out of the box. Understanding when to use this tool can save you significant development time.</p>
-                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Live Example</h3>
-                        <!-- Note: The script for model-viewer is added at the end of the body -->
-                        <model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
-                                      alt="A 3D model of an astronaut"
-                                      ar
-                                      auto-rotate
-                                      camera-controls
-                                      style="width: 100%; height: 400px; background-color: #f0f0f0; border-radius: 8px;">
-                        </model-viewer>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">When to Use Which?</h3>
@@ -638,71 +478,45 @@ scene.add(directionalLight);</code></pre>
         </main>
     </div>
-    <!-- Model Viewer Script -->
-    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
     <script type="module">
-        import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-        import * as CANNON from 'cannon-es';
-        import * as CannonDebugRenderer from 'cannon-es-debugger';
-        import { Water } from 'three/addons/objects/Water.js';
-        import { Reflector } from 'three/addons/objects/Reflector.js';
-        // --- Tab Navigation Logic ---
-        const tabNav = document.getElementById('tab-nav');
-        const tabContent = document.getElementById('tab-content');
-        const sections = tabContent.querySelectorAll('.content-section');
-        const tabs = tabNav.querySelectorAll('button');
-        function switchTab(targetTabId) {
-            sections.forEach(section => {
-                section.classList.toggle('active', section.id === targetTabId);
-            });
-            tabs.forEach(tab => {
-                tab.classList.toggle('tab-active', tab.dataset.tab === targetTabId);
-                tab.classList.toggle('tab-inactive', tab.dataset.tab !== targetTabId);
-            });
-        }
-        tabNav.addEventListener('click', (e) => {
-            if (e.target.tagName === 'BUTTON') {
-                switchTab(e.target.dataset.tab);
-            }
-        });
-        switchTab('fundamentals');
-        // --- Accordion Logic ---
-        const accordions = document.querySelectorAll('.accordion-button');
-        accordions.forEach(button => {
-            button.addEventListener('click', () => {
-                const content = button.nextElementSibling;
-                button.classList.toggle('open');
-                if (content.style.maxHeight) {
-                    content.style.maxHeight = null;
-                } else {
-                    content.style.maxHeight = content.scrollHeight + "px";
                 }
-            });
-        });
-        // --- Scene 1: Fundamentals ---
-        function initFundamentals() {
-            const container = document.getElementById('fundamentals-canvas-container');
-            if (!container || container.querySelector('canvas')) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
-            camera.position.z = 3;
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
@@ -713,38 +527,107 @@ scene.add(directionalLight);</code></pre>
             const material = new THREE.MeshStandardMaterial({ color: 0x846c5b, metalness: 0.3, roughness: 0.6 });
             const cube = new THREE.Mesh(geometry, material);
             scene.add(cube);
-            document.getElementById('move-x-btn').onclick = () => { cube.position.x = (cube.position.x + 0.5) % 3; };
-            document.getElementById('move-y-btn').onclick = () => { cube.position.y = (cube.position.y + 0.5) % 2; };
-            document.getElementById('change-color-btn').onclick = () => { cube.material.color.setHex(Math.random() * 0xffffff); };
-            function animate() {
-                requestAnimationFrame(animate);
                 cube.rotation.x += 0.005;
                 cube.rotation.y += 0.005;
                 renderer.render(scene, camera);
-            }
             animate();
-            window.addEventListener('resize', () => {
                 camera.aspect = container.clientWidth / container.clientHeight;
                 camera.updateProjectionMatrix();
                 renderer.setSize(container.clientWidth, container.clientHeight);
-            });
-        }
-        // --- Scene 2: Model Importing ---
-        function initModels() {
-            const container = document.getElementById('models-canvas-container');
-            if (!container || container.querySelector('canvas')) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 1.5, 4);
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
@@ -759,124 +642,135 @@ scene.add(directionalLight);</code></pre>
             scene.add(dirLight);
             const loader = new GLTFLoader();
-            let model = null;
-            let currentUrl = null;
-            // Function to load and display the model
-            function loadAndDisplayModel(url) {
-                // Remove any previously loaded model
-                if (model) {
-                    scene.remove(model);
-                    model = null;
-                }
-                document.getElementById('loading-indicator').classList.remove('hidden');
-                loader.load(
-                    url,
-                    function (gltf) {
-                        model = gltf.scene;
-                        model.position.y = -1;
-                        updateModelTransform();
-                        scene.add(model);
-                        document.getElementById('loading-indicator').classList.add('hidden');
-                    },
-                    undefined,
-                    function (error) {
-                        console.error('An error occurred while loading the model:', error);
-                        document.getElementById('loading-indicator').classList.add('hidden');
-                    }
-                );
-            }
-            const uploadInput = document.getElementById('model-upload');
-            uploadInput.addEventListener('change', (event) => {
-                const file = event.target.files[0];
-                if (!file) return;
-                if (currentUrl) {
-                    URL.revokeObjectURL(currentUrl);
-                }
-                currentUrl = URL.createObjectURL(file);
-                loadAndDisplayModel(currentUrl);
             });
-            // Load a default model on startup
-            loadAndDisplayModel('https://cdn.jsdelivr.net/npm/three@0.164.1/examples/models/gltf/Horse.glb');
-            const posXSlider = document.getElementById('model-pos-x');
-            const rotYSlider = document.getElementById('model-rot-y');
-            const scaleSlider = document.getElementById('model-scale');
-            function updateModelTransform() {
-                if(model) {
-                    const scale = parseFloat(scaleSlider.value);
-                    model.scale.set(scale, scale, scale);
-                    model.position.x = parseFloat(posXSlider.value);
-                    model.rotation.y = parseFloat(rotYSlider.value);
-                }
-            }
-            posXSlider.addEventListener('input', updateModelTransform);
-            rotYSlider.addEventListener('input', updateModelTransform);
-            scaleSlider.addEventListener('input', updateModelTransform);
-            function animate() {
-                requestAnimationFrame(animate);
                 controls.update();
                 renderer.render(scene, camera);
-            }
-            animate();
-            window.addEventListener('resize', () => {
-                camera.aspect = container.clientWidth / container.clientHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(container.clientWidth, container.clientHeight);
-            });
-        }
-        // --- Scene 3: Physics with Cannon.js ---
-        function initPhysics() {
-            const container = document.getElementById('physics-canvas-container');
-            if (!container || container.querySelector('canvas')) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 5, 10);
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
             directionalLight.position.set(5, 10, 7.5);
             scene.add(directionalLight);
-            // Cannon.js world setup
-            const world = new CANNON.World({
-                gravity: new CANNON.Vec3(0, -9.82, 0)
-            });
-            const cannonDebugRenderer = new CannonDebugRenderer.default(scene, world);
-            // Cannon.js ground plane
             const groundShape = new CANNON.Plane();
-            const groundBody = new CANNON.Body({ mass: 0, shape: groundShape });
             groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
             world.addBody(groundBody);
             const meshes = [];
             const bodies = [];
-            const createSphere = () => {
                 const radius = 0.5;
                 const sphereGeometry = new THREE.SphereGeometry(radius, 32, 32);
                 const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x846c5b });
@@ -885,15 +779,11 @@ scene.add(directionalLight);</code></pre>
                 scene.add(sphereMesh);
                 meshes.push(sphereMesh);
-                const sphereBody = new CANNON.Body({
-                    mass: 1,
-                    shape: new CANNON.Sphere(radius)
-                });
                 sphereBody.position.y = 10;
                 world.addBody(sphereBody);
                 bodies.push(sphereBody);
-                // Add collision listener
                 sphereBody.addEventListener('collide', (event) => {
                     sphereMesh.material.color.setHex(0xff0000);
                     setTimeout(() => {
@@ -902,55 +792,24 @@ scene.add(directionalLight);</code></pre>
                 });
             };
-            const groundMesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: 0xcccccc }));
-            groundMesh.rotation.x = -Math.PI / 2;
-            scene.add(groundMesh);
-            document.getElementById('drop-ball-btn').onclick = createSphere;
-            const debugToggle = document.getElementById('physics-debug-toggle');
-            debugToggle.addEventListener('change', () => {
-                cannonDebugRenderer.enabled = debugToggle.checked;
-                // If a ball is dropped when debug is off, it needs to be added to the renderer's meshes
-                if (debugToggle.checked) {
-                    cannonDebugRenderer.update();
-                }
-            });
-            const timeStep = 1 / 60;
-            function animate() {
-                requestAnimationFrame(animate);
-                world.step(timeStep);
-                controls.update();
-                if (debugToggle.checked) {
-                    cannonDebugRenderer.update();
-                }
-                for (let i = 0; i < meshes.length; i++) {
-                    meshes[i].position.copy(bodies[i].position);
-                    meshes[i].quaternion.copy(bodies[i].quaternion);
-                }
-                renderer.render(scene, camera);
-            }
-            animate();
-            window.addEventListener('resize', () => {
-                camera.aspect = container.clientWidth / container.clientHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(container.clientWidth, container.clientHeight);
-            });
-        }
-        // --- Scene 4: Particle & Fluid Simulation ---
-        function initParticles() {
-            const container = document.getElementById('particles-canvas-container');
-            if (!container || container.querySelector('canvas')) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0x000000);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 10, 20);
@@ -961,9 +820,8 @@ scene.add(directionalLight);</code></pre>
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.target.set(0, 0, 0);
             const waterGeometry = new THREE.PlaneGeometry(2000, 2000);
             const water = new Water(
                 waterGeometry,
                 {
@@ -1007,6 +865,7 @@ scene.add(directionalLight);</code></pre>
             const metalColor = new THREE.Color(0x708090);
             let particleCursor = 0;
             const spawnParticles = (type) => {
                 const count = 50;
                 const spread = 20;
@@ -1036,11 +895,15 @@ scene.add(directionalLight);</code></pre>
                 particleGeometry.attributes.color.needsUpdate = true;
             };
-            document.getElementById('drop-wood-btn').onclick = () => spawnParticles('wood');
-            document.getElementById('drop-metal-btn').onclick = () => spawnParticles('metal');
-            function animate() {
-                requestAnimationFrame(animate);
                 controls.update();
                 water.material.uniforms['time'].value += 1.0 / 60.0;
@@ -1067,51 +930,123 @@ scene.add(directionalLight);</code></pre>
                 particleGeometry.attributes.position.needsUpdate = true;
                 renderer.render(scene, camera);
-            }
             animate();
-            window.addEventListener('resize', () => {
-                camera.aspect = container.clientWidth / container.clientHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(container.clientWidth, container.clientHeight);
             });
-        }
-        // --- Debugging Logic ---
-        const debugConsole = document.getElementById('debug-console');
-        const fixDisplay = document.getElementById('debug-fix-display');
-        const fixesContent = document.getElementById('fixes');
-        debugConsole.addEventListener('click', (e) => {
-            const line = e.target.closest('.debug-line');
-            if (line) {
-                const fixId = line.dataset.fix;
-                const content = fixesContent.querySelector(`#${fixId}`).innerHTML;
-                fixDisplay.innerHTML = `<h3 class="text-xl font-semibold mb-2">Analysis & Fix</h3>${content}`;
-            }
-        });
-        // Initializer for scenes
-        const observer = new MutationObserver((mutationsList) => {
-            for (const mutation of mutationsList) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                    const target = mutation.target;
-                    if (target.classList.contains('active')) {
-                        if (target.id === 'fundamentals') initFundamentals();
-                        if (target.id === 'models') initModels();
-                        if (target.id === 'physics') initPhysics();
-                        if (target.id === 'particles') initParticles();
                     }
                 }
             }
         });
-        sections.forEach(section => {
-            observer.observe(section, { attributes: true });
         });
-        initFundamentals();
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" class="bg-gray-100">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Web Development Guide</title>
+    <!-- Use a simple color palette for a friendly, warm tone -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .container {
+            max-width: 1200px;
+        }
+        .tab-inactive {
+            color: #78716c; /* Warm gray */
+            border-color: transparent;
+        }
+        .tab-active {
+            color: #654321; /* Dark brown */
+            border-color: #654321;
+        }
+        .interactive-canvas-container {
+            position: relative;
+            width: 100%;
+            padding-top: 56.25%; /* 16:9 Aspect Ratio */
+            border-radius: 0.5rem;
+            overflow: hidden;
+            background-color: #e7e5e4;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .interactive-canvas-container canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        /* Basic Accordion Styling */
+        .accordion-item {
+            border: 1px solid #d1d5db;
+            border-radius: 0.5rem;
+        }
+        .accordion-button {
+            background-color: #f9fafb;
+            color: #1f2937;
+        }
+        .accordion-button:hover {
+            background-color: #f3f4f6;
+        }
+        .accordion-arrow {
+            transition: transform 0.3s ease;
+        }
+        .accordion-button.open .accordion-arrow {
+            transform: rotate(180deg);
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+            background-color: #fff;
+            padding: 0 1rem;
+        }
+        .accordion-content p {
+            padding: 0.5rem 0;
+        }
+        .accordion-button.open + .accordion-content {
+            max-height: 500px; /* Adjust as needed for content */
+        }
+        /* Debug Console Styling */
+        .debug-console {
+            background-color: #1e1e1e;
+            color: #d4d4d4;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-family: 'Consolas', 'Courier New', monospace;
+            white-space: pre-wrap;
+            line-height: 1.5;
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .debug-info { color: #569cd6; }
+        .debug-warn { color: #dcdcaa; }
+        .debug-error { color: #f44747; }
+        .debug-line { padding: 0.2rem 0; cursor: pointer; }
+        .debug-line:hover { background-color: rgba(255, 255, 255, 0.05); }
     </style>
 </head>
+<body class="bg-gray-100 text-gray-800">
     <div class="container mx-auto p-4 sm:p-6 lg:p-8">
         <header class="text-center mb-8">
             <h1 class="text-4xl md:text-5xl font-bold text-gray-800" style="color: #654321;">Varun Mulay's Guide to 3D Web Development</h1>
             <p class="mt-2 text-lg text-gray-600" style="color: #78716c;">An interactive guide to creating 3D games and simulations with Three.js.</p>
         </header>
+        <nav class="mb-8 border-b border-gray-200 overflow-x-auto">
+            <ul class="flex flex-nowrap text-sm font-medium text-center" id="tab-nav">
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-active" id="fundamentals-tab">1. Fundamentals</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="controls-tab">2. Orbital Controls</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="models-tab">3. Importing Models</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="physics-tab">4. Physics with Cannon.js</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="particles-tab">5. Particle & Fluid Simulation</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="debugging-tab">6. Debugging</button>
+                </li>
+                <li class="flex-shrink-0">
+                    <button class="inline-block p-4 border-b-2 rounded-t-lg tab-inactive" id="model-viewer-tab">7. Model Viewer</button>
+                </li>
             </ul>
         </nav>
         <main id="tab-content">
             <!-- 1. Fundamentals -->
+            <section id="fundamentals" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Three.js Fundamentals: The Core Components</h2>
+                <p>Every Three.js application, from a simple cube to a complex game, is built upon three core components: the <code>Scene</code>, the <code>Camera</code>, and the <code>Renderer</code>. This section provides an interactive demonstration of these foundational elements.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
+                        <div class="interactive-canvas-container" id="fundamentals-canvas"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
+                            <button id="fundamentals-move-x" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Move X</button>
+                            <button id="fundamentals-move-y" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Move Y</button>
+                            <button id="fundamentals-color" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Change Color</button>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Core Logic Explained</h3>
+                        <p class="mb-4">Below is the essential JavaScript code. The interactive buttons on the left directly call functions that modify the cube's properties.</p>
+                        <pre><code class="language-javascript">{`
 // 1. Scene: The container for all objects
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0xf0f0f0);
 // 2. Camera: Defines the viewpoint
 const camera = new THREE.PerspectiveCamera(
+    75, width / height, 0.1, 1000
 );
 camera.position.z = 5;
 // 3. Renderer: Renders the scene
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize(width, height);
+container.appendChild(renderer.domElement);
+// Add lighting
 const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
 scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
 // Create an object (Mesh = Geometry + Material)
 const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshStandardMaterial({ color: 0x846c5b });
 const cube = new THREE.Mesh(geometry, material);
 scene.add(cube);
     renderer.render(scene, camera);
 }
 animate();
+                        `}</code></pre>
                     </div>
                 </div>
             </section>
             <!-- 2. Orbital Controls -->
+            <section id="controls" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Mastering Orbital Controls</h2>
+                <p><code>OrbitControls</code> is a powerful tool that gives the user freedom to pan, zoom, and rotate the camera. This section explains the correct setup and provides a troubleshooting guide for common errors.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Correct Implementation</h3>
+                        <pre><code class="language-javascript">{`
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 // ... After setting up scene, camera, renderer
 // Initialize controls
 const controls = new OrbitControls(camera, renderer.domElement);
 // CRITICAL: Update controls in the animation loop
 function animate() {
     requestAnimationFrame(animate);
     controls.update();
     renderer.render(scene, camera);
 }
 animate();
+                        `}</code></pre>
                     </div>
                     <div class="space-y-4">
                         <h3 class="text-xl font-semibold mb-2">Troubleshooting Common Errors</h3>
+                        <div class="accordion-item">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>My controls feel laggy or don't stop immediately.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
                                 <p><strong>Cause:</strong> You have set <code>controls.enableDamping = true</code> but forgotten to call <code>controls.update()</code> inside your animation loop.</p>
+                                <p><strong>Fix:</strong> Add <code>controls.update()</code> to your <code>animate</code> function.</p>
                             </div>
                         </div>
+                        <div class="accordion-item">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>The camera zooms in/out but doesn't rotate.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
+                                <p><strong>Cause:</strong> The OrbitControls script has not loaded correctly.</p>
+                                <p><strong>Fix:</strong> Check your browser's developer console (F12) for errors. Ensure the path to <code>OrbitControls.js</code> in your import is correct.</p>
                             </div>
                         </div>
+                        <div class="accordion-item">
                             <button class="accordion-button flex justify-between items-center w-full p-4 text-left font-medium">
                                 <span>My camera can go below the "ground" plane.</span>
                                 <span class="accordion-arrow transform transition-transform">▼</span>
                             </button>
                             <div class="accordion-content px-4 pb-4">
                                 <p><strong>Cause:</strong> The default polar angle allows for 360-degree vertical rotation.</p>
+                                <p><strong>Fix:</strong> Limit the vertical rotation by setting <code>controls.maxPolarAngle = Math.PI / 2;</code></p>
                             </div>
                         </div>
                     </div>
             </section>
             <!-- 3. Importing Models -->
+            <section id="models" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Importing 3D Models (.glb/.gltf)</h2>
+                <p>Use the button below to upload a model from your computer. You can use the sliders to interactively adjust its position, rotation, and scale, which are the fundamental transformations you'll apply to any object in your scene.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
+                        <div class="interactive-canvas-container" id="models-canvas"></div>
                         <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-white border rounded-md">
                             <div>
                                 <label for="model-pos-x" class="block text-sm font-medium">Position X</label>
                                 Upload Model (.glb/.gltf)
                                 <input type="file" id="model-upload" class="hidden" accept=".glb, .gltf">
                             </label>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Model Loader & Transformation Code</h3>
+                        <p class="mb-4">Loading models is an asynchronous operation. You use a specific loader and define a callback function that executes once the model has loaded successfully.</p>
+                        <pre><code class="language-javascript">{`
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 const loader = new GLTFLoader();
+loader.load(
+    'path/to/model.glb',
+    function (gltf) {
+        const model = gltf.scene;
+        // Transformations applied here
+        model.position.set(0, -1, 0);
+        model.scale.set(1.5, 1.5, 1.5);
+        scene.add(model);
+    },
+    undefined,
+    function (error) {
+        console.error('An error occurred while loading the model:', error);
     }
+);
+                        `}</code></pre>
                     </div>
                 </div>
             </section>
             <!-- 4. Physics with Cannon.js -->
+            <section id="physics" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">The Physics Engine: Cannon.js</h2>
+                <p>Cannon.js handles the backend calculations for gravity, collisions, and forces, while you use its results to update the positions and rotations of your visible Three.js objects. Click "Drop Ball" to see the collision event.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
+                        <div class="interactive-canvas-container" id="physics-canvas"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
+                            <button id="drop-ball" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Ball</button>
                             <label class="flex items-center space-x-2 px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm">
+                                <input type="checkbox" id="physics-debug" class="form-checkbox h-4 w-4 text-gray-600 transition-colors">
                                 <span class="text-sm font-medium text-gray-700">Debug Physics</span>
                             </label>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Connecting Physics to Rendering</h3>
+                        <p class="mb-4">The core loop of a physics-based game involves two key steps: first, advance the physics world, then update the visual objects based on the new physics positions.</p>
+                        <pre><code class="language-javascript">{`
 import * as CANNON from 'cannon-es';
 import * as CannonDebugRenderer from 'cannon-es-debugger';
+const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });
 const cannonDebugRenderer = new CannonDebugRenderer.default(scene, world);
+// Create the physical ground plane
+const groundBody = new CANNON.Body({ mass: 0 });
 groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
 world.addBody(groundBody);
+// Update both in the animation loop
 function animate() {
     requestAnimationFrame(animate);
     world.fixedStep();
     cannonDebugRenderer.update();
     // Sync each Three.js mesh with its Cannon.js body
     renderer.render(scene, camera);
 }
 animate();
+                        `}</code></pre>
                     </div>
                 </div>
             </section>
             <!-- 5. Particle & Fluid Simulation -->
+            <section id="particles" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">Buoyancy and Density Simulation</h2>
+                <p>In this simple demonstration, we've created a custom particle system to show the difference between wood and metal. Wood, being less dense, floats on the surface, while metal, being denser, continues to sink.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
+                        <div class="interactive-canvas-container" id="particles-canvas"></div>
                         <div class="mt-4 flex flex-wrap gap-2 justify-center">
+                            <button id="drop-wood" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Wood</button>
+                            <button id="drop-metal" class="px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition">Drop Metal</button>
                         </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Simulation Logic</h3>
+                        <p class="mb-4">Here's a breakdown of the code that creates the simulation. The animation loop applies a different "physics" rule to each particle once it hits the water plane.</p>
+                        <pre><code class="language-javascript">{`
 // The main animation loop
 function animate() {
     requestAnimationFrame(animate);
     // Update particle positions and apply physics
     for (let i = 0; i < particleCount * 3; i += 3) {
         const particleIndex = i / 3;
     renderer.render(scene, camera);
 }
 animate();
+                        `}</code></pre>
                     </div>
                 </div>
             </section>
             <!-- 6. Debugging -->
+            <section id="debugging" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">A Game Developer's Debugging Toolkit</h2>
+                <p>When things go wrong in 3D, the errors can be cryptic. A blank screen is a common symptom for many different problems. Click on each error line to understand its likely cause and how to approach fixing it, turning you into a more effective problem solver.</p>
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                      <div class="space-y-4">
                         <h3 class="text-xl font-semibold mb-2">Interactive Debug Console</h3>
                         <div class="debug-console" id="debug-console">
+                            <div class="debug-line debug-info" data-fix="fix1">▷ INFO: THREE.WebGLRenderer 164</div>
+                            <div class="debug-line debug-warn" data-fix="fix2">▷ WARN: Scene has no lights. Objects may appear black.</div>
+                            <div class="debug-line debug-error" data-fix="fix3">▷ ERROR: TypeError: Cannot read properties of undefined (reading 'scene')</div>
+                            <div class="debug-line debug-error" data-fix="fix4">▷ ERROR: Failed to load resource: net::ERR_FILE_NOT_FOUND Horse.glb</div>
+                            <div class="debug-line debug-info" data-fix="fix5">▷ INFO: Animation loop started.</div>
+                            <div class="debug-line debug-error" data-fix="fix6">▷ ERROR: Uncaught TypeError: Cannot set properties of null (setting 'position')</div>
                         </div>
                      </div>
                      <div class="p-4 bg-white border rounded-md" id="debug-fix-display">
                         <p class="text-gray-500">Click on an error in the console to see a detailed explanation and solution here.</p>
                      </div>
                 </div>
             </section>
             <!-- 7. Model Viewer -->
+            <section id="model-viewer" class="space-y-6 hidden">
                 <h2 class="text-3xl font-bold" style="color: #a58d6f;">The Easy Way: Google's &lt;model-viewer&gt;</h2>
+                <p>For some use cases, like displaying a single product or a piece of art, a full Three.js scene is overkill. Google's <code>&lt;model-viewer&gt;</code> is a web component that lets you declaratively add a 3D model to a webpage with minimal code. It's incredibly powerful for simple showcases, offering features like AR placement, animations, and camera controls right out of the box.</p>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
                     <div>
                         <h3 class="text-xl font-semibold mb-2">Live Example</h3>
+                        <div id="model-viewer-container">
+                            <model-viewer
+                                src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
+                                alt="A 3D model of an astronaut"
+                                ar
+                                auto-rotate
+                                camera-controls
+                                style="width: 100%; height: 400px; background-color: #f0f0f0; border-radius: 8px;"
+                            ></model-viewer>
+                        </div>
                     </div>
                     <div>
                         <h3 class="text-xl font-semibold mb-2">When to Use Which?</h3>
         </main>
     </div>
     <script type="module">
+        import * as THREE from 'https://cdn.skypack.dev/three@0.132.2';
+        import { OrbitControls } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js';
+        import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/GLTFLoader.js';
+        import * as CANNON from 'https://cdn.skypack.dev/cannon-es@0.20.0';
+        import CannonDebugger from 'https://cdn.skypack.dev/cannon-es-debugger@1.0.0';
+        import { Water } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/objects/Water.js';
+        const tabs = document.querySelectorAll('#tab-nav button');
+        const sections = document.querySelectorAll('#tab-content section');
+        const disposers = {};
+        // Function to clean up a scene
+        const cleanupScene = (canvasId) => {
+            const canvasContainer = document.getElementById(canvasId);
+            if (!canvasContainer) return;
+            const canvas = canvasContainer.querySelector('canvas');
+            if (canvas) {
+                if (disposers[canvasId]) {
+                    disposers[canvasId]();
+                    delete disposers[canvasId];
                 }
+                canvas.parentNode.removeChild(canvas);
+            }
+        };
+        // Function to set up the fundamentals scene
+        const setupFundamentals = () => {
+            const container = document.getElementById('fundamentals-canvas');
+            if (!container) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
             const material = new THREE.MeshStandardMaterial({ color: 0x846c5b, metalness: 0.3, roughness: 0.6 });
             const cube = new THREE.Mesh(geometry, material);
             scene.add(cube);
+            camera.position.z = 3;
+            const handleResize = () => {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            };
+            let animationFrameId;
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
                 cube.rotation.x += 0.005;
                 cube.rotation.y += 0.005;
                 renderer.render(scene, camera);
+            };
             animate();
+            window.addEventListener('resize', handleResize);
+            document.getElementById('fundamentals-move-x').onclick = () => {
+                cube.position.x += 0.5;
+            };
+            document.getElementById('fundamentals-move-y').onclick = () => {
+                cube.position.y += 0.5;
+            };
+            document.getElementById('fundamentals-color').onclick = () => {
+                cube.material.color.setHex(Math.random() * 0xffffff);
+            };
+            disposers['fundamentals-canvas'] = () => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                scene.children.forEach(child => scene.remove(child));
+                renderer.dispose();
+            };
+        };
+        // Function to set up the controls scene
+        const setupControls = () => {
+             const container = document.getElementById('controls-canvas');
+            if (!container) return;
+            const scene = new THREE.Scene();
+            scene.background = new THREE.Color(0xe7e5e4);
+            const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+            camera.position.z = 5;
+            const renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            container.appendChild(renderer.domElement);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(5, 5, 5);
+            scene.add(directionalLight);
+            const geometry = new THREE.BoxGeometry(1, 1, 1);
+            const material = new THREE.MeshStandardMaterial({ color: 0x846c5b, metalness: 0.3, roughness: 0.6 });
+            const cube = new THREE.Mesh(geometry, material);
+            scene.add(cube);
+            const controls = new OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true; // an animation loop is required when damping is enabled
+            controls.dampingFactor = 0.05;
+            const handleResize = () => {
                 camera.aspect = container.clientWidth / container.clientHeight;
                 camera.updateProjectionMatrix();
                 renderer.setSize(container.clientWidth, container.clientHeight);
+            };
+            let animationFrameId;
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
+                controls.update();
+                renderer.render(scene, camera);
+            };
+            animate();
+            window.addEventListener('resize', handleResize);
+            disposers['controls-canvas'] = () => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                scene.children.forEach(child => scene.remove(child));
+                renderer.dispose();
+            };
+        };
+        // Function to set up the models scene
+        const setupModels = () => {
+            const container = document.getElementById('models-canvas');
+            if (!container) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 1.5, 4);
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
             scene.add(dirLight);
             const loader = new GLTFLoader();
+            let model;
+            loader.load('https://cdn.jsdelivr.net/npm/three@0.164.1/examples/models/gltf/Horse.glb', (gltf) => {
+                model = gltf.scene;
+                model.position.y = -1;
+                model.scale.set(1.5, 1.5, 1.5);
+                scene.add(model);
             });
+            const handleResize = () => {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            };
+            let animationFrameId;
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
                 controls.update();
                 renderer.render(scene, camera);
+            };
+            animate();
+            window.addEventListener('resize', handleResize);
+            document.getElementById('model-pos-x').oninput = (e) => {
+                if (model) model.position.x = parseFloat(e.target.value);
+            };
+            document.getElementById('model-rot-y').oninput = (e) => {
+                if (model) model.rotation.y = parseFloat(e.target.value);
+            };
+            document.getElementById('model-scale').oninput = (e) => {
+                if (model) model.scale.set(parseFloat(e.target.value), parseFloat(e.target.value), parseFloat(e.target.value));
+            };
+            document.getElementById('model-upload').onchange = (e) => {
+                const file = e.target.files[0];
+                if (!file) return;
+                const url = URL.createObjectURL(file);
+                loader.load(url, (gltf) => {
+                    if (model) scene.remove(model);
+                    model = gltf.scene;
+                    model.position.y = -1;
+                    scene.add(model);
+                });
+            };
+            disposers['models-canvas'] = () => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                scene.children.forEach(child => scene.remove(child));
+                renderer.dispose();
+            };
+        };
+        // Function to set up the physics scene
+        const setupPhysics = () => {
+            const container = document.getElementById('physics-canvas');
+            if (!container) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0xe7e5e4);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 5, 10);
             const renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(container.clientWidth, container.clientHeight);
             container.appendChild(renderer.domElement);
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
             directionalLight.position.set(5, 10, 7.5);
             scene.add(directionalLight);
+            const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.82, 0) });
             const groundShape = new CANNON.Plane();
+            const groundBody = new CANNON.Body({ mass: 0 });
+            groundBody.addShape(groundShape);
             groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
             world.addBody(groundBody);
+            const groundMesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: 0xcccccc }));
+            groundMesh.rotation.x = -Math.PI / 2;
+            scene.add(groundMesh);
             const meshes = [];
             const bodies = [];
+            let debuggerInstance;
+            const handleResize = () => {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            };
+            let animationFrameId;
+            const timeStep = 1 / 60;
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
+                world.step(timeStep);
+                controls.update();
+                if (document.getElementById('physics-debug').checked) {
+                    if (!debuggerInstance) {
+                        debuggerInstance = new CannonDebugger(scene, world);
+                    }
+                    debuggerInstance.update();
+                } else {
+                    if (debuggerInstance) {
+                        debuggerInstance.destroy();
+                        debuggerInstance = null;
+                    }
+                }
+                for (let i = 0; i < meshes.length; i++) {
+                    meshes[i].position.copy(bodies[i].position);
+                    meshes[i].quaternion.copy(bodies[i].quaternion);
+                }
+                renderer.render(scene, camera);
+            };
+            animate();
+            window.addEventListener('resize', handleResize);
+            document.getElementById('drop-ball').onclick = () => {
                 const radius = 0.5;
                 const sphereGeometry = new THREE.SphereGeometry(radius, 32, 32);
                 const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x846c5b });
                 scene.add(sphereMesh);
                 meshes.push(sphereMesh);
+                const sphereBody = new CANNON.Body({ mass: 1, shape: new CANNON.Sphere(radius) });
                 sphereBody.position.y = 10;
                 world.addBody(sphereBody);
                 bodies.push(sphereBody);
                 sphereBody.addEventListener('collide', (event) => {
                     sphereMesh.material.color.setHex(0xff0000);
                     setTimeout(() => {
                 });
             };
+            disposers['physics-canvas'] = () => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                if (debuggerInstance) { debuggerInstance.destroy(); }
+                scene.children.forEach(child => scene.remove(child));
+                renderer.dispose();
+                meshes.length = 0;
+                bodies.length = 0;
+            };
+        };
+        // Function to set up the particle simulation
+        const setupParticles = () => {
+            const container = document.getElementById('particles-canvas');
+            if (!container) return;
             const scene = new THREE.Scene();
             scene.background = new THREE.Color(0x000000);
             const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
             camera.position.set(0, 10, 20);
             const controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
             controls.target.set(0, 0, 0);
             const waterGeometry = new THREE.PlaneGeometry(2000, 2000);
             const water = new Water(
                 waterGeometry,
                 {
             const metalColor = new THREE.Color(0x708090);
             let particleCursor = 0;
             const spawnParticles = (type) => {
                 const count = 50;
                 const spread = 20;
                 particleGeometry.attributes.color.needsUpdate = true;
             };
+            const handleResize = () => {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            };
+            let animationFrameId;
+            const animate = () => {
+                animationFrameId = requestAnimationFrame(animate);
                 controls.update();
                 water.material.uniforms['time'].value += 1.0 / 60.0;
                 particleGeometry.attributes.position.needsUpdate = true;
                 renderer.render(scene, camera);
+            };
             animate();
+            window.addEventListener('resize', handleResize);
+            document.getElementById('drop-wood').onclick = () => spawnParticles('wood');
+            document.getElementById('drop-metal').onclick = () => spawnParticles('metal');
+            disposers['particles-canvas'] = () => {
+                window.removeEventListener('resize', handleResize);
+                cancelAnimationFrame(animationFrameId);
+                scene.children.forEach(child => scene.remove(child));
+                renderer.dispose();
+            };
+        };
+        const setupDebugging = () => {
+            const fixes = {
+                fix1: "This is a standard startup message confirming that the Three.js renderer has been successfully initialized. It's not an error. If you don't see this, it's likely Three.js itself failed to load.",
+                fix2: "Cause: Most materials, like MeshStandardMaterial or MeshPhongMaterial, require light to be visible. Without any lights in the scene, objects using these materials will render as black. Fix: Add at least one light to your scene. An AmbientLight provides basic, flat illumination, while a DirectionalLight simulates a distant light source like the sun.",
+                fix3: "Cause: This typically happens when your model loader's callback function returns, but the model data is not what you expect. Your code tries to access gltf.scene, but gltf is undefined. Fix: This is often a symptom of a failed model load. Check the console for an earlier error (like a 404 Not Found) that indicates the model file itself couldn't be fetched. The loader failed, so the callback received nothing.",
+                fix4: "Cause: The path provided to the model loader is incorrect. The browser cannot find the file at that location. Fix: Double-check the file path. Is it relative or absolute? Is there a typo? Open your browser's 'Network' tab in the developer tools to see the exact URL it tried to fetch and the 404 error response.",
+                fix5: "This is a useful debugging message you can add yourself with console.log() to confirm that your animate function is being called. If your scene is static when it should be moving, and you don't see this message, you've likely forgotten to call animate() to start the loop.",
+                fix6: "Cause: You are trying to use a variable before the object it represents has been fully created and added to the scene. Fix: Make sure your object is initialized before you try to access its properties. A common solution is to wrap your code that interacts with the object in a conditional statement like if (cube) { ... }.",
+            };
+            const display = document.getElementById('debug-fix-display');
+            const displayTitle = display.querySelector('h3');
+            const displayContent = display.querySelector('p');
+            document.querySelectorAll('.debug-line').forEach(line => {
+                line.onclick = (e) => {
+                    const fixKey = e.currentTarget.getAttribute('data-fix');
+                    const titleText = e.currentTarget.textContent.replace('▷ ', '');
+                    displayTitle.textContent = "Analysis & Fix";
+                    displayContent.innerHTML = `<strong>${titleText}</strong><br>${fixes[fixKey]}`;
+                };
             });
+            disposers['debugging'] = () => {
+                document.querySelectorAll('.debug-line').forEach(line => line.onclick = null);
+                displayContent.innerHTML = "Click on an error in the console to see a detailed explanation and solution here.";
+            };
+        };
+        // Function to set up the model viewer tab
+        const setupModelViewer = () => {
+            const script = document.createElement('script');
+            script.type = 'module';
+            script.src = 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js';
+            document.head.appendChild(script);
+            disposers['model-viewer'] = () => {
+                // No cleanup for this simple setup, as the component manages itself
+            };
+        };
+        const tabSetupFunctions = {
+            'fundamentals': setupFundamentals,
+            'controls': setupControls,
+            'models': setupModels,
+            'physics': setupPhysics,
+            'particles': setupParticles,
+            'debugging': setupDebugging,
+            'model-viewer': setupModelViewer,
+        };
+        const switchTab = (tabId) => {
+            // Cleanup the current scene if one exists
+            sections.forEach(section => {
+                if (!section.classList.contains('hidden')) {
+                    const currentTabId = section.id;
+                    if (disposers[currentTabId]) {
+                        disposers[currentTabId]();
                     }
                 }
+            });
+            // Hide all sections and deactivate all tabs
+            sections.forEach(section => section.classList.add('hidden'));
+            tabs.forEach(tab => tab.classList.remove('tab-active'));
+            tabs.forEach(tab => tab.classList.add('tab-inactive'));
+            // Show the selected section and activate its tab
+            document.getElementById(tabId).classList.remove('hidden');
+            document.getElementById(tabId + '-tab').classList.remove('tab-inactive');
+            document.getElementById(tabId + '-tab').classList.add('tab-active');
+            // Run the setup function for the new tab
+            if (tabSetupFunctions[tabId]) {
+                tabSetupFunctions[tabId]();
             }
+        };
+        // Add event listeners for tab clicks
+        tabs.forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                const tabId = e.target.id.replace('-tab', '');
+                switchTab(tabId);
+            });
         });
+        document.querySelectorAll('.accordion-button').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const content = e.currentTarget.nextElementSibling;
+                e.currentTarget.classList.toggle('open');
+                if (content.style.maxHeight) {
+                    content.style.maxHeight = null;
+                } else {
+                    content.style.maxHeight = content.scrollHeight + "px";
+                }
+            });
         });
+        // Initial setup for the first tab
+        window.onload = () => {
+            switchTab('fundamentals');
+        };
     </script>
 </body>
 </html>