Add touch controls for camera manipulation in mujoco_server.py

- Implemented touch event listeners for camera rotation and pinch-to-zoom functionality.
- Enhanced user interaction by allowing single touch for rotation and dual touch for zooming.
- Added logic to handle touch movements and reset states for improved user experience.

mujoco_server.py

@@ -1219,6 +1219,7 @@ def index():
 
             viewport.oncontextmenu = (e) => e.preventDefault();
 
+            // Mouse controls
             viewport.onmousedown = (e) => {
                 isDragging = true;
                 lastX = e.clientX;
@@ -1244,6 +1245,58 @@ def index():
                 send('camera', {action: 'zoom', dz: e.deltaY});
             };
 
+            // Touch controls for camera rotation and pinch-to-zoom
+            let touchStartX, touchStartY;
+            let lastPinchDist = null;
+
+            function getTouchDistance(touches) {
+                const dx = touches[0].clientX - touches[1].clientX;
+                const dy = touches[0].clientY - touches[1].clientY;
+                return Math.sqrt(dx * dx + dy * dy);
+            }
+
+            viewport.addEventListener('touchstart', (e) => {
+                if (e.touches.length === 1) {
+                    // Single touch - rotation
+                    touchStartX = e.touches[0].clientX;
+                    touchStartY = e.touches[0].clientY;
+                    lastPinchDist = null;
+                } else if (e.touches.length === 2) {
+                    // Two touches - pinch zoom
+                    lastPinchDist = getTouchDistance(e.touches);
+                }
+            }, {passive: true});
+
+            viewport.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                if (e.touches.length === 1 && lastPinchDist === null) {
+                    // Single touch drag - rotate camera
+                    const dx = e.touches[0].clientX - touchStartX;
+                    const dy = e.touches[0].clientY - touchStartY;
+                    touchStartX = e.touches[0].clientX;
+                    touchStartY = e.touches[0].clientY;
+                    send('camera', {action: 'rotate', dx, dy});
+                } else if (e.touches.length === 2 && lastPinchDist !== null) {
+                    // Pinch zoom
+                    const dist = getTouchDistance(e.touches);
+                    const delta = lastPinchDist - dist;
+                    lastPinchDist = dist;
+                    // Scale delta for smoother zoom
+                    send('camera', {action: 'zoom', dz: delta * 3});
+                }
+            }, {passive: false});
+
+            viewport.addEventListener('touchend', (e) => {
+                if (e.touches.length < 2) {
+                    lastPinchDist = null;
+                }
+                if (e.touches.length === 1) {
+                    // Reset for single finger after pinch
+                    touchStartX = e.touches[0].clientX;
+                    touchStartY = e.touches[0].clientY;
+                }
+            }, {passive: true});
+
             // Connect on load
             connect();
         </script>