controls

viewer/src/lib/splat.js/cameras/Camera.ts

@@ -1,7 +1,6 @@
 import { Object3D } from "../core/Object3D";
 import { Matrix3 } from "../math/Matrix3";
 import { Matrix4 } from "../math/Matrix4";
-import { Quaternion } from "../math/Quaternion";
 import { Vector3 } from "../math/Vector3";
 
 class Camera extends Object3D {

viewer/src/lib/splat.js/controls/OrbitControls.ts

@@ -1,23 +1,8 @@
 import type { Camera } from "../cameras/Camera";
-import { EventDispatcher } from "../core/EventDispatcher";
 import { Matrix3 } from "../math/Matrix3";
-import { Quaternion } from "../math/Quaternion";
 import { Vector3 } from "../math/Vector3";
 
-class OrbitControls extends EventDispatcher {
-    camera: Camera;
-    domElement: HTMLElement;
-
-    target: Vector3 = new Vector3();
-    alpha: number = 0;
-    beta: number = 0;
-    radius: number = 5;
-
-    desiredTarget: Vector3;
-    desiredAlpha: number;
-    desiredBeta: number;
-    desiredRadius: number;
-
+class OrbitControls {
     minBeta: number = (5 * Math.PI) / 180;
     maxBeta: number = (85 * Math.PI) / 180;
     minZoom: number = 0.1;
@@ -27,45 +12,124 @@ class OrbitControls extends EventDispatcher {
     zoomSpeed: number = 1;
     dampening: number = 0.3;
 
+    update: () => void;
+    dispose: () => void;
+
     constructor(camera: Camera, domElement: HTMLElement) {
-        super();
+        let target = new Vector3();
+        let alpha = 0;
+        let beta = 0;
+        let radius = 5;
 
-        this.camera = camera;
-        this.domElement = domElement;
+        let desiredTarget = target.clone();
+        let desiredAlpha = alpha;
+        let desiredBeta = beta;
+        let desiredRadius = radius;
 
-        this.desiredTarget = this.target.clone();
-        this.desiredAlpha = this.alpha;
-        this.desiredBeta = this.beta;
-        this.desiredRadius = this.radius;
-    }
+        let dragging = false;
+        let panning = false;
+        let lastX = 0;
+        let lastY = 0;
 
-    lerp(a: number, b: number, t: number) {
-        return (1 - t) * a + t * b;
-    }
+        const computeZoomNorm = () => {
+            return 0.1 + (0.9 * (desiredRadius - this.minZoom)) / (this.maxZoom - this.minZoom);
+        };
 
-    pan(dx: number, dy: number) {
-        const R = this.camera.rotation.buffer;
-        const right = new Vector3(R[0], R[3], R[6]);
-        const up = new Vector3(R[1], R[4], R[7]);
-        this.desiredTarget.add(right.multiply(dx));
-        this.desiredTarget.add(up.multiply(dy));
-    }
+        const onPointerDown = (e: PointerEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            dragging = true;
+            if (e.pointerType === "touch") {
+                panning = e.pointerId === 2;
+            } else {
+                panning = e.button === 2;
+            }
+            lastX = e.clientX;
+            lastY = e.clientY;
+            window.addEventListener("pointerup", onPointerUp);
+            window.addEventListener("pointercancel", onPointerUp);
+        };
+
+        const onPointerUp = (e: PointerEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            dragging = false;
+            panning = false;
+            window.removeEventListener("pointerup", onPointerUp);
+            window.removeEventListener("pointercancel", onPointerUp);
+        };
+
+        const onPointerMove = (e: PointerEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (!dragging) return;
+
+            const dx = e.clientX - lastX;
+            const dy = e.clientY - lastY;
+            const zoomNorm = computeZoomNorm();
+
+            if (panning) {
+                const panX = -dx * this.panSpeed * 0.01 * zoomNorm;
+                const panY = -dy * this.panSpeed * 0.01 * zoomNorm;
+                const R = camera.rotation.buffer;
+                const right = new Vector3(R[0], R[3], R[6]);
+                const up = new Vector3(R[1], R[4], R[7]);
+                desiredTarget.add(right.multiply(panX));
+                desiredTarget.add(up.multiply(panY));
+            } else {
+                desiredAlpha -= dx * this.orbitSpeed * 0.005;
+                desiredBeta += dy * this.orbitSpeed * 0.005;
+                desiredBeta = Math.min(Math.max(desiredBeta, this.minBeta), this.maxBeta);
+            }
+
+            lastX = e.clientX;
+            lastY = e.clientY;
+        };
+
+        const onWheel = (e: WheelEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const zoomNorm = computeZoomNorm();
+            desiredRadius += e.deltaY * this.zoomSpeed * 0.02 * zoomNorm;
+            desiredRadius = Math.min(Math.max(desiredRadius, this.minZoom), this.maxZoom);
+        };
+
+        const lerp = (a: number, b: number, t: number) => {
+            return (1 - t) * a + t * b;
+        };
+
+        this.update = () => {
+            alpha = lerp(alpha, desiredAlpha, this.dampening);
+            beta = lerp(beta, desiredBeta, this.dampening);
+            radius = lerp(radius, desiredRadius, this.dampening);
+            target = target.lerp(desiredTarget, this.dampening);
+
+            const x = target.x + radius * Math.sin(alpha) * Math.cos(beta);
+            const y = target.y - radius * Math.sin(beta);
+            const z = target.z - radius * Math.cos(alpha) * Math.cos(beta);
+            camera.position.set(x, y, z);
+
+            const direction = target.clone().subtract(camera.position).normalize();
+            const rx = Math.asin(-direction.y);
+            const ry = Math.atan2(direction.x, direction.z);
+            camera.rotation = Matrix3.RotationFromEuler(new Vector3(rx, ry, 0));
+        };
+
+        this.dispose = () => {
+            domElement.removeEventListener("pointerdown", onPointerDown);
+            domElement.removeEventListener("pointermove", onPointerMove);
+            domElement.removeEventListener("wheel", onWheel);
+        };
+
+        domElement.addEventListener("pointerdown", onPointerDown);
+        domElement.addEventListener("pointermove", onPointerMove);
+        domElement.addEventListener("wheel", onWheel);
 
-    update() {
-        this.alpha = this.lerp(this.alpha, this.desiredAlpha, this.dampening);
-        this.beta = this.lerp(this.beta, this.desiredBeta, this.dampening);
-        this.radius = this.lerp(this.radius, this.desiredRadius, this.dampening);
-        this.target = this.target.lerp(this.desiredTarget, this.dampening);
-
-        const x = this.target.x + this.radius * Math.sin(this.alpha) * Math.cos(this.beta);
-        const y = this.target.y - this.radius * Math.sin(this.beta);
-        const z = this.target.z - this.radius * Math.cos(this.alpha) * Math.cos(this.beta);
-        this.camera.position.set(x, y, z);
-
-        const direction = this.target.clone().subtract(this.camera.position).normalize();
-        const rx = Math.asin(-direction.y);
-        const ry = Math.atan2(direction.x, direction.z);
-        this.camera.rotation = Matrix3.RotationFromEuler(new Vector3(rx, ry, 0));
+        this.update();
     }
 }
 

viewer/src/lib/splat.js/core/EventDispatcher.ts

@@ -1,38 +0,0 @@
-class EventDispatcher {
-    listeners: { [key: string]: Function[] } = {};
-
-    addEventListener(type: string, listener: Function): void {
-        if (this.listeners[type] === undefined) {
-            this.listeners[type] = [];
-        }
-        if (this.listeners[type].indexOf(listener) === -1) {
-            this.listeners[type].push(listener);
-        }
-    }
-
-    hasEventListener(type: string, listener: Function): boolean {
-        return this.listeners[type] !== undefined && this.listeners[type].indexOf(listener) !== -1;
-    }
-
-    removeEventListener(type: string, listener: Function): void {
-        const listenerArray = this.listeners[type];
-        if (listenerArray !== undefined) {
-            const index = listenerArray.indexOf(listener);
-            if (index !== -1) {
-                listenerArray.splice(index, 1);
-            }
-        }
-    }
-
-    dispatchEvent(event: { type: string }): void {
-        const listenerArray = this.listeners[event.type];
-        if (listenerArray !== undefined) {
-            const array = listenerArray.slice(0);
-            for (let i = 0, l = array.length; i < l; i++) {
-                array[i].call(this, event);
-            }
-        }
-    }
-}
-
-export { EventDispatcher };

viewer/src/lib/splat.js/core/Object3D.ts

@@ -1,5 +1,4 @@
 import { Vector3 } from "../math/Vector3";
-import { Quaternion } from "../math/Quaternion";
 import { Matrix3 } from "../math/Matrix3";
 
 class Object3D {

viewer/src/routes/viewer/[slug]/SplatViewer.ts

@@ -213,23 +213,9 @@ export class SplatViewer implements IViewer {
         document.addEventListener("dragleave", this.preventDefault);
         document.addEventListener("contextmenu", this.preventDefault);
 
-        this.handleTouchStart = this.handleTouchStart.bind(this);
-        this.handleTouchEnd = this.handleTouchEnd.bind(this);
-        this.handleTouchMove = this.handleTouchMove.bind(this);
-        this.handleMouseDown = this.handleMouseDown.bind(this);
-        this.handleMouseUp = this.handleMouseUp.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
-        this.handleMouseWheel = this.handleMouseWheel.bind(this);
         this.handleDrop = this.handleDrop.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
-        this.canvas.addEventListener("touchstart", this.handleTouchStart);
-        this.canvas.addEventListener("touchend", this.handleTouchEnd);
-        this.canvas.addEventListener("touchmove", this.handleTouchMove);
-        this.canvas.addEventListener("mousedown", this.handleMouseDown);
-        this.canvas.addEventListener("mouseup", this.handleMouseUp);
-        this.canvas.addEventListener("mousemove", this.handleMouseMove);
-        this.canvas.addEventListener("wheel", this.handleMouseWheel);
         this.canvas.addEventListener("drop", this.handleDrop);
 
         window.addEventListener("resize", this.handleResize);
@@ -295,98 +281,6 @@ export class SplatViewer implements IViewer {
         }
     }
 
-    handleTouchStart(e: TouchEvent) {
-        e.preventDefault();
-        this.dragging = true;
-        this.panning = e.touches.length === 2;
-        this.lastX = e.touches[0].clientX;
-        this.lastY = e.touches[0].clientY;
-    }
-
-    handleTouchEnd(e: TouchEvent) {
-        e.preventDefault();
-        this.dragging = false;
-        this.panning = false;
-    }
-
-    computeZoomNorm() {
-        return (
-            0.1 +
-            (0.9 * (this.orbitControls.desiredRadius - this.orbitControls.minZoom)) /
-                (this.orbitControls.maxZoom - this.orbitControls.minZoom)
-        );
-    }
-
-    handleTouchMove(e: TouchEvent) {
-        e.preventDefault();
-        if (!this.dragging) return;
-        const dx = e.touches[0].clientX - this.lastX;
-        const dy = e.touches[0].clientY - this.lastY;
-        const zoomNorm = this.computeZoomNorm();
-
-        if (this.panning) {
-            this.orbitControls.pan(
-                -dx * this.orbitControls.panSpeed * 0.01 * zoomNorm,
-                -dy * this.orbitControls.panSpeed * 0.01 * zoomNorm
-            );
-        } else {
-            this.orbitControls.desiredAlpha -= dx * this.orbitControls.orbitSpeed * 0.005;
-            this.orbitControls.desiredBeta += dy * this.orbitControls.orbitSpeed * 0.005;
-            this.orbitControls.desiredBeta = Math.min(
-                Math.max(this.orbitControls.desiredBeta, this.orbitControls.minBeta),
-                this.orbitControls.maxBeta
-            );
-        }
-
-        this.lastX = e.touches[0].clientX;
-        this.lastY = e.touches[0].clientY;
-    }
-
-    handleMouseDown(e: MouseEvent) {
-        this.dragging = true;
-        this.panning = e.button === 2;
-        this.lastX = e.clientX;
-        this.lastY = e.clientY;
-    }
-
-    handleMouseUp(e: MouseEvent) {
-        this.dragging = false;
-        this.panning = false;
-    }
-
-    handleMouseMove(e: MouseEvent) {
-        if (!this.dragging) return;
-        const dx = e.clientX - this.lastX;
-        const dy = e.clientY - this.lastY;
-        const zoomNorm = this.computeZoomNorm();
-
-        if (this.panning) {
-            this.orbitControls.pan(
-                -dx * this.orbitControls.panSpeed * 0.01 * zoomNorm,
-                -dy * this.orbitControls.panSpeed * 0.01 * zoomNorm
-            );
-        } else {
-            this.orbitControls.desiredAlpha -= dx * this.orbitControls.orbitSpeed * 0.005;
-            this.orbitControls.desiredBeta += dy * this.orbitControls.orbitSpeed * 0.005;
-            this.orbitControls.desiredBeta = Math.min(
-                Math.max(this.orbitControls.desiredBeta, this.orbitControls.minBeta),
-                this.orbitControls.maxBeta
-            );
-        }
-
-        this.lastX = e.clientX;
-        this.lastY = e.clientY;
-    }
-
-    handleMouseWheel(e: WheelEvent) {
-        const zoomNorm = this.computeZoomNorm();
-        this.orbitControls.desiredRadius += e.deltaY * this.orbitControls.zoomSpeed * 0.02 * zoomNorm;
-        this.orbitControls.desiredRadius = Math.min(
-            Math.max(this.orbitControls.desiredRadius, this.orbitControls.minZoom),
-            this.orbitControls.maxZoom
-        );
-    }
-
     handleDrop(e: DragEvent) {
         e.preventDefault();
         e.stopPropagation();
@@ -426,6 +320,7 @@ export class SplatViewer implements IViewer {
 
     dispose() {
         this.worker.terminate();
+        this.orbitControls.dispose();
 
         this.gl.disableVertexAttribArray(this.a_position);
         this.gl.disableVertexAttribArray(this.a_center);
@@ -465,13 +360,6 @@ export class SplatViewer implements IViewer {
         document.removeEventListener("dragleave", this.preventDefault);
         document.removeEventListener("contextmenu", this.preventDefault);
 
-        this.canvas.removeEventListener("touchstart", this.handleTouchStart);
-        this.canvas.removeEventListener("touchend", this.handleTouchEnd);
-        this.canvas.removeEventListener("touchmove", this.handleTouchMove);
-        this.canvas.removeEventListener("mousedown", this.handleMouseDown);
-        this.canvas.removeEventListener("mouseup", this.handleMouseUp);
-        this.canvas.removeEventListener("mousemove", this.handleMouseMove);
-        this.canvas.removeEventListener("wheel", this.handleMouseWheel);
         this.canvas.removeEventListener("drop", this.handleDrop);
 
         window.removeEventListener("resize", this.handleResize);