Update game.js

game.js

@@ -42,6 +42,35 @@ class TankPlayer {
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        // 조준선 관련 속성 추가
+        this.aimLine = null;
+        this.aimLineLength = 100; // 조준선 길이
+        this.createAimLine();
+    }
+     // 조준선 생성 메서드
+    createAimLine() {
+        const geometry = new THREE.BufferGeometry();
+        const material = new THREE.LineBasicMaterial({
+            color: 0xff0000,
+            linewidth: 1,
+            transparent: true,
+            opacity: 0.5
+        });
+
+        // 시작점과 끝점으로 선 생성
+        const points = [
+            new THREE.Vector3(0, 0, 0),
+            new THREE.Vector3(0, 0, this.aimLineLength)
+        ];
+        geometry.setFromPoints(points);
+
+        this.aimLine = new THREE.Line(geometry, material);
+        this.aimLine.position.y = 0.5; // 포탑 높이에 맞춤
+        
+        // 포탑 그룹에 조준선 추가
+        if (this.turretGroup) {
+            this.turretGroup.add(this.aimLine);
+        }
     }
      // 별도의 메서드로 분리
     createExplosionEffect(scene, position) {
@@ -254,6 +283,12 @@ class TankPlayer {
         scene.add(this.body);
         this.isLoaded = true;
         this.updateAmmoDisplay();
+        // 조준선 추가
+            this.createAimLine();
+
+            scene.add(this.body);
+            this.isLoaded = true;
+            this.updateAmmoDisplay();
         
     } catch (error) {
         console.error('Error loading tank models:', error);
@@ -421,6 +456,17 @@ startReload() {
     const absoluteTurretRotation = mouseX;
     this.turretGroup.rotation.y = absoluteTurretRotation - this.body.rotation.y;
     this.turretRotation = absoluteTurretRotation;
+      // 조준선 업데이트
+        if (this.aimLine) {
+            // 조준선의 투명도를 거리에 따라 조절
+            const points = this.aimLine.geometry.attributes.position.array;
+            for (let i = 0; i < points.length; i += 3) {
+                const distance = Math.sqrt(points[i] * points[i] + points[i + 2] * points[i + 2]);
+                const opacity = 1 - (distance / this.aimLineLength);
+                this.aimLine.material.opacity = Math.max(0.2, opacity);
+            }
+        }
+
 
     // 총알 업데이트 및 충돌 체크
     for (let i = this.bullets.length - 1; i >= 0; i--) {