Update index.html

index.html

@@ -33,7 +33,7 @@
             z-index: 100;
             border-radius: 5px;
         }
-        #weaponAlert {
+        #targetAlert {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -54,11 +54,11 @@
         Click to start<br>
         WASD - Move<br>
         Mouse - Look around<br>
-        Find the weapon to win!<br>
+        Find and touch your clone to win!<br>
         Avoid the enemies!
     </div>
     <div id="timer">Safe Time: 10s</div>
-    <div id="weaponAlert">Weapon has appeared!</div>
+    <div id="targetAlert">Find and touch your clone to win!</div>
 
     <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
 
@@ -78,7 +78,7 @@
 
         // 기본 변수
         let scene, camera, renderer, controls;
-        let playerModel, enemies = [], weapon;
+        let enemies = [], target;
         let isGameOver = false;
         let isSafePeriod = true;
         let startTime = 0;
@@ -96,19 +96,24 @@
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
 
             // 조명
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
             scene.add(ambientLight);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
             dirLight.position.set(50, 50, 0);
             dirLight.castShadow = true;
             dirLight.shadow.mapSize.width = 2048;
             dirLight.shadow.mapSize.height = 2048;
             dirLight.shadow.camera.far = 300;
             scene.add(dirLight);
+
+            // 반사광 추가
+            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
+            scene.add(hemiLight);
         }
 
         // 지형 생성
@@ -116,7 +121,8 @@
             const geometry = new THREE.PlaneGeometry(300, 300, 50, 50);
             const material = new THREE.MeshStandardMaterial({
                 color: 0x3a8c3a,
-                roughness: 0.8
+                roughness: 0.6,
+                metalness: 0.1
             });
 
             const vertices = geometry.attributes.position.array;
@@ -135,7 +141,11 @@
         // 나무 생성
         function createTrees() {
             const treeGeo = new THREE.CylinderGeometry(0, 4, 15, 8);
-            const treeMat = new THREE.MeshStandardMaterial({ color: 0x0d5c0d });
+            const treeMat = new THREE.MeshStandardMaterial({ 
+                color: 0x0d5c0d,
+                roughness: 0.8,
+                metalness: 0.2
+            });
 
             for (let i = 0; i < 100; i++) {
                 const tree = new THREE.Mesh(treeGeo, treeMat);
@@ -150,23 +160,33 @@
             }
         }
 
-        // 플레이어 모델 로드
-        function loadPlayer() {
+        // 목표물(Clone) 생성
+        function spawnTarget() {
             const loader = new GLTFLoader();
             loader.load('me.glb', (gltf) => {
-                playerModel = gltf.scene;
-                playerModel.scale.set(0.5, 0.5, 0.5);
-                playerModel.traverse((node) => {
+                target = gltf.scene;
+                target.scale.set(0.5, 0.5, 0.5);
+                target.position.set(
+                    (Math.random() - 0.5) * 200,
+                    0,
+                    (Math.random() - 0.5) * 200
+                );
+                
+                target.traverse((node) => {
                     if (node.isMesh) {
+                        node.material.metalness = 0.3;
+                        node.material.roughness = 0.5;
                         node.castShadow = true;
+                        node.receiveShadow = true;
                     }
                 });
-                scene.add(playerModel);
-                console.log('Player model loaded');
-            }, 
-            undefined,
-            (error) => {
-                console.error('Error loading player model:', error);
+                
+                scene.add(target);
+                
+                document.getElementById('targetAlert').style.display = 'block';
+                setTimeout(() => {
+                    document.getElementById('targetAlert').style.display = 'none';
+                }, 3000);
             });
         }
 
@@ -184,13 +204,16 @@
                     const radius = 100;
                     enemy.position.set(
                         Math.cos(angle) * radius,
-                        5,
+                        0,
                         Math.sin(angle) * radius
                     );
                     
                     enemy.traverse((node) => {
                         if (node.isMesh) {
+                            node.material.metalness = 0.3;
+                            node.material.roughness = 0.5;
                             node.castShadow = true;
+                            node.receiveShadow = true;
                         }
                     });
                     
@@ -198,42 +221,12 @@
                     enemies.push({
                         model: enemy,
                         speed: 0.2,
-                        velocity: new THREE.Vector3()
+                        velocity: new THREE.Vector3(),
+                        rotation: new THREE.Euler()
                     });
                 }
                 console.log('Enemies loaded');
-            },
-            undefined,
-            (error) => {
-                console.error('Error loading enemy model:', error);
-            });
-        }
-
-        // 무기 생성
-        function spawnWeapon() {
-            const geometry = new THREE.BoxGeometry(1, 1, 3);
-            const material = new THREE.MeshStandardMaterial({
-                color: 0xffd700,
-                metalness: 0.7,
-                roughness: 0.3,
-                emissive: 0xffd700,
-                emissiveIntensity: 0.5
             });
-            
-            weapon = new THREE.Mesh(geometry, material);
-            weapon.position.set(
-                (Math.random() - 0.5) * 200,
-                2,
-                (Math.random() - 0.5) * 200
-            );
-            weapon.castShadow = true;
-            scene.add(weapon);
-
-            // 무기 출현 알림
-            document.getElementById('weaponAlert').style.display = 'block';
-            setTimeout(() => {
-                document.getElementById('weaponAlert').style.display = 'none';
-            }, 3000);
         }
 
         // 컨트롤 초기화
@@ -268,7 +261,7 @@
             document.addEventListener('click', () => {
                 if (!startTime) {
                     startTime = Date.now();
-                    setTimeout(spawnWeapon, Math.random() * 5000 + 5000);
+                    setTimeout(spawnTarget, Math.random() * 5000 + 5000);
                 }
                 controls.lock();
             });
@@ -284,12 +277,52 @@
             return moveState;
         }
 
+        // 적 업데이트
+        function updateEnemies() {
+            if (!isSafePeriod) {
+                enemies.forEach(enemy => {
+                    const direction = new THREE.Vector3();
+                    direction.subVectors(camera.position, enemy.model.position);
+                    direction.y = 0;
+                    direction.normalize();
+
+                    // 부드러운 속도 변화
+                    enemy.velocity.lerp(direction.multiplyScalar(enemy.speed), 0.02);
+                    enemy.model.position.add(enemy.velocity);
+
+                    // 부드러운 회전
+                    const targetRotation = Math.atan2(direction.x, direction.z);
+                    enemy.model.rotation.y = THREE.MathUtils.lerp(
+                        enemy.model.rotation.y,
+                        targetRotation,
+                        0.05
+                    );
+
+                    // 충돌 체크
+                    if (enemy.model.position.distanceTo(camera.position) < 3) {
+                        gameOver(false);
+                    }
+                });
+            }
+        }
+
+        // 게임 오버 처리
+        function gameOver(won) {
+            if (!isGameOver) {
+                isGameOver = true;
+                controls.unlock();
+                setTimeout(() => {
+                    alert(won ? 'You found your clone and won!' : 'Game Over! You were caught!');
+                    location.reload();
+                }, 100);
+            }
+        }
+
         // 게임 초기화
         function init() {
             initScene();
             createTerrain();
             createTrees();
-            loadPlayer();
             loadEnemies();
             const moveState = initControls();
 
@@ -317,41 +350,13 @@
                     if (moveState.left) controls.moveRight(-speed);
                     if (moveState.right) controls.moveRight(speed);
 
-                    // 플레이어 모델 업데이트
-                    if (playerModel) {
-                        playerModel.position.copy(camera.position);
-                        playerModel.position.y -= 2;
-                        const direction = new THREE.Vector3();
-                        camera.getWorldDirection(direction);
-                        playerModel.rotation.y = Math.atan2(direction.x, direction.z);
-                    }
-
                     // 적 업데이트
-                    if (!isSafePeriod) {
-                        enemies.forEach(enemy => {
-                            const direction = new THREE.Vector3();
-                            direction.subVectors(camera.position, enemy.model.position);
-                            direction.y = 0;
-                            direction.normalize();
-
-                            enemy.velocity.add(direction.multiplyScalar(enemy.speed));
-                            enemy.velocity.multiplyScalar(0.98);
-                            enemy.model.position.add(enemy.velocity);
-
-                            // 충돌 체크
-                            if (enemy.model.position.distanceTo(camera.position) < 3) {
-                                gameOver(false);
-                            }
-
-                            // 적 회전
-                            enemy.model.lookAt(camera.position);
-                        });
-                    }
+                    updateEnemies();
 
-                    // 무기 체크
-                    if (weapon) {
-                        weapon.rotation.y += 0.02;
-                        if (camera.position.distanceTo(weapon.position) < 3) {
+                    // 목표물 체크
+                    if (target) {
+                        target.rotation.y += 0.01;
+                        if (camera.position.distanceTo(target.position) < 3) {
                             gameOver(true);
                         }
                     }
@@ -360,27 +365,15 @@
                 renderer.render(scene, camera);
             }
 
-            // 창 크기 조절 처리
-            window.addEventListener('resize', () => {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            });
-
             animate();
         }
 
-        // 게임 오버 처리
-        function gameOver(won) {
-            if (!isGameOver) {
-                isGameOver = true;
-                controls.unlock();
-                setTimeout(() => {
-                    alert(won ? 'You found the weapon and won!' : 'Game Over! You were caught!');
-                    location.reload();
-                }, 100);
-            }
-        }
+        // 화면 크기 조절 처리
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
 
         // 게임 시작
         init();