(index):64 cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

(anonymous) @ (index):64Understand this warning
OrbitControls.js:1 Uncaught SyntaxError: Cannot use import statement outside a moduleUnderstand this error
GLTFLoader.js:1 Uncaught SyntaxError: Cannot use import statement outside a moduleUnderstand this error
about:srcdoc:566 Uncaught ReferenceError: THREE is not defined
at initThreeJS (about:srcdoc:566:13)
at HTMLButtonElement.startGame (about:srcdoc:478:13)Understand this error
about:srcdoc:1108 Uncaught TypeError: Cannot set properties of undefined (setting 'enabled')
at cycleCameraMode (about:srcdoc:1108:30)
at about:srcdoc:359:21

index.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D Character World</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/controls/OrbitControls.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/loaders/GLTFLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/loaders/GLTFLoader.js"></script>
 <style>
         body {
             margin: 0;
@@ -342,9 +342,8 @@
         let scene, camera, renderer, controls;
         let mixer, clock, loader;
         let world;
-
         // Initialize the app
-        document.addEventListener('DOMContentLoaded', () => {
+        document.addEventListener('DOMContentLoaded', async () => {
             // Set up UI event listeners
             document.getElementById('start-btn').addEventListener('click', showCharacterSelection);
             document.getElementById('confirm-character').addEventListener('click', showWorldSelection);
@@ -370,9 +369,14 @@
 
             // Initialize audio context on user interaction
             document.addEventListener('click', initializeAudio, { once: true });
-        });
 
-        function initializeAudio() {
+            // Ensure Three.js is loaded before initialization
+            if (typeof THREE === 'undefined') {
+                console.error('Three.js not loaded');
+                return;
+            }
+        });
+function initializeAudio() {
             if (audioContext) return;
             
             try {
@@ -562,93 +566,117 @@ card.addEventListener('click', () => {
             });
         }
         function initThreeJS() {
-            // Set up Three.js scene
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x87CEEB); // Sky blue
-            
-            // Camera
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 5, 10);
-            
-            // Renderer
-            const canvas = document.getElementById('canvas');
-            renderer = new THREE.WebGLRenderer({ 
-                canvas: canvas,
-                antialias: true,
-                alpha: true
-            });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            
-            // Clock for animations
-            clock = new THREE.Clock();
+            if (typeof THREE === 'undefined') {
+                console.error('Three.js is not loaded properly');
+                return;
+            }
             
-            // Loader
-            loader = new THREE.GLTFLoader();
-        // Add environment map
-        const envMapLoader = new THREE.CubeTextureLoader();
-        const envMap = envMapLoader.load([
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
-            'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg'
-        ]);
-        scene.background = envMap;
-        scene.environment = envMap;
+            try {
+                // Set up Three.js scene
+                scene = new THREE.Scene();
+                scene.background = new THREE.Color(0x87CEEB); // Sky blue
+                
+                // Camera
+                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+                camera.position.set(0, 5, 10);
+                
+                // Renderer
+                const canvas = document.getElementById('canvas');
+                renderer = new THREE.WebGLRenderer({ 
+                    canvas: canvas,
+                    antialias: true,
+                    alpha: true
+                });
+                renderer.setSize(window.innerWidth, window.innerHeight);
+                renderer.shadowMap.enabled = true;
+                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                
+                // Clock for animations
+                clock = new THREE.Clock();
+                
+                // Loader
+                loader = new THREE.GLTFLoader();
+                // Add environment map with error handling
+                const envMapLoader = new THREE.CubeTextureLoader();
+                envMapLoader.load([
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nx.jpg',
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/py.jpg',
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/ny.jpg',
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/pz.jpg',
+                    'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/nz.jpg'
+                ], 
+                (envMap) => {
+                    scene.background = envMap;
+                    scene.environment = envMap;
+                },
+                undefined,
+                (error) => {
+                    console.warn('Failed to load environment map:', error);
+                    // Fallback to plain color background
+                    scene.background = new THREE.Color(0x87CEEB);
+                });
 
-        // Add better lighting for RPM avatars
-        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
-        scene.add(hemisphereLight);
+                // Add better lighting for RPM avatars
+                const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
+                scene.add(hemisphereLight);
 
-        const mainLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        mainLight.position.set(10, 20, 15);
-        mainLight.castShadow = true;
-        mainLight.shadow.mapSize.width = 2048;
-        mainLight.shadow.mapSize.height = 2048;
-        mainLight.shadow.camera.near = 0.5;
-        mainLight.shadow.camera.far = 50;
-        mainLight.shadow.camera.left = -20;
-        mainLight.shadow.camera.right = 20;
-        mainLight.shadow.camera.top = 20;
-        mainLight.shadow.camera.bottom = -20;
-        scene.add(mainLight);
-// Create ground
-            const groundGeometry = new THREE.PlaneGeometry(100, 100);
-            const groundMaterial = new THREE.MeshStandardMaterial({ 
-                color: 0x4ade80,
-                roughness: 0.8,
-                metalness: 0.2
-            });
-            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            scene.add(ground);
-            
-            // Add some environment objects
-            addEnvironmentObjects();
-            // Initialize OrbitControls
-            controls = new THREE.OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.05;
-            controls.enabled = false; // Start with controls disabled for follow camera
+                const mainLight = new THREE.DirectionalLight(0xffffff, 0.8);
+                mainLight.position.set(10, 20, 15);
+                mainLight.castShadow = true;
+                mainLight.shadow.mapSize.width = 2048;
+                mainLight.shadow.mapSize.height = 2048;
+                mainLight.shadow.camera.near = 0.5;
+                mainLight.shadow.camera.far = 50;
+                mainLight.shadow.camera.left = -20;
+                mainLight.shadow.camera.right = 20;
+                mainLight.shadow.camera.top = 20;
+                mainLight.shadow.camera.bottom = -20;
+                scene.add(mainLight);
+                // Create ground
+                const groundGeometry = new THREE.PlaneGeometry(100, 100);
+                const groundMaterial = new THREE.MeshStandardMaterial({ 
+                    color: 0x4ade80,
+                    roughness: 0.8,
+                    metalness: 0.2
+                });
+                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                ground.rotation.x = -Math.PI / 2;
+                ground.receiveShadow = true;
+                scene.add(ground);
+                
+                // Add some environment objects
+                addEnvironmentObjects();
+                
+                // Initialize OrbitControls
+                if (typeof THREE.OrbitControls !== 'undefined') {
+                    controls = new THREE.OrbitControls(camera, renderer.domElement);
+                    controls.enableDamping = true;
+                    controls.dampingFactor = 0.05;
+                    controls.enabled = false; // Start with controls disabled for follow camera
+                } else {
+                    console.warn('OrbitControls not available');
+                    controls = { enabled: false, update: () => {} };
+                }
 
-            // Load player character
-            loadPlayerCharacter();
-// Load NPC characters
-            loadNPCCharacters();
-            
-            // Start animation loop
-            animate();
-            
-            // Handle window resize
-            window.addEventListener('resize', () => {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            });
+                // Load player character
+                loadPlayerCharacter();
+                
+                // Load NPC characters
+                loadNPCCharacters();
+                
+                // Start animation loop
+                animate();
+                
+                // Handle window resize
+                window.addEventListener('resize', () => {
+                    camera.aspect = window.innerWidth / window.innerHeight;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(window.innerWidth, window.innerHeight);
+                });
+            } catch (error) {
+                console.error('Error initializing Three.js:', error);
+            }
         }
 function addEnvironmentObjects() {
             // Add some trees
@@ -946,13 +974,11 @@ scene.add(group);
             
             // Update camera based on mode
             updateCamera(delta);
-            
             // Update OrbitControls if enabled
-            if (controls.enabled) {
+            if (controls && controls.enabled) {
                 controls.update();
             }
-            
-            renderer.render(scene, camera);
+renderer.render(scene, camera);
         }
 function handlePlayerMovement(delta) {
             if (!gameState.player) return;
@@ -1093,7 +1119,6 @@ function handlePlayerMovement(delta) {
                     break;
             }
         }
-
         function cycleCameraMode() {
             const modes = ['follow', 'orbit', 'first-person'];
             const currentIndex = modes.indexOf(gameState.cameraMode);
@@ -1105,7 +1130,9 @@ function handlePlayerMovement(delta) {
                 gameState.cameraMode.charAt(0).toUpperCase() + gameState.cameraMode.slice(1);
             
             // Enable/disable OrbitControls based on mode
-            controls.enabled = (gameState.cameraMode === 'orbit');
+            if (controls && typeof controls.enabled !== 'undefined') {
+                controls.enabled = (gameState.cameraMode === 'orbit');
+            }
             
             // Reset camera position for first-person mode
             if (gameState.cameraMode === 'first-person') {