(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
VM448 about:srcdoc:124 Three.js not loaded
(anonymous) @ VM448 about:srcdoc:124Understand this error
VM448 about:srcdoc:133 Uncaught (in promise) ReferenceError: THREE is not defined
at loadThreeJSModules (VM448 about:srcdoc:133:13)
at HTMLDocument.<anonymous> (VM448 about:srcdoc:126:17)
loadThreeJSModules @ VM448 about:srcdoc:133
(anonymous) @ VM448 about:srcdoc:126Understand this error
VM448 about:srcdoc:333 Three.js is not loaded properly
initThreeJS @ VM448 about:srcdoc:333
startGame @ VM448 about:srcdoc:245Understand this error
VM448 about:srcdoc:337 Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

index.html

@@ -4,10 +4,9 @@
     <meta charset="UTF-8">
     <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.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>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/loaders/GLTFLoader.min.js"></script>
 <style>
         body {
             margin: 0;
@@ -188,9 +187,20 @@
             </div>
         </div>
     </div>
+    <!-- Modal for alerts -->
+    <div id="modal-overlay" class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 pointer-events-none transition-all">
+        <div class="bg-gray-900/90 border border-white/10 rounded-xl p-6 max-w-md mx-4 shadow-2xl">
+            <h3 id="modal-title" class="text-xl font-bold text-white mb-2"></h3>
+            <p id="modal-message" class="text-gray-300 mb-4"></p>
+            <button id="modal-close" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white py-2 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition-all">
+                OK
+            </button>
+        </div>
+    </div>
+
     <!-- Game UI -->
     <div id="game-ui" class="fixed inset-0 pointer-events-none z-20 opacity-0 transition-all">
-        <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
+<div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
             <div class="flex items-center space-x-2">
                 <div class="w-3 h-3 rounded-full bg-green-500"></div>
                 <span>WASD: Move</span>
@@ -369,25 +379,45 @@
 
             // Initialize audio context on user interaction
             document.addEventListener('click', initializeAudio, { once: true });
-
-            // Check if Three.js modules are available
-            if (typeof THREE === 'undefined') {
-                console.error('Three.js not loaded');
-                // Try to load modules dynamically if needed
+        // Check if Three.js is loaded
+        if (typeof THREE === 'undefined') {
+            console.error('Three.js not loaded');
+            // Fallback to loading from CDN
+            const script = document.createElement('script');
+            script.src = 'https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.min.js';
+            script.onload = () => {
+                console.log('Three.js loaded via fallback');
+                // Now load the modules
                 loadThreeJSModules();
-            }
-        });
-
+            };
+            document.head.appendChild(script);
+        } else {
+            // Three.js is loaded, check if modules are available
+            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');
+                console.log('Loading OrbitControls...');
+                const orbitScript = document.createElement('script');
+                orbitScript.src = 'https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/controls/OrbitControls.min.js';
+                orbitScript.onload = () => {
+                    console.log('OrbitControls loaded');
+                };
+                document.head.appendChild(orbitScript);
             }
             
             // Check if GLTFLoader is available
             if (typeof THREE.GLTFLoader === 'undefined') {
-                console.warn('GLTFLoader not available, using fallback geometry');
+                console.log('Loading GLTFLoader...');
+                const gltfScript = document.createElement('script');
+                gltfScript.src = 'https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/loaders/GLTFLoader.min.js';
+                gltfScript.onload = () => {
+                    console.log('GLTFLoader loaded');
+                };
+                document.head.appendChild(gltfScript);
             }
         }
 function initializeAudio() {
@@ -481,11 +511,11 @@ function showCharacterSelection() {
         }
         function startGame() {
             if (gameState.selectedWorldCharacters.length < 2) {
-                alert('Please select 2 characters for your world!');
+                // Use a custom modal instead of alert for better UX
+                showModal('Selection Required', 'Please select 2 characters for your world!');
                 return;
             }
-            
-            // Ensure audio is initialized when game starts
+// Ensure audio is initialized when game starts
             if (!audioContext) {
                 initializeAudio();
             }
@@ -582,18 +612,26 @@ 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);
+                // Try to load Three.js dynamically
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.min.js';
+                script.onload = () => {
+                    console.log('Three.js loaded, retrying initialization...');
+                    initThreeJS(); // Retry initialization
+                };
+                document.head.appendChild(script);
                 return;
             }
             
-            try {
+            // Check if required modules are available
+            if (typeof THREE.OrbitControls === 'undefined') {
+                console.warn('OrbitControls not available, using fallback camera controls');
+            }
+            
+            if (typeof THREE.GLTFLoader === 'undefined') {
+                console.warn('GLTFLoader not available, using fallback geometry');
+            }
+try {
                 // Set up Three.js scene
                 scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x87CEEB); // Sky blue
@@ -676,23 +714,23 @@ card.addEventListener('click', () => {
                 
                 // Add some environment objects
                 addEnvironmentObjects();
-                
                 // Initialize OrbitControls with fallback
+                let controls;
                 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, using fallback');
+                    console.warn('OrbitControls not available, using fallback camera controls');
                     controls = { 
                         enabled: false, 
                         update: () => {},
                         target: new THREE.Vector3()
                     };
                 }
-
-                // Load player character
+                window.controls = controls; // Make globally available
+// Load player character
                 loadPlayerCharacter();
                 
                 // Load NPC characters
@@ -710,8 +748,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.');
-            }
+                showModal('3D Graphics Error', 'Error initializing 3D graphics. Please check your browser supports WebGL and try refreshing the page.');
+}
         }
 function addEnvironmentObjects() {
             // Add some trees
@@ -748,8 +786,9 @@ function addEnvironmentObjects() {
             }
         }
         function loadPlayerCharacter() {
-            if (loader && typeof THREE.GLTFLoader !== 'undefined') {
-                loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
+            if (typeof THREE.GLTFLoader !== 'undefined') {
+                const loader = new THREE.GLTFLoader();
+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);
@@ -803,9 +842,10 @@ function addEnvironmentObjects() {
                 });
             } else {
                 // GLTFLoader not available, use fallback
+                console.warn('GLTFLoader not available, using fallback character');
                 loadPlayerCharacterFallback();
             }
-        }
+}
 function loadPlayerCharacterFallback() {
             const group = new THREE.Group();
             
@@ -1014,7 +1054,7 @@ scene.add(group);
             // Update camera based on mode
             updateCamera(delta);
             // Update OrbitControls if enabled
-            if (controls && controls.enabled) {
+            if (controls && controls.enabled && typeof controls.update === 'function') {
                 controls.update();
             }
 renderer.render(scene, camera);
@@ -1167,13 +1207,11 @@ function handlePlayerMovement(delta) {
             // Update UI display
             document.getElementById('camera-mode-display').textContent = 
                 gameState.cameraMode.charAt(0).toUpperCase() + gameState.cameraMode.slice(1);
-            
             // Enable/disable OrbitControls based on mode
             if (controls && typeof controls.enabled !== 'undefined') {
                 controls.enabled = (gameState.cameraMode === 'orbit');
             }
-            
-            // Reset camera position for first-person mode
+// Reset camera position for first-person mode
             if (gameState.cameraMode === 'first-person') {
                 camera.rotation.set(0, 0, 0);
             }