Spaces:

awacke1
/

Happy-Valley-Game

Sleeping

App Files Files Community

awacke1 commited on Apr 18

Commit

e74a5ce

verified ·

1 Parent(s): ceeb05d

Update index.html

Browse files

Files changed (1) hide show

index.html +30 -62

index.html CHANGED Viewed

@@ -11,12 +11,10 @@
     </style>
 </head>
 <body>
-    <div id="info">Use WASD to move, mouse to look, click to place object, right-click to delete.</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/PointerLockControls.js"></script>
     <script>
-        let scene, camera, renderer, controls, websocket, selectedObjectType = 'None', worldObjects = {};
-        let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
         const username = window.USERNAME || 'Anonymous';
         const websocketUrl = window.WEBSOCKET_URL || 'ws://localhost:8765';
         const plotWidth = window.PLOT_WIDTH || 50.0;
@@ -24,15 +22,21 @@
         function init() {
             scene = new THREE.Scene();
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
             renderer = new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.body.appendChild(renderer.domElement);
-            controls = new THREE.PointerLockControls(camera, document.body);
-            scene.add(controls.getObject());
-            camera.position.y = 1.6;
             const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
             const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
             const ground = new THREE.Mesh(groundGeometry, groundMaterial);
@@ -42,12 +46,13 @@
             const gridHelper = new THREE.GridHelper(plotWidth, plotWidth / 2);
             scene.add(gridHelper);
-            document.addEventListener('click', () => controls.lock());
-            document.addEventListener('keydown', onKeyDown);
-            document.addEventListener('keyup', onKeyUp);
             document.addEventListener('mousedown', onMouseDown);
             window.addEventListener('resize', () => {
-                camera.aspect = window.innerWidth / window.innerHeight;
                 camera.updateProjectionMatrix();
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
@@ -74,8 +79,6 @@
                         removeObjectFromScene(data.payload.obj_id);
                         delete worldObjects[data.payload.obj_id];
                     }
-                } else if (data.type === 'player_moved') {
-                    // Handle player movement visualization if needed
                 } else if (data.type === 'user_join' || data.type === 'user_leave' || data.type === 'user_rename') {
                     console.log(`${data.payload.username} ${data.type === 'user_join' ? 'joined' : data.type === 'user_leave' ? 'left' : 'renamed to ' + data.payload.new_username}`);
                 }
@@ -189,46 +192,28 @@
             }
         }
-        function onKeyDown(event) {
-            switch (event.code) {
-                case 'KeyW': moveForward = true; break;
-                case 'KeyS': moveBackward = true; break;
-                case 'KeyA': moveLeft = true; break;
-                case 'KeyD': moveRight = true; break;
-            }
-        }
-        function onKeyUp(event) {
-            switch (event.code) {
-                case 'KeyW': moveForward = false; break;
-                case 'KeyS': moveBackward = false; break;
-                case 'KeyA': moveLeft = false; break;
-                case 'KeyD': moveRight = false; break;
-            }
-        }
         function onMouseDown(event) {
-            if (!controls.isLocked) return;
             if (event.button === 0 && selectedObjectType !== 'None') {
-                const raycaster = new THREE.Raycaster();
-                const mouse = new THREE.Vector2(0, 0);
-                raycaster.setFromCamera(mouse, camera);
-                const intersects = raycaster.intersectObjects(scene.children);
                 for (let intersect of intersects) {
-                    if (intersect.object !== controls.getObject()) {
                         const position = intersect.point;
-                        position.y += 0.5;
                         placeObject(position);
                         break;
                     }
                 }
             } else if (event.button === 2) {
-                const raycaster = new THREE.Raycaster();
-                const mouse = new THREE.Vector2(0, 0);
-                raycaster.setFromCamera(mouse, camera);
-                const intersects = raycaster.intersectObjects(scene.children);
                 for (let intersect of intersects) {
-                    if (intersect.object !== controls.getObject() && intersect.object.name) {
                         websocket.send(JSON.stringify({
                             type: 'delete_object',
                             payload: { obj_id: intersect.object.name, username }
@@ -256,23 +241,6 @@
         function animate() {
             requestAnimationFrame(animate);
-            const delta = 0.1;
-            const velocity = new THREE.Vector3();
-            if (moveForward) velocity.z -= 0.1;
-            if (moveBackward) velocity.z += 0.1;
-            if (moveLeft) velocity.x -= 0.1;
-            if (moveRight) velocity.x += 0.1;
-            controls.getObject().position.add(velocity);
-            const pos = controls.getObject().position;
-            const rot = controls.getObject().rotation;
-            websocket.send(JSON.stringify({
-                type: 'player_position',
-                payload: {
-                    username,
-                    position: { x: pos.x, y: pos.y, z: pos.z },
-                    rotation: { x: rot.x, y: rot.y, z: rot.z }
-                }
-            }));
             renderer.render(scene, camera);
         }

     </style>
 </head>
 <body>
+    <div id="info">Click to place selected object, right-click to delete.</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
     <script>
+        let scene, camera, renderer, websocket, selectedObjectType = 'None', worldObjects = {};
         const username = window.USERNAME || 'Anonymous';
         const websocketUrl = window.WEBSOCKET_URL || 'ws://localhost:8765';
         const plotWidth = window.PLOT_WIDTH || 50.0;
         function init() {
             scene = new THREE.Scene();
+            // Orthographic camera for top-down view
+            const aspect = window.innerWidth / window.innerHeight;
+            const viewSize = plotWidth * 0.6;
+            camera = new THREE.OrthographicCamera(
+                -viewSize * aspect, viewSize * aspect,
+                viewSize, -viewSize,
+                0.1, 1000
+            );
+            camera.position.set(0, 20, 0);
+            camera.lookAt(0, 0, 0);
             renderer = new THREE.WebGLRenderer();
             renderer.setSize(window.innerWidth, window.innerHeight);
             document.body.appendChild(renderer.domElement);
             const groundGeometry = new THREE.PlaneGeometry(plotWidth, plotDepth);
             const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
             const ground = new THREE.Mesh(groundGeometry, groundMaterial);
             const gridHelper = new THREE.GridHelper(plotWidth, plotWidth / 2);
             scene.add(gridHelper);
             document.addEventListener('mousedown', onMouseDown);
             window.addEventListener('resize', () => {
+                const aspect = window.innerWidth / window.innerHeight;
+                camera.left = -viewSize * aspect;
+                camera.right = viewSize * aspect;
+                camera.top = viewSize;
+                camera.bottom = -viewSize;
                 camera.updateProjectionMatrix();
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
                         removeObjectFromScene(data.payload.obj_id);
                         delete worldObjects[data.payload.obj_id];
                     }
                 } else if (data.type === 'user_join' || data.type === 'user_leave' || data.type === 'user_rename') {
                     console.log(`${data.payload.username} ${data.type === 'user_join' ? 'joined' : data.type === 'user_leave' ? 'left' : 'renamed to ' + data.payload.new_username}`);
                 }
             }
         }
         function onMouseDown(event) {
+            event.preventDefault();
+            const mouse = new THREE.Vector2(
+                (event.clientX / window.innerWidth) * 2 - 1,
+                -(event.clientY / window.innerHeight) * 2 + 1
+            );
+            const raycaster = new THREE.Raycaster();
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(scene.children);
             if (event.button === 0 && selectedObjectType !== 'None') {
                 for (let intersect of intersects) {
+                    if (intersect.object.name === '') { // Ground plane
                         const position = intersect.point;
+                        position.y = 0.5; // Adjust height above ground
                         placeObject(position);
                         break;
                     }
                 }
             } else if (event.button === 2) {
                 for (let intersect of intersects) {
+                    if (intersect.object.name && intersect.object.name !== '') {
                         websocket.send(JSON.stringify({
                             type: 'delete_object',
                             payload: { obj_id: intersect.object.name, username }
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }