Update index.html

index.html

@@ -155,7 +155,8 @@
     let cameraDistance = 8;
     let cameraHeight = 3;
     let moveDirection = { x: 0, z: 0 };
-    let moveSpeed = 0.3;
+    let moveSpeed = 0.1;
+    let cameraRotation = { x: 0, y: 0 };
 
     function init() {
       scene = new THREE.Scene();
@@ -224,10 +225,12 @@
 
       joystick.addEventListener('touchstart', (e) => {
         isJoystickActive = true;
+        e.preventDefault();
       });
 
       joystick.addEventListener('touchmove', (e) => {
         if (!isJoystickActive) return;
+        e.preventDefault();
         const touch = e.touches[0];
         const rect = joystick.getBoundingClientRect();
         const centerX = rect.left + rect.width / 2;
@@ -240,16 +243,18 @@
         if (distance > 0) {
           const angle = Math.atan2(dy, dx);
           const limitedDistance = Math.min(distance, maxDistance);
-          joystickHandle.style.transform = `translate(calc(-50% + ${Math.cos(angle) * limitedDistance}px), calc(-50% + ${Math.sin(angle) * limitedDistance}px))`;
+          joystickHandle.style.left = `calc(50% + ${Math.cos(angle) * limitedDistance}px)`;
+          joystickHandle.style.top = `calc(50% + ${Math.sin(angle) * limitedDistance}px)`;
           
-          moveDirection.x = Math.cos(angle);
-          moveDirection.z = Math.sin(angle);
+          moveDirection.x = Math.cos(angle) * (distance / maxDistance);
+          moveDirection.z = Math.sin(angle) * (distance / maxDistance);
         }
       });
 
       joystick.addEventListener('touchend', () => {
         isJoystickActive = false;
-        joystickHandle.style.transform = 'translate(-50%, -50%)';
+        joystickHandle.style.left = '50%';
+        joystickHandle.style.top = '50%';
         moveDirection.x = 0;
         moveDirection.z = 0;
       });
@@ -262,6 +267,36 @@
       document.getElementById('downBtn').addEventListener('touchstart', () => {
         playerPos.y = Math.max(0.5, playerPos.y - 0.5);
       });
+
+      // Look around with finger on middle of screen
+      let isLooking = false;
+      let lastLookPos = { x: 0, y: 0 };
+
+      document.addEventListener('touchstart', (e) => {
+        const touch = e.touches[0];
+        if (touch.clientX > window.innerWidth * 0.4 && touch.clientX < window.innerWidth * 0.6 &&
+            touch.clientY > window.innerHeight * 0.3 && touch.clientY < window.innerHeight * 0.7) {
+          isLooking = true;
+          lastLookPos = { x: touch.clientX, y: touch.clientY };
+        }
+      });
+
+      document.addEventListener('touchmove', (e) => {
+        if (!isLooking || e.touches.length > 1) return;
+        const touch = e.touches[0];
+        const deltaX = touch.clientX - lastLookPos.x;
+        const deltaY = touch.clientY - lastLookPos.y;
+        
+        cameraRotation.y += deltaX * 0.01;
+        cameraRotation.x += deltaY * 0.01;
+        cameraRotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, cameraRotation.x));
+        
+        lastLookPos = { x: touch.clientX, y: touch.clientY };
+      });
+
+      document.addEventListener('touchend', () => {
+        isLooking = false;
+      });
     }
 
     function updateCoordinates() {