(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):64
(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
VM250 about:srcdoc:124 Three.js not loaded
(anonymous) @ VM250 about:srcdoc:124Understand this error
VM250 about:srcdoc:319 Three.js is not loaded properly
initThreeJS @ VM250 about:srcdoc:319
startGame @ VM250 about:srcdoc:231Understand this error

index.html

@@ -370,12 +370,26 @@
             // Initialize audio context on user interaction
             document.addEventListener('click', initializeAudio, { once: true });
 
-            // Ensure Three.js is loaded before initialization
+            // Check if Three.js modules are available
             if (typeof THREE === 'undefined') {
                 console.error('Three.js not loaded');
-                return;
+                // Try to load modules dynamically if needed
+                loadThreeJSModules();
             }
         });
+
+        // Function to dynamically load Three.js modules if needed
+        function loadThreeJSModules() {
+            // Check if OrbitControls is available
+            if (typeof THREE.OrbitControls === 'undefined') {
+                console.warn('OrbitControls not available, using fallback controls');
+            }
+            
+            // Check if GLTFLoader is available
+            if (typeof THREE.GLTFLoader === 'undefined') {
+                console.warn('GLTFLoader not available, using fallback geometry');
+            }
+        }
 function initializeAudio() {
             if (audioContext) return;
             
@@ -568,6 +582,14 @@ card.addEventListener('click', () => {
         function initThreeJS() {
             if (typeof THREE === 'undefined') {
                 console.error('Three.js is not loaded properly');
+                // Try to reload or show error
+                setTimeout(() => {
+                    if (typeof THREE === 'undefined') {
+                        alert('Three.js failed to load. Please refresh the page.');
+                    } else {
+                        initThreeJS(); // Retry initialization
+                    }
+                }, 100);
                 return;
             }
             
@@ -594,8 +616,14 @@ card.addEventListener('click', () => {
                 // Clock for animations
                 clock = new THREE.Clock();
                 
-                // Loader
-                loader = new THREE.GLTFLoader();
+                // Loader - check if GLTFLoader is available
+                if (typeof THREE.GLTFLoader !== 'undefined') {
+                    loader = new THREE.GLTFLoader();
+                } else {
+                    console.warn('GLTFLoader not available, using fallback geometry');
+                    loader = null;
+                }
+                
                 // Add environment map with error handling
                 const envMapLoader = new THREE.CubeTextureLoader();
                 envMapLoader.load([
@@ -633,6 +661,7 @@ card.addEventListener('click', () => {
                 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({ 
@@ -648,15 +677,19 @@ card.addEventListener('click', () => {
                 // Add some environment objects
                 addEnvironmentObjects();
                 
-                // Initialize OrbitControls
+                // Initialize OrbitControls with fallback
                 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: () => {} };
+                    console.warn('OrbitControls not available, using fallback');
+                    controls = { 
+                        enabled: false, 
+                        update: () => {},
+                        target: new THREE.Vector3()
+                    };
                 }
 
                 // Load player character
@@ -676,6 +709,8 @@ card.addEventListener('click', () => {
                 });
             } catch (error) {
                 console.error('Error initializing Three.js:', error);
+                // Show user-friendly error message
+                alert('Error initializing 3D graphics. Please check your browser supports WebGL.');
             }
         }
 function addEnvironmentObjects() {
@@ -713,61 +748,65 @@ function addEnvironmentObjects() {
             }
         }
         function loadPlayerCharacter() {
-            loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
-                const model = gltf.scene;
-                // Scale and position the RPM avatar model - adjusted for human proportions
-                model.scale.set(0.8, 0.8, 0.8);
-model.position.set(0, 0, 0);
-// Enable shadows for all children
-                model.traverse((child) => {
-                    if (child.isMesh) {
-                        child.castShadow = true;
-                        child.receiveShadow = true;
-                    }
-                });
-                
-                scene.add(model);
-                
-                // Set up animations if available
-                const mixer = new THREE.AnimationMixer(model);
-                const animations = gltf.animations;
-                
-                gameState.player = {
-                    model: model,
-                    speed: 0.08,
-                    runSpeed: 0.15,
-                    rotationSpeed: 0.08,
-                    isMoving: false,
-                    mixer: mixer,
-                    animations: animations,
-                    currentAnimation: null,
-                    animationActions: {}
-                };
-                
-                // Set up animation actions
-                if (animations && animations.length > 0) {
-                    animations.forEach((clip) => {
-                        gameState.player.animationActions[clip.name] = mixer.clipAction(clip);
+            if (loader && typeof THREE.GLTFLoader !== 'undefined') {
+                loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
+                    const model = gltf.scene;
+                    // Scale and position the RPM avatar model - adjusted for human proportions
+                    model.scale.set(0.8, 0.8, 0.8);
+                    model.position.set(0, 0, 0);
+                    // Enable shadows for all children
+                    model.traverse((child) => {
+                        if (child.isMesh) {
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
                     });
                     
-                    // Play the first animation by default
-                    if (animations[0]) {
-                        gameState.player.animationActions[animations[0].name].play();
-                        gameState.player.currentAnimation = animations[0].name;
+                    scene.add(model);
+                    
+                    // Set up animations if available
+                    const mixer = new THREE.AnimationMixer(model);
+                    const animations = gltf.animations;
+                    
+                    gameState.player = {
+                        model: model,
+                        speed: 0.08,
+                        runSpeed: 0.15,
+                        rotationSpeed: 0.08,
+                        isMoving: false,
+                        mixer: mixer,
+                        animations: animations,
+                        currentAnimation: null,
+                        animationActions: {}
+                    };
+                    
+                    // Set up animation actions
+                    if (animations && animations.length > 0) {
+                        animations.forEach((clip) => {
+                            gameState.player.animationActions[clip.name] = mixer.clipAction(clip);
+                        });
+                        
+                        // Play the first animation by default
+                        if (animations[0]) {
+                            gameState.player.animationActions[animations[0].name].play();
+                            gameState.player.currentAnimation = animations[0].name;
+                        }
+                    } else {
+                        // If no animations, create simple placeholder animations
+                        createPlayerAnimations();
                     }
-                } else {
-                    // If no animations, create simple placeholder animations
-                    createPlayerAnimations();
-                }
-                
-            }, undefined, (error) => {
-                console.error('Error loading player model:', error);
-                // Fallback to placeholder
+                    
+                }, undefined, (error) => {
+                    console.error('Error loading player model:', error);
+                    // Fallback to placeholder
+                    loadPlayerCharacterFallback();
+                });
+            } else {
+                // GLTFLoader not available, use fallback
                 loadPlayerCharacterFallback();
-            });
+            }
         }
-        
-        function loadPlayerCharacterFallback() {
+function loadPlayerCharacterFallback() {
             const group = new THREE.Group();
             
             // Body