Update index.html

index.html

@@ -96,11 +96,8 @@
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/4.0.1/simplex-noise.min.js"></script> <!-- async defer 추가 -->
     <script>
-
-        // --- Simplex Noise 라이브러리 코드 (simplex-noise.min.js 내용) ---
-        !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).simplexNoise={})}(this,(function(e){"use strict";function t(){return Math.random()-.5}function n(e,t,n,r){return(e-t)/(n-r)}function r(e){let t=e[0],n=e[1],r=e[2],i=e[3];return t*t+n*n+r*r+i*r}const i=1/Math.sqrt(2);class o{constructor(e){this.perm=[],this.permMod12=[];for(let n=0;n<256;n++){this.perm.push(n);const r=e();this.perm[n]=r}for(let e=0;e<256;e++){const n=e+128;this.perm[n]=this.perm[e]}}grad(e){const t=this.perm[e%256];return[t&1?1:-1,t&2?1:-1,t&4?1:-1]}}const s={grad3:[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]],grad4:[[0,1,1,1],[0,1,1,-1],[0,1,-1,1],[0,1,-1,-1],[0,-1,1,1],[0,-1,1,-1],[0,-1,-1,1],[0,-1,-1,-1],[1,0,1,1],[1,0,1,-1],[1,0,-1,1],[1,0,-1,-1],[-1,0,1,1],[-1,0,1,-1],[-1,0,-1,1],[-1,0,-1,-1],[1,1,0,1],[1,1,0,-1],[1,-1,0,1],[1,-1,0,-1],[-1,1,0,1],[-1,1,0,-1],[-1,-1,0,1],[-1,-1,0,-1],[1,1,1,0],[1,1,-1,0],[1,-1,1,0],[1,-1,-1,0],[-1,1,1,0],[-1,1,-1,0],[-1,-1,1,0],[-1,-1,-1,0]],p:[151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180],perm:[],permMod12:[]};function a(e){let t,n,r,i;void 0===e?e=Math.random:("function"==typeof e&&(i=e),e={}),this.p=s.p,t=void 0!==e.perm?e.perm:this.p,n=void 0!==e.permMod12?e.permMod12:this.p.map((function(e){return e%12})),r=void 0!==e.grad3?e.grad3:s.grad3,this.perm=t,this.permMod12=n,this.grad3=r,this.grad4=void 0!==e.grad4?e.grad4:s.grad4,this.F2=.5*(Math.sqrt(3)-1),this.G2=(3-Math.sqrt(3))/6,this.F3=1/3,this.G3=1/6,this.F4=(Math.sqrt(5)-1)/4,this.G4=(5-Math.sqrt(5))/20,this.random=i||t}a.prototype.noise2D=function(e,t){const n=this.perm,r=this.permMod12,i=this.grad3;let o,s,a=.5,c=.5;o=this.F2*(e+t)+(e=Math.floor(e)),s=this.F2*(o+t)+(t=Math.floor(t));let l=e+this.G2*(o+s),f=t+this.G2*(o+s),d=e-l,u=t-f;const h=d>u?1:0,p=d>u?0:1;let m=d-h+this.G2,v=u-p+this.G2,g=d-1+2*this.G2,y=u-1+2*this.G2,M=o&255,x=s&255;let b=r[M+n[x]]%12,w=r[M+h+n[x+p]]%12,j=r[M+1+n[x+1]]%12;let S=0;const P=i[b],z=P[0]*d+P[1]*u;S+=70*(z<0?0:z*z*z*z);const D=i[w],F=D[0]*m+D[1]*v;S+=70*(F<0?0:F*F*F*F);const G=i[j],E=G[0]*g+G[1]*y;return S+70*(E<0?0:E*E*E*E)};a.prototype.noise3D=function(e,t,n){const r=this.perm,i=this.permMod12,o=this.grad3;let s,a,c,l,f,d=.6;s=this.F3*(e+t+n)+(e=Math.floor(e)),a=this.F3*(s+t+n)+(t=Math.floor(t)),c=this.F3*(s+a+n)+(n=Math.floor(n));let u=e+this.G3*(s+a+c),h=t+this.G3*(s+a+c),p=n+this.G3*(s+a+c),m=e-u,v=t-h,g=n-p;const y=m>=v?v>=g?0:m>=g?1:2:m<g?2:v<g?1:0,M=0===y?m>=v?1:2:1===y?v>=g?0:2:2===y?m<g?0:1:0,x=1===y?m>=v?1:2:2===y?v>=g?0:2:0===y?m<g?0:1:0,b=2===y?m>=v?1:2:0===y?v>=g?0:2:1===y?m<g?0:1:0;let w=m-M+this.G3,j=v-y+this.G3,S=g-x+this.G3,P=m-b+2*this.G3,z=v-M+2*this.G3,D=g-y+2*this.G3,F=m-1+3*this.G3,G=v-1+3*this.G3,E=n-1+3*this.G3,T=s&255,A=a&255,C=n&255;let R=i[T+r[A+r[C]]]%12,N=i[T+M+r[A+y+r[C+x]]]%12,O=i[T+b+r[A+M+r[C+y]]]%12,L=i[T+1+r[A+1+r[C+1]]]%12;let _=0;const q=o[R],I=q[0]*m+q[1]*v+q[2]*g;_+=32*(I<0?0:I*I*I*I);const k=o[N],B=k[0]*w+k[1]*j+k[2]*S;_+=32*(B<0?0:B*B*B*B);const V=o[O],H=V[0]*P+V[1]*z+V[2]*D;_+=32*(H<0?0:H*H*H*H);const X=o[L],J=X[0]*F+X[1]*G+X[2]*E;return _+32*(J<0?0:J*J*J*J)};a.prototype.noise4D=function(e,t,n,r){const i=this.perm,o=this.grad4;let s,a,c,l,f;s=this.F4*(e+t+n+r)+(e=Math.floor(e)),a=this.F4*(s+t+n+r)+(t=Math.floor(t)),c=this.F4*(s+a+n+r)+(n=Math.floor(n)),l=this.F4*(s+a+c+r)+(r=Math.floor(r));let d=e+this.G4*(s+a+c+l),u=t+this.G4*(s+a+c+l),h=n+this.G4*(s+a+c+l),p=r+this.G4*(s+a+c+l),m=e-d,v=t-u,g=n-h,y=r-p;let M,x,b,w,j,S,P,z,D,F,G,E,T,A,C,R;M=m>v?1:0,x=m>g?1:0,b=m>y?1:0,w=v>g?1:0,j=v>y?1:0,S=g>y?1:0;const N=x>=S?x>=w?M>=x?M>=j?0:1:j>=x?3:1:M>=j?0:1:w>=x?M>=j?0:2:j>=x?3:2:M>=j?0:2,O=b>=j?b>=S?M>=b?0:1:S>=b?4:1:M>=b?0:1:j>=b?M>=S?0:3:S>=b?4:3,L=x<=S?x<=w?M>=x?0:4:j>=x?2:4:M>=x?0:4:w>=x?M>=j?0:3:j>=x?2:3,I=b<=j?b<=S?M>=b?0:4:S>=b?3:4:M>=b?0:4:j>=b?M>=S?0:2:S>=b?3:2,k=1-M-N-L,B=1-x-y-b,V=1-w-O-I,H=1-j-x-b,X=1-S-w-j;let J=m-M+this.G4,q=v-x+this.G4,U=g-y+this.G4,Z=y-b+this.G4,K=m-N+2*this.G4,Q=v-O+2*this.G4,W=g-L+2*this.G4,Y=y-I+2*this.G4,ee=m-k+3*this.G4,te=v-B+3*this.G4,ne=g-V+3*this.G4,re=y-H+3*this.G4,ie=m-1+4*this.G4,oe=v-1+4*this.G4,se=g-1+4*this.G4,ae=y-1+4*this.G4,ce=s&255,le=a&255,fe=c&255,de=l&255;let ue=i[ce+i[le+i[fe+i[de]]]]%32,he=i[ce+M+i[le+x+i[fe+y+i[de+b]]]]%32,pe=i[ce+N+i[le+O+i[fe+L+i[de+I]]]]%32,me=i[ce+k+i[le+B+i[fe+V+i[de+H]]]]%32,ve=i[ce+1+i[le+1+i[fe+1+i[de+1]]]]%32;let ge=0;const ye=o[ue],Me=ye[0]*m+ye[1]*v+ye[2]*g+ye[3]*y;ge+=27*(Me<0?0:Me*Me*Me*Me);const xe=o[he],be=xe[0]*J+xe[1]*q+xe[2]*U+xe[3]*Z;ge+=27*(be<0?0:be*be*be*be);const we=o[pe],je=we[0]*K+we[1]*Q+we[2]*W+we[3]*Y;ge+=27*(je<0?0:je*je*je*je);const Se=o[me],Pe=Se[0]*ee+Se[1]*te+Se[2]*ne+Se[3]*re;ge+=27*(Pe<0?0:Pe*Pe*Pe*Pe);const ze=o[ve],De=ze[0]*ie+ze[1]*oe+ze[2]*se+ze[3]*ae;return ge+27*(De<0?0:De*De*De*De)},e.SimplexNoise=a,e.createNoise2D=function(e){const t=new a(e);return(e,n)=>t.noise2D(e,n)},e.createNoise3D=function(e){const t=new a(e);return(e,n,r)=>t.noise3D(e,n,r)},e.createNoise4D=function(e){const t=new a(e);return(e,n,r,i)=>t.noise4D(e,n,r,i)},Object.defineProperty(e,"__esModule",{value:!0})}));
-
         const SPAWN_POSITION = new THREE.Vector3(0, 1.7, 30);
         const CAVE_ENTRANCE = new THREE.Vector3(0, 1.7, -15);
         const CHUNK_SIZE = 50;
@@ -122,7 +119,7 @@
         let flashlight;
         let isFlashlightOn = false;
         let loadedChunks = {};
-        let simplex = new SimplexNoise();  // SimplexNoise 인스턴스 생성
+        let simplex; // SimplexNoise 인스턴스는 여기서 선언
         let objectPools = {
             trees: [],
             vegetation: []
@@ -177,6 +174,9 @@
 
             document.getElementById('loading-indicator').style.display = 'block'; // Show on start
 
+            // Simplex Noise 초기화 (이제 defer 때문에 여기서 가능)
+            simplex = new SimplexNoise();
+
             generateCaveSystem();
             updateChunks(); // Initial chunk loading (now after cave generation)
 
@@ -303,417 +303,417 @@
         }
 
         function createVegetation(x, z, parent) {
-    const flower = getObjectFromPool('vegetation');
-    if (flower) {
-        flower.position.set(x, 0.2, z);
-        parent.add(flower);
-    }
-}
-
-function generateCaveSystem() {
-    let startPoint = CAVE_ENTRANCE.clone();
-    caveSystem.push(startPoint);
-
-    for (let i = 0; i < 20; i++) {
-        const lastPoint = caveSystem[caveSystem.length - 1];
-        const newPoint = lastPoint.clone();
-
-        newPoint.x += (Math.random() - 0.5) * 5;
-        newPoint.y += (Math.random() - 0.5) * 2;
-        newPoint.z -= 5 + Math.random() * 5;
-
-        caveSystem.push(newPoint);
-    }
-
-    const caveCurve = new THREE.CatmullRomCurve3(caveSystem);
-    const tunnelGeometry = new THREE.TubeGeometry(caveCurve, 128, 3, 8, false);
-    const caveMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 1, side: THREE.BackSide });
-    const tunnel = new THREE.Mesh(tunnelGeometry, caveMaterial);
-    scene.add(tunnel);
-
-    const markingGeometry = new THREE.CircleGeometry(0.3, 16);
-    const markingMaterial = new THREE.MeshStandardMaterial({
-        color: 0xff0000,
-        emissive: 0xff0000,
-        emissiveIntensity: 0.5
-    });
-
-    for (let i = 0; i < 30; i++) {
-        const point = caveCurve.getPointAt(i / 29);
-        const marking = new THREE.Mesh(markingGeometry, markingMaterial);
-
-        const normal = caveCurve.getTangentAt(i / 29); // Get the tangent (direction) at this point
-        const offset = new THREE.Vector3().randomDirection().multiplyScalar(2.5); // Random offset
-        marking.position.copy(point).add(offset);
-
-
-        marking.rotation.y = Math.random() * Math.PI;
-        scene.add(marking);
-    }
-    console.log("Cave system generated:", caveSystem); // Debug
-}
-
-function generateChunk(chunkX, chunkZ) {
-    const chunk = new THREE.Group();
-    chunk.chunkPosition = { x: chunkX, z: chunkZ };
-
-    const startX = chunkX * CHUNK_SIZE;
-    const startZ = chunkZ * CHUNK_SIZE;
-
-    // Ground
-    const ground = new THREE.Mesh(
-        new THREE.PlaneGeometry(CHUNK_SIZE, CHUNK_SIZE),
-        new THREE.MeshStandardMaterial({ color: 0x33aa33, roughness: 0.8 })
-    );
-    ground.rotation.x = -Math.PI / 2;
-    ground.position.set(startX + CHUNK_SIZE / 2, 0, startZ + CHUNK_SIZE / 2);
-    ground.receiveShadow = true;
-    chunk.add(ground);
-
-    // Trees and vegetation
-    for (let x = startX; x < startX + CHUNK_SIZE; x++) {
-        for (let z = startZ; z < startZ + CHUNK_SIZE; z++) {
-            const treeDensity = simplex.noise2D(x * 0.02, z * 0.02);
-            const vegetationDensity = simplex.noise2D(x * 0.1, z * 0.1);
-
-            if (treeDensity > TREE_DENSITY) {
-                createTree(x, z, chunk);
+            const flower = getObjectFromPool('vegetation');
+            if (flower) {
+                flower.position.set(x, 0.2, z);
+                parent.add(flower);
             }
-            if (vegetationDensity > VEGETATION_DENSITY) {
-                createVegetation(x, z, chunk);
+        }
+
+        function generateCaveSystem() {
+            let startPoint = CAVE_ENTRANCE.clone();
+            caveSystem.push(startPoint);
+
+            for (let i = 0; i < 20; i++) {
+                const lastPoint = caveSystem[caveSystem.length - 1];
+                const newPoint = lastPoint.clone();
+
+                newPoint.x += (Math.random() - 0.5) * 5;
+                newPoint.y += (Math.random() - 0.5) * 2;
+                newPoint.z -= 5 + Math.random() * 5;
+
+                caveSystem.push(newPoint);
+            }
+
+            const caveCurve = new THREE.CatmullRomCurve3(caveSystem);
+            const tunnelGeometry = new THREE.TubeGeometry(caveCurve, 128, 3, 8, false);
+            const caveMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 1, side: THREE.BackSide });
+            const tunnel = new THREE.Mesh(tunnelGeometry, caveMaterial);
+            scene.add(tunnel);
+
+            const markingGeometry = new THREE.CircleGeometry(0.3, 16);
+            const markingMaterial = new THREE.MeshStandardMaterial({
+                color: 0xff0000,
+                emissive: 0xff0000,
+                emissiveIntensity: 0.5
+            });
+
+            for (let i = 0; i < 30; i++) {
+                const point = caveCurve.getPointAt(i / 29);
+                const marking = new THREE.Mesh(markingGeometry, markingMaterial);
+
+                const normal = caveCurve.getTangentAt(i / 29); // Get the tangent (direction) at this point
+                const offset = new THREE.Vector3().randomDirection().multiplyScalar(2.5); // Random offset
+                marking.position.copy(point).add(offset);
+
+
+                marking.rotation.y = Math.random() * Math.PI;
+                scene.add(marking);
             }
+            console.log("Cave system generated:", caveSystem); // Debug
         }
-    }
-
-    scene.add(chunk);
-     console.log("Chunk generated:", chunk); // Debugging: Check if the chunk is created
-    return chunk;
-}
-
-function updateChunks() {
-    const playerChunkX = Math.floor(camera.position.x / CHUNK_SIZE);
-    const playerChunkZ = Math.floor(camera.position.z / CHUNK_SIZE);
-
-    if (playerChunkX === player.currentChunk.x && playerChunkZ === player.currentChunk.z && !isTransitioning) {
-        return;
-    }
-
-    isTransitioning = true;
-
-    player.currentChunk.x = playerChunkX;
-    player.currentChunk.z = playerChunkZ;
-
-    const chunksToLoad = {};
-    for (let x = playerChunkX - VIEW_DISTANCE; x <= playerChunkX + VIEW_DISTANCE; x++) {
-        for (let z = playerChunkZ - VIEW_DISTANCE; z <= playerChunkZ + VIEW_DISTANCE; z++) {
-            chunksToLoad[`${x},${z}`] = true; // Mark for loading
-        }
-    }
-
-    // Unload chunks *before* loading new ones
-    for (const chunkId in loadedChunks) {
-        if (!chunksToLoad[chunkId]) {
-            const chunk = loadedChunks[chunkId];
-            // Return objects to pools
-            chunk.children.forEach(child => {
-                if (child instanceof THREE.Mesh) {
-                    if (child.geometry instanceof THREE.CylinderGeometry) { // It's likely a tree trunk
-                        let tree = objectPools.trees.find(t => t.trunk === child);
-                        if (tree) returnObjectToPool('trees', tree);
-                    } else if (child.geometry instanceof THREE.SphereGeometry) { // Could be leaves or vegetation
-                        if (child.material.color.equals(new THREE.Color(0x227722))) { // Likely leaves
-                            let tree = objectPools.trees.find(t => t.leaves === child);
-                            if (tree) returnObjectToPool('trees', tree);
-                        } else { // Likely vegetation
-                            let vegetation = objectPools.vegetation.find(v => v === child);
-                            if (vegetation) returnObjectToPool('vegetation', vegetation);
-                        }
+
+        function generateChunk(chunkX, chunkZ) {
+            const chunk = new THREE.Group();
+            chunk.chunkPosition = { x: chunkX, z: chunkZ };
+
+            const startX = chunkX * CHUNK_SIZE;
+            const startZ = chunkZ * CHUNK_SIZE;
+
+            // Ground
+            const ground = new THREE.Mesh(
+                new THREE.PlaneGeometry(CHUNK_SIZE, CHUNK_SIZE),
+                new THREE.MeshStandardMaterial({ color: 0x33aa33, roughness: 0.8 })
+            );
+            ground.rotation.x = -Math.PI / 2;
+            ground.position.set(startX + CHUNK_SIZE / 2, 0, startZ + CHUNK_SIZE / 2);
+            ground.receiveShadow = true;
+            chunk.add(ground);
+
+            // Trees and vegetation
+            for (let x = startX; x < startX + CHUNK_SIZE; x++) {
+                for (let z = startZ; z < startZ + CHUNK_SIZE; z++) {
+                    const treeDensity = simplex.noise2D(x * 0.02, z * 0.02);
+                    const vegetationDensity = simplex.noise2D(x * 0.1, z * 0.1);
+
+                    if (treeDensity > TREE_DENSITY) {
+                        createTree(x, z, chunk);
+                    }
+                    if (vegetationDensity > VEGETATION_DENSITY) {
+                        createVegetation(x, z, chunk);
                     }
                 }
-            });
-            scene.remove(chunk);
-            delete loadedChunks[chunkId];
-        }
-    }
-
-    // Asynchronously load/generate chunks
-    const chunkPromises = [];
-    for (const chunkId in chunksToLoad) {
-        if (!loadedChunks[chunkId]) {
-            const [x, z] = chunkId.split(',').map(Number);
-            chunkPromises.push(
-                new Promise(resolve => {
-                    // Simulate async loading (replace with actual loading/generation)
-                    setTimeout(() => {
-                        loadedChunks[chunkId] = generateChunk(x, z);
-                        resolve();
-                    }, 0);
+            }
+
+            scene.add(chunk);
+            // console.log("Chunk generated:", chunk); // Debugging: Check if the chunk is created
+            return chunk;
+        }
+
+        function updateChunks() {
+            const playerChunkX = Math.floor(camera.position.x / CHUNK_SIZE);
+            const playerChunkZ = Math.floor(camera.position.z / CHUNK_SIZE);
+
+            if (playerChunkX === player.currentChunk.x && playerChunkZ === player.currentChunk.z && !isTransitioning) {
+                return;
+            }
+
+            isTransitioning = true;
+
+            player.currentChunk.x = playerChunkX;
+            player.currentChunk.z = playerChunkZ;
+
+            const chunksToLoad = {};
+            for (let x = playerChunkX - VIEW_DISTANCE; x <= playerChunkX + VIEW_DISTANCE; x++) {
+                for (let z = playerChunkZ - VIEW_DISTANCE; z <= playerChunkZ + VIEW_DISTANCE; z++) {
+                    chunksToLoad[`${x},${z}`] = true; // Mark for loading
+                }
+            }
+
+            // Unload chunks *before* loading new ones
+            for (const chunkId in loadedChunks) {
+                if (!chunksToLoad[chunkId]) {
+                    const chunk = loadedChunks[chunkId];
+                    // Return objects to pools
+                    chunk.children.forEach(child => {
+                        if (child instanceof THREE.Mesh) {
+                            if (child.geometry instanceof THREE.CylinderGeometry) { // It's likely a tree trunk
+                                let tree = objectPools.trees.find(t => t.trunk === child);
+                                if (tree) returnObjectToPool('trees', tree);
+                            } else if (child.geometry instanceof THREE.SphereGeometry) { // Could be leaves or vegetation
+                                if (child.material.color.equals(new THREE.Color(0x227722))) { // Likely leaves
+                                    let tree = objectPools.trees.find(t => t.leaves === child);
+                                    if (tree) returnObjectToPool('trees', tree);
+                                } else { // Likely vegetation
+                                    let vegetation = objectPools.vegetation.find(v => v === child);
+                                    if (vegetation) returnObjectToPool('vegetation', vegetation);
+                                }
+                            }
+                        }
+                    });
+                    scene.remove(chunk);
+                    delete loadedChunks[chunkId];
+                }
+            }
+
+            // Asynchronously load/generate chunks
+            const chunkPromises = [];
+            for (const chunkId in chunksToLoad) {
+                if (!loadedChunks[chunkId]) {
+                    const [x, z] = chunkId.split(',').map(Number);
+                    chunkPromises.push(
+                        new Promise(resolve => {
+                            // Simulate async loading (replace with actual loading/generation)
+                            setTimeout(() => {
+                                loadedChunks[chunkId] = generateChunk(x, z);
+                                resolve();
+                            }, 0);
+                        })
+                    );
+                }
+            }
+
+            // Wait for ALL chunks to be loaded/generated
+            Promise.all(chunkPromises)
+                .then(() => {
+                    isTransitioning = false;
+                    document.getElementById('loading-indicator').style.display = 'none';
                 })
-            );
+                .catch(error => {
+                    console.error("Error loading chunks:", error);
+                    isTransitioning = false; // Ensure isTransitioning is reset
+                    document.getElementById('loading-indicator').style.display = 'none';
+                });
+        }
+
+        function update(delta) {
+            updatePlayer(delta);
+            updateEnvironment();
+            //  updateChunks(); // Moved to be called *after* initial setup, and only when not transitioning
+            if (!isTransitioning) {
+                updateChunks();
+            }
+        }
+
+        function updatePlayer(delta) {
+            if (!document.pointerLockElement && !joystick.isActive) return; // Don't move if no pointer lock OR touch
+
+            const direction = new THREE.Vector3();
+
+             // Keyboard controls (existing)
+            if (controls.forward) direction.z -= 1;
+            if (controls.backward) direction.z += 1;
+            if (controls.left) direction.x -= 1;
+            if (controls.right) direction.x += 1;
+
+
+            // Touch controls (joystick)
+            if (joystick.isActive) {
+                direction.x += joystick.deltaX;
+                direction.z += joystick.deltaY;
+            }
+
+
+            direction.normalize();
+
+            if ((controls.sprint && player.stamina > 0 && direction.length() > 0) || (joystick.isActive && player.stamina >0) ) {
+                player.speed.current = player.speed.sprint;
+                player.stamina = Math.max(0, player.stamina - delta * 30);
+            } else {
+                player.speed.current = player.speed.walk;
+                player.stamina = Math.min(100, player.stamina + delta * 10);
+            }
+
+            document.getElementById('stamina-bar').style.width = player.stamina + '%';
+
+            if (direction.length() > 0) {
+                const moveX = direction.x * player.speed.current * delta;
+                const moveZ = direction.z * player.speed.current * delta;
+
+                camera.position.x += moveX * Math.cos(camera.rotation.y) + moveZ * Math.sin(camera.rotation.y);
+                camera.position.z += moveZ * Math.cos(camera.rotation.y) - moveX * Math.sin(camera.rotation.y);
+
+                player.headBob.value += delta * player.headBob.speed;
+                camera.position.y = player.position.y + Math.sin(player.headBob.value) * player.headBob.intensity;
+            }
+
+            if (isFlashlightOn) {
+                flashlight.position.copy(camera.position);
+                flashlight.rotation.copy(camera.rotation);
+            }
+        }
+        function updateEnvironment() {
+            const inCaveNow = camera.position.z < CAVE_ENTRANCE.z;  // Simplified cave check
+            if (inCaveNow !== player.inCave) {
+                player.inCave = inCaveNow;
+                transitionEnvironment();
+            }
+        }
+
+        function transitionEnvironment() {
+            if (player.inCave) {
+                scene.fog = new THREE.FogExp2(0x000000, 0.15);
+                scene.background = new THREE.Color(0x000000);
+            } else {
+                scene.fog = null;
+                scene.background = new THREE.Color(0x88ccff);
+            }
+        }
+
+        function setupLighting() {
+            const ambientLight = new THREE.AmbientLight(0xffffff); // White ambient light
+            scene.add(ambientLight);
+
+            const sunLight = new THREE.DirectionalLight(0xffffbb, 2); // Stronger sunlight
+            sunLight.position.set(50, 100, 50);
+            sunLight.castShadow = true;
+
+            // Increase shadow map size
+            sunLight.shadow.mapSize.width = 1024;
+            sunLight.shadow.mapSize.height = 1024;
+            scene.add(sunLight);
+
+
+            flashlight = new THREE.SpotLight(0xffffff, 1);
+            flashlight.angle = Math.PI / 6;
+            flashlight.penumbra = 0.1;
+            flashlight.decay = 2;
+            flashlight.distance = 30;
+            flashlight.visible = false;
+            camera.add(flashlight);
+            scene.add(camera); // Important: Add the camera to the scene!
+        }
+
+        function setupParticles() {
+            const particleCount = 1000;
+            const positions = new Float32Array(particleCount * 3);
+            const colors = new Float32Array(particleCount * 3);
+
+            for (let i = 0; i < particleCount * 3; i += 3) {
+                positions[i] = Math.random() * 200 - 100;
+                positions[i + 1] = Math.random() * 20;
+                positions[i + 2] = Math.random() * 200 - 100;
+
+                colors[i] = 1;
+                colors[i + 1] = 1;
+                colors[i + 2] = 0.8;
+            }
+
+            const geometry = new THREE.BufferGeometry();
+            geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+            const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, transparent: true, opacity: 0.6 });
+            const particles = new THREE.Points(geometry, material);
+            scene.add(particles);
+        }
+
+        function setupAudio() {
+            // TODO: Implement audio
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            update(delta);
+            renderer.render(scene, camera);
+        }
+
+        // --- Keyboard controls (existing) ---
+        function onKeyDown(event) {
+            switch (event.code) {
+                case 'KeyW': controls.forward = true; break;
+                case 'KeyS': controls.backward = true; break;
+                case 'KeyA': controls.left = true; break;
+                case 'KeyD': controls.right = true; break;
+                case 'ShiftLeft': controls.sprint = true; break;
+                case 'KeyF': toggleFlashlight(); break;
+            }
         }
-    }
-
-    // Wait for ALL chunks to be loaded/generated
-    Promise.all(chunkPromises)
-        .then(() => {
-            isTransitioning = false;
-            document.getElementById('loading-indicator').style.display = 'none';
-        })
-        .catch(error => {
-            console.error("Error loading chunks:", error);
-            isTransitioning = false; // Ensure isTransitioning is reset
-            document.getElementById('loading-indicator').style.display = 'none';
-        });
-}
-
-function update(delta) {
-    updatePlayer(delta);
-    updateEnvironment();
-    //  updateChunks(); // Moved to be called *after* initial setup, and only when not transitioning
-    if (!isTransitioning) {
-        updateChunks();
-    }
-}
-
-function updatePlayer(delta) {
-    if (!document.pointerLockElement && !joystick.isActive) return; // Don't move if no pointer lock OR touch
-
-    const direction = new THREE.Vector3();
-
-     // Keyboard controls (existing)
-    if (controls.forward) direction.z -= 1;
-    if (controls.backward) direction.z += 1;
-    if (controls.left) direction.x -= 1;
-    if (controls.right) direction.x += 1;
-
-
-    // Touch controls (joystick)
-    if (joystick.isActive) {
-        direction.x += joystick.deltaX;
-        direction.z += joystick.deltaY;
-    }
-
-
-    direction.normalize();
-
-    if ((controls.sprint && player.stamina > 0 && direction.length() > 0) || (joystick.isActive && player.stamina >0) ) {
-        player.speed.current = player.speed.sprint;
-        player.stamina = Math.max(0, player.stamina - delta * 30);
-    } else {
-        player.speed.current = player.speed.walk;
-        player.stamina = Math.min(100, player.stamina + delta * 10);
-    }
-
-    document.getElementById('stamina-bar').style.width = player.stamina + '%';
-
-    if (direction.length() > 0) {
-        const moveX = direction.x * player.speed.current * delta;
-        const moveZ = direction.z * player.speed.current * delta;
-
-        camera.position.x += moveX * Math.cos(camera.rotation.y) + moveZ * Math.sin(camera.rotation.y);
-        camera.position.z += moveZ * Math.cos(camera.rotation.y) - moveX * Math.sin(camera.rotation.y);
-
-        player.headBob.value += delta * player.headBob.speed;
-        camera.position.y = player.position.y + Math.sin(player.headBob.value) * player.headBob.intensity;
-    }
-
-    if (isFlashlightOn) {
-        flashlight.position.copy(camera.position);
-        flashlight.rotation.copy(camera.rotation);
-    }
-}
-function updateEnvironment() {
-    const inCaveNow = camera.position.z < CAVE_ENTRANCE.z;  // Simplified cave check
-    if (inCaveNow !== player.inCave) {
-        player.inCave = inCaveNow;
-        transitionEnvironment();
-    }
-}
-
-function transitionEnvironment() {
-    if (player.inCave) {
-        scene.fog = new THREE.FogExp2(0x000000, 0.15);
-        scene.background = new THREE.Color(0x000000);
-    } else {
-        scene.fog = null;
-        scene.background = new THREE.Color(0x88ccff);
-    }
-}
-
-function setupLighting() {
-    const ambientLight = new THREE.AmbientLight(0xffffff); // White ambient light
-    scene.add(ambientLight);
-
-    const sunLight = new THREE.DirectionalLight(0xffffbb, 2); // Stronger sunlight
-    sunLight.position.set(50, 100, 50);
-    sunLight.castShadow = true;
-
-    // Increase shadow map size
-    sunLight.shadow.mapSize.width = 1024;
-    sunLight.shadow.mapSize.height = 1024;
-    scene.add(sunLight);
-
-
-    flashlight = new THREE.SpotLight(0xffffff, 1);
-    flashlight.angle = Math.PI / 6;
-    flashlight.penumbra = 0.1;
-    flashlight.decay = 2;
-    flashlight.distance = 30;
-    flashlight.visible = false;
-    camera.add(flashlight);
-    scene.add(camera); // Important: Add the camera to the scene!
-}
-
-function setupParticles() {
-    const particleCount = 1000;
-    const positions = new Float32Array(particleCount * 3);
-    const colors = new Float32Array(particleCount * 3);
-
-    for (let i = 0; i < particleCount * 3; i += 3) {
-        positions[i] = Math.random() * 200 - 100;
-        positions[i + 1] = Math.random() * 20;
-        positions[i + 2] = Math.random() * 200 - 100;
-
-        colors[i] = 1;
-        colors[i + 1] = 1;
-        colors[i + 2] = 0.8;
-    }
-
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-    const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true, transparent: true, opacity: 0.6 });
-    const particles = new THREE.Points(geometry, material);
-    scene.add(particles);
-}
-
-function setupAudio() {
-    // TODO: Implement audio
-}
-
-function animate() {
-    requestAnimationFrame(animate);
-    const delta = clock.getDelta();
-    update(delta);
-    renderer.render(scene, camera);
-}
-
-// --- Keyboard controls (existing) ---
-function onKeyDown(event) {
-    switch (event.code) {
-        case 'KeyW': controls.forward = true; break;
-        case 'KeyS': controls.backward = true; break;
-        case 'KeyA': controls.left = true; break;
-        case 'KeyD': controls.right = true; break;
-        case 'ShiftLeft': controls.sprint = true; break;
-        case 'KeyF': toggleFlashlight(); break;
-    }
-}
-
-function onKeyUp(event) {
-    switch (event.code) {
-        case 'KeyW': controls.forward = false; break;
-        case 'KeyS': controls.backward = false; break;
-        case 'KeyA': controls.left = false; break;
-        case 'KeyD': controls.right = false; break;
-        case 'ShiftLeft': controls.sprint = false; break;
-    }
-}
-
-function onMouseMove(event) {
-    if (document.pointerLockElement) {
-        camera.rotation.y -= event.movementX * 0.002;
-        camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x - event.movementY * 0.002));
-    }
-}
-
-function toggleFlashlight() {
-    isFlashlightOn = !isFlashlightOn;
-    flashlight.visible = isFlashlightOn;
-    document.getElementById('flashlight-status').textContent = `Flashlight [F] ${isFlashlightOn ? 'ON' : 'OFF'}`;
-}
-
-// --- Touch controls ---
-function onTouchStart(event) {
-    event.preventDefault(); // Prevent other behaviors (like scrolling)
-
-     // For simplicity, we'll only handle the first touch point
-    const touch = event.touches[0];
-
-    if (touch.target.closest("#joystick-zone")) {
-        joystick.isActive = true;
-        touchStartX = touch.clientX;
-        touchStartY = touch.clientY;
-
-        //Put knob at center
-        joystickKnob.style.left = `0px`;
-        joystickKnob.style.top = `0px`;
-
-    }  else { // General screen touch (for rotation, like mouse look)
-         touchStartX = touch.clientX;
-         touchStartY = touch.clientY;
-    }
-}
-
-let joystickKnob = document.getElementById("joystick-knob");
-let joystickZone = document.getElementById("joystick-zone");
-
-function onTouchMove(event) {
-   event.preventDefault();
-    const touch = event.touches[0];
-
-     if (joystick.isActive) {
-        // Calculate the distance the touch has moved from the starting point
-        const deltaX = touch.clientX - touchStartX;
-        const deltaY = touch.clientY - touchStartY;
-
-         // Limit delta, so it is circular
-        let length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-        const maxLength = 75 - 30; // radius of outer - radius of inner
-        if(length > maxLength) {
-            const angle = Math.atan2(deltaY, deltaX);
-            joystick.deltaX = Math.cos(angle) * maxLength / (maxLength*2);
-            joystick.deltaY = Math.sin(angle) * maxLength/ (maxLength*2);
-             // Move the joystick knob visually
-            joystickKnob.style.left = `${Math.cos(angle) * maxLength}px`;
-            joystickKnob.style.top = `${Math.sin(angle) * maxLength}px`;
-
-        } else {
-            joystick.deltaX = deltaX / (maxLength*2) ; // Normalize  for movement
-            joystick.deltaY = deltaY / (maxLength*2);
-            joystickKnob.style.left = `${deltaX}px`;
-            joystickKnob.style.top = `${deltaY}px`;
-        }
-
-
-
-    } else { // Rotation (like mouse look)
-        const movementX = touch.clientX - touchStartX;
-        const movementY = touch.clientY - touchStartY;
-        camera.rotation.y -= movementX * 0.005; // Adjust sensitivity as needed
-        camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x - movementY * 0.005));
-
-        // Reset for next movement calculation.  Keep camera rotation smooth.
-        touchStartX = touch.clientX;
-        touchStartY = touch.clientY;
-    }
-}
-
-function onTouchEnd(event) {
-    if(joystick.isActive){
-        joystick.isActive = false;
-        joystick.deltaX = 0;
-        joystick.deltaY = 0;
-
-        // Reset joystick visuals
-        joystickKnob.style.left = `0px`;
-        joystickKnob.style.top = `0px`;
-    }
-
-}
-
-init();
-animate();
+
+        function onKeyUp(event) {
+            switch (event.code) {
+                case 'KeyW': controls.forward = false; break;
+                case 'KeyS': controls.backward = false; break;
+                case 'KeyA': controls.left = false; break;
+                case 'KeyD': controls.right = false; break;
+                case 'ShiftLeft': controls.sprint = false; break;
+            }
+        }
+
+        function onMouseMove(event) {
+            if (document.pointerLockElement) {
+                camera.rotation.y -= event.movementX * 0.002;
+                camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x - event.movementY * 0.002));
+            }
+        }
+
+        function toggleFlashlight() {
+            isFlashlightOn = !isFlashlightOn;
+            flashlight.visible = isFlashlightOn;
+            document.getElementById('flashlight-status').textContent = `Flashlight [F] ${isFlashlightOn ? 'ON' : 'OFF'}`;
+        }
+
+        // --- Touch controls ---
+        function onTouchStart(event) {
+            event.preventDefault(); // Prevent other behaviors (like scrolling)
+
+             // For simplicity, we'll only handle the first touch point
+            const touch = event.touches[0];
+
+            if (touch.target.closest("#joystick-zone")) {
+                joystick.isActive = true;
+                touchStartX = touch.clientX;
+                touchStartY = touch.clientY;
+
+                //Put knob at center
+                joystickKnob.style.left = `0px`;
+                joystickKnob.style.top = `0px`;
+
+            }  else { // General screen touch (for rotation, like mouse look)
+                 touchStartX = touch.clientX;
+                 touchStartY = touch.clientY;
+            }
+        }
+
+        let joystickKnob = document.getElementById("joystick-knob");
+        let joystickZone = document.getElementById("joystick-zone");
+
+        function onTouchMove(event) {
+           event.preventDefault();
+            const touch = event.touches[0];
+
+             if (joystick.isActive) {
+                // Calculate the distance the touch has moved from the starting point
+                const deltaX = touch.clientX - touchStartX;
+                const deltaY = touch.clientY - touchStartY;
+
+                 // Limit delta, so it is circular
+                let length = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+                const maxLength = 75 - 30; // radius of outer - radius of inner
+                if(length > maxLength) {
+                    const angle = Math.atan2(deltaY, deltaX);
+                    joystick.deltaX = Math.cos(angle) * maxLength / (maxLength*2);
+                    joystick.deltaY = Math.sin(angle) * maxLength/ (maxLength*2);
+                     // Move the joystick knob visually
+                    joystickKnob.style.left = `${Math.cos(angle) * maxLength}px`;
+                    joystickKnob.style.top = `${Math.sin(angle) * maxLength}px`;
+
+                } else {
+                    joystick.deltaX = deltaX / (maxLength*2) ; // Normalize  for movement
+                    joystick.deltaY = deltaY / (maxLength*2);
+                    joystickKnob.style.left = `${deltaX}px`;
+                    joystickKnob.style.top = `${deltaY}px`;
+                }
+
+
+
+            } else { // Rotation (like mouse look)
+                const movementX = touch.clientX - touchStartX;
+                const movementY = touch.clientY - touchStartY;
+                camera.rotation.y -= movementX * 0.005; // Adjust sensitivity as needed
+                camera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.rotation.x - movementY * 0.005));
+
+                // Reset for next movement calculation.  Keep camera rotation smooth.
+                touchStartX = touch.clientX;
+                touchStartY = touch.clientY;
+            }
+        }
+
+        function onTouchEnd(event) {
+            if(joystick.isActive){
+                joystick.isActive = false;
+                joystick.deltaX = 0;
+                joystick.deltaY = 0;
+
+                // Reset joystick visuals
+                joystickKnob.style.left = `0px`;
+                joystickKnob.style.top = `0px`;
+            }
+
+        }
+
+        init();
+        animate();
     </script>
 </body>
 </html>