Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on 5 days ago

Commit

6ff4d9b

•

1 Parent(s): 726fff4

Update index.html

Browse files

Files changed (1) hide show

index.html +22 -135

index.html CHANGED Viewed

@@ -1,162 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Survival Game</title>
     <style>
         body { margin: 0; }
-        canvas { display: block; }
-        #gameInfo {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0,0,0,0.7);
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            z-index: 100;
-        }
     </style>
 </head>
 <body>
-    <div id="gameInfo">
-        Click to start<br>
-        WASD - Move<br>
-        Mouse - Look Around
-    </div>
     <script type="module">
-        import * as THREE from 'https://unpkg.com/three@0.149.0/build/three.module.js';
-        import { PointerLockControls } from 'https://unpkg.com/three@0.149.0/examples/jsm/controls/PointerLockControls.js';
-        // 메인 변수
-        let scene, camera, renderer, controls;
-        // 초기화 함수
-        function init() {
-            // Scene 생성
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x87ceeb);  // 하늘색 배경
-            // Camera 설정
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 5, 10);
-            // Renderer 설정
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            document.body.appendChild(renderer.domElement);
-            // Controls 설정
-            controls = new PointerLockControls(camera, document.body);
-            // 클릭 이벤트
-            document.addEventListener('click', function() {
-                controls.lock();
-            });
-            // 기본 지형 생성
-            createGround();
-            // 기본 조명 추가
-            addLights();
-            // 테스트용 박스 추가
-            addTestBox();
-        }
-        // 지형 생성 함수
-        function createGround() {
-            const groundGeometry = new THREE.PlaneGeometry(100, 100);
-            const groundMaterial = new THREE.MeshStandardMaterial({
-                color: 0x3a8c3a,
-                roughness: 0.8,
-                metalness: 0.2
-            });
-            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            scene.add(ground);
-        }
-        // 조명 추가 함수
-        function addLights() {
-            // 주변광
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-            scene.add(ambientLight);
-            // 직사광
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(20, 30, 20);
-            directionalLight.castShadow = true;
-            scene.add(directionalLight);
-        }
-        // 테스트용 박스 추가
-        function addTestBox() {
-            const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
-            const boxMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
-            const box = new THREE.Mesh(boxGeometry, boxMaterial);
-            box.position.set(0, 1, -5);
-            box.castShadow = true;
-            box.receiveShadow = true;
-            scene.add(box);
-        }
-        // 움직임 관련 변수들
-        const moveState = {
-            forward: false,
-            backward: false,
-            left: false,
-            right: false
-        };
-        // 키보드 이벤트 처리
-        document.addEventListener('keydown', (event) => {
-            switch (event.code) {
-                case 'KeyW': moveState.forward = true; break;
-                case 'KeyS': moveState.backward = true; break;
-                case 'KeyA': moveState.left = true; break;
-                case 'KeyD': moveState.right = true; break;
-            }
-        });
-        document.addEventListener('keyup', (event) => {
-            switch (event.code) {
-                case 'KeyW': moveState.forward = false; break;
-                case 'KeyS': moveState.backward = false; break;
-                case 'KeyA': moveState.left = false; break;
-                case 'KeyD': moveState.right = false; break;
-            }
-        });
-        // 애니메이션 함수
         function animate() {
             requestAnimationFrame(animate);
-            if (controls.isLocked) {
-                const speed = 0.2;
-                if (moveState.forward) controls.moveForward(speed);
-                if (moveState.backward) controls.moveForward(-speed);
-                if (moveState.left) controls.moveRight(-speed);
-                if (moveState.right) controls.moveRight(speed);
-            }
             renderer.render(scene, camera);
         }
         // 화면 크기 조정 처리
-        window.addEventListener('resize', onWindowResize, false);
-        function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        // 초기화 및 애니메이션 시작
-        init();
         animate();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Basic Three.js Test</title>
     <style>
         body { margin: 0; }
     </style>
 </head>
 <body>
     <script type="module">
+        import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js';
+        // 기본 설정
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // 테스트용 큐브 생성
+        const geometry = new THREE.BoxGeometry();
+        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+        camera.position.z = 5;
+        // 애니메이션
         function animate() {
             requestAnimationFrame(animate);
+            cube.rotation.x += 0.01;
+            cube.rotation.y += 0.01;
             renderer.render(scene, camera);
         }
         // 화면 크기 조정 처리
+        window.addEventListener('resize', () => {
+            renderer.setSize(window.innerWidth, window.innerHeight);
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
+        });
         animate();
     </script>
 </body>
+</html>