threejs is failling to load

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.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://cdnjs.cloudflare.com/ajax/libs/three.js/r164/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r164/examples/jsm/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r164/examples/jsm/loaders/GLTFLoader.js"></script>
 <style>
         body {
             margin: 0;
@@ -369,15 +369,13 @@
 
             // 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
-                loadThreeJSModules();
-            }
-        });
-
+        // Check if Three.js modules are available
+        if (typeof THREE === 'undefined') {
+            console.error('Three.js not loaded');
+            // Try to load modules dynamically if needed
+            loadThreeJSModules();
+        }
+});
         // Function to dynamically load Three.js modules if needed
         function loadThreeJSModules() {
             // Check if OrbitControls is available
@@ -582,18 +580,21 @@ 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);
+                // Load Three.js from a reliable CDN
+                const script = document.createElement('script');
+                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r164/three.min.js"></script>
+                script.onload = () => {
+                    console.log('Three.js loaded successfully');
+                    initThreeJS(); // Retry initialization
+                };
+                script.onerror = () => {
+                    console.error('Failed to load Three.js');
+                    alert('Three.js failed to load. Please check your internet connection and refresh the page.');
+                };
+                document.head.appendChild(script);
                 return;
             }
-            
-            try {
+try {
                 // Set up Three.js scene
                 scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x87CEEB); // Sky blue
@@ -615,7 +616,6 @@ card.addEventListener('click', () => {
                 
                 // Clock for animations
                 clock = new THREE.Clock();
-                
                 // Loader - check if GLTFLoader is available
                 if (typeof THREE.GLTFLoader !== 'undefined') {
                     loader = new THREE.GLTFLoader();
@@ -623,8 +623,7 @@ card.addEventListener('click', () => {
                     console.warn('GLTFLoader not available, using fallback geometry');
                     loader = null;
                 }
-                
-                // Add environment map with error handling
+// Add environment map with error handling
                 const envMapLoader = new THREE.CubeTextureLoader();
                 envMapLoader.load([
                     'https://threejs.org/examples/textures/cube/SwedishRoyalCastle/px.jpg',
@@ -676,7 +675,6 @@ card.addEventListener('click', () => {
                 
                 // Add some environment objects
                 addEnvironmentObjects();
-                
                 // Initialize OrbitControls with fallback
                 if (typeof THREE.OrbitControls !== 'undefined') {
                     controls = new THREE.OrbitControls(camera, renderer.domElement);
@@ -689,10 +687,9 @@ card.addEventListener('click', () => {
                         enabled: false, 
                         update: () => {},
                         target: new THREE.Vector3()
-                    };
+                };
                 }
-
-                // Load player character
+// Load player character
                 loadPlayerCharacter();
                 
                 // Load NPC characters