Add touch controlls

Davidxdydz · web-flow · commit 4552d674ef51 · 2025-09-01T15:47:01.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,8 @@
 <head>
     <meta charset="utf-8">
     <title>web-splat</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="https://unpkg.com/normalize.css@8/normalize.css">
     <style>
         body {
@@ -14,6 +15,16 @@
             background-color: black;
             color: white;
             font-family: Arial, Helvetica, sans-serif;
+            touch-action: none;
+            /* Prevent default touch behaviors like scrolling and zooming */
+            -webkit-touch-callout: none;
+            /* Disable callout on iOS */
+            -webkit-user-select: none;
+            /* Disable selection on iOS */
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
 
         #spinner {
@@ -105,6 +116,17 @@
             text-align: center;
             height: 100%;
         }
+
+        canvas {
+            touch-action: none;
+            /* Prevent default touch behaviors */
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
     </style>
     <div id="spinner" style="display: none;">
         <svg>
diff --git a/src/controller.rs b/src/controller.rs
@@ -1,15 +1,49 @@
 use cgmath::*;
-#[cfg(target_arch = "wasm32")]
-use web_time::Duration;
 use num_traits::Float;
 use std::f32::consts::PI;
 #[cfg(not(target_arch = "wasm32"))]
 use std::time::Duration;
+#[cfg(target_arch = "wasm32")]
+use web_time::Duration;
 
 use winit::keyboard::KeyCode;
 
 use crate::camera::PerspectiveCamera;
 
+#[derive(Debug, Clone)]
+pub struct TouchState {
+    pub touches: Vec<Touch>,
+    pub last_touch_count: usize,
+    pub last_pinch_distance: Option<f32>,
+    pub last_touch_center: Option<(f32, f32)>,
+}
+
+#[derive(Debug, Clone)]
+pub struct Touch {
+    pub id: u64,
+    pub position: (f32, f32),
+    pub phase: TouchPhase,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum TouchPhase {
+    Started,
+    Moved,
+    Ended,
+    Cancelled,
+}
+
+impl TouchState {
+    pub fn new() -> Self {
+        Self {
+            touches: Vec::new(),
+            last_touch_count: 0,
+            last_pinch_distance: None,
+            last_touch_center: None,
+        }
+    }
+}
+
 #[derive(Debug)]
 pub struct CameraController {
     pub center: Point3<f32>,
@@ -25,6 +59,9 @@ pub struct CameraController {
     pub right_mouse_pressed: bool,
     pub alt_pressed: bool,
     pub user_inptut: bool,
+
+    // Touch support
+    pub touch_state: TouchState,
 }
 
 impl CameraController {
@@ -42,6 +79,7 @@ impl CameraController {
             right_mouse_pressed: false,
             alt_pressed: false,
             user_inptut: false,
+            touch_state: TouchState::new(),
         }
     }
 
@@ -104,6 +142,98 @@ impl CameraController {
         self.user_inptut = true;
     }
 
+    pub fn process_touch(&mut self, touch: Touch) {
+        // Update touch state
+        match touch.phase {
+            TouchPhase::Started => {
+                self.touch_state.touches.push(touch);
+            }
+            TouchPhase::Moved => {
+                if let Some(existing_touch) = self
+                    .touch_state
+                    .touches
+                    .iter_mut()
+                    .find(|t| t.id == touch.id)
+                {
+                    existing_touch.position = touch.position;
+                }
+            }
+            TouchPhase::Ended | TouchPhase::Cancelled => {
+                self.touch_state.touches.retain(|t| t.id != touch.id);
+            }
+        }
+
+        self.handle_touch_gestures();
+        self.user_inptut = true;
+    }
+
+    fn handle_touch_gestures(&mut self) {
+        let touch_count = self.touch_state.touches.len();
+
+        match touch_count {
+            1 => {
+                // Single touch - camera rotation
+                let touch = &self.touch_state.touches[0];
+                if let Some(last_center) = self.touch_state.last_touch_center {
+                    let dx = touch.position.0 - last_center.0;
+                    let dy = touch.position.1 - last_center.1;
+
+                    // Scale the touch movement similar to mouse movement but with better mobile sensitivity
+                    self.rotation.x += dx * 0.3; // Reduced sensitivity for more precise control
+                    self.rotation.y += dy * 0.3;
+                }
+                self.touch_state.last_touch_center = Some(touch.position);
+            }
+            2 => {
+                // Two touches - pinch to zoom and pan
+                let touch1 = &self.touch_state.touches[0];
+                let touch2 = &self.touch_state.touches[1];
+
+                let center_x = (touch1.position.0 + touch2.position.0) / 2.0;
+                let center_y = (touch1.position.1 + touch2.position.1) / 2.0;
+                let current_center = (center_x, center_y);
+
+                // Calculate distance for pinch gesture
+                let dx = touch2.position.0 - touch1.position.0;
+                let dy = touch2.position.1 - touch1.position.1;
+                let current_distance = (dx * dx + dy * dy).sqrt();
+
+                if let Some(last_distance) = self.touch_state.last_pinch_distance {
+                    // Pinch to zoom with improved sensitivity
+                    let distance_change = current_distance - last_distance;
+                    let zoom_factor = distance_change * 0.005; // Adjusted for better mobile zoom control
+                    self.scroll += zoom_factor;
+                }
+
+                if let Some(last_center) = self.touch_state.last_touch_center {
+                    // Pan with two fingers - improved sensitivity for mobile
+                    let center_dx = current_center.0 - last_center.0;
+                    let center_dy = current_center.1 - last_center.1;
+
+                    self.shift.y += -center_dx * 0.3; // Reduced sensitivity for more precise panning
+                    self.shift.x += center_dy * 0.3;
+                }
+
+                self.touch_state.last_pinch_distance = Some(current_distance);
+                self.touch_state.last_touch_center = Some(current_center);
+            }
+            _ => {
+                // No touches or more than 2 touches - reset state
+                self.touch_state.last_pinch_distance = None;
+                self.touch_state.last_touch_center = None;
+            }
+        }
+
+        self.touch_state.last_touch_count = touch_count;
+    }
+
+    pub fn clear_touch_state(&mut self) {
+        self.touch_state.touches.clear();
+        self.touch_state.last_touch_count = 0;
+        self.touch_state.last_pinch_distance = None;
+        self.touch_state.last_touch_center = None;
+    }
+
     /// moves the controller center to the closest point on a line defined by the camera position and rotation
     /// ajusts the controller up vector by projecting the current up vector onto the plane defined by the camera right vector
     pub fn reset_to_camera(&mut self, camera: PerspectiveCamera) {
diff --git a/src/lib.rs b/src/lib.rs
@@ -24,7 +24,7 @@ use utils::RingBuffer;
 use wasm_bindgen::prelude::wasm_bindgen;
 use winit::{
     dpi::{LogicalSize, PhysicalSize},
-    event::{DeviceEvent, ElementState, Event, WindowEvent},
+    event::{DeviceEvent, ElementState, Event, WindowEvent, TouchPhase as WinitTouchPhase},
     event_loop::{ControlFlow, EventLoop},
     keyboard::{KeyCode, PhysicalKey},
     window::Window,
@@ -849,6 +849,22 @@ pub async fn open_window<R: Read + Seek + Send + Sync + 'static>(
                     _=>{}
                 }
             }
+            WindowEvent::Touch(touch) => {
+                let touch_phase = match touch.phase {
+                    WinitTouchPhase::Started => controller::TouchPhase::Started,
+                    WinitTouchPhase::Moved => controller::TouchPhase::Moved,
+                    WinitTouchPhase::Ended => controller::TouchPhase::Ended,
+                    WinitTouchPhase::Cancelled => controller::TouchPhase::Cancelled,
+                };
+                
+                let controller_touch = controller::Touch {
+                    id: touch.id,
+                    position: (touch.location.x as f32, touch.location.y as f32),
+                    phase: touch_phase,
+                };
+                
+                state.controller.process_touch(controller_touch);
+            }
             WindowEvent::RedrawRequested => {
                 if !config.no_vsync{
                     // make sure the next redraw is called with a small delay
diff --git a/src/ui.rs b/src/ui.rs
@@ -334,29 +334,48 @@ pub(crate) fn ui(state: &mut WindowContext) -> bool {
                 .num_columns(2)
                 .striped(true)
                 .show(ui, |ui| {
-                    ui.strong("Camera");
+                    ui.strong("Camera Controls");
                     ui.end_row();
+                    
+                    // Desktop controls
                     ui.label("Rotate Camera");
-                    ui.label("Left click + drag");
+                    ui.label("Left click + drag / Touch + drag");
                     ui.end_row();
 
                     ui.label("Move Target/Center");
-                    ui.label("Right click + drag");
+                    ui.label("Right click + drag / Two finger drag");
                     ui.end_row();
 
                     ui.label("Tilt Camera");
                     ui.label("Alt + drag mouse");
                     ui.end_row();
 
                     ui.label("Zoom");
-                    ui.label("Mouse wheel");
+                    ui.label("Mouse wheel / Pinch gesture");
                     ui.end_row();
 
-                    ui.label("Toggle UI");
-                    ui.label("U");
+                    ui.separator();
+                    ui.end_row();
+                    
+                    ui.strong("Mobile Touch Controls");
+                    ui.end_row();
+                    ui.label("Rotate");
+                    ui.label("Single finger drag");
+                    ui.end_row();
+                    ui.label("Pan/Move");
+                    ui.label("Two finger drag");
+                    ui.end_row();
+                    ui.label("Zoom");
+                    ui.label("Pinch to zoom");
+                    ui.end_row();
+                    
+                    ui.separator();
                     ui.end_row();
 
-                    ui.strong("Scene Views");
+                    ui.strong("Scene Navigation");
+                    ui.end_row();
+                    ui.label("Toggle UI");
+                    ui.label("U");
                     ui.end_row();
                     ui.label("Views 0-9");
                     ui.label("0-9");
