Add option: listenToKeyEvents

Author: hirako2000

README.md

@@ -282,6 +282,7 @@ const viewer = new GaussianSplats3D.Viewer({
     'renderer': renderer,
     'camera': camera,
     'useBuiltInControls': false,
+    'listenToKeyEvents': false,
     'ignoreDevicePixelRatio': false,
     'gpuAcceleratedSort': true,
     `enableSIMDInSort`: true,
@@ -321,6 +322,7 @@ Advanced `Viewer` parameters
 | `renderer` | Pass an instance of a Three.js `Renderer` to the viewer, otherwise it will create its own. Defaults to `undefined`.
 | `camera` | Pass an instance of a Three.js `Camera` to the viewer, otherwise it will create its own. Defaults to `undefined`.
 | `useBuiltInControls` | Tells the viewer to use its own camera controls. Defaults to `true`.
+| `listenToKeyEvents` | Tells the viewer to enable key controls, needs `useBuiltInControls` enabled to take effect. Defaults to `true`.
 | `ignoreDevicePixelRatio` | Tells the viewer to pretend the device pixel ratio is 1, which can boost performance on devices where it is larger, at a small cost to visual quality. Defaults to `false`.
 | `gpuAcceleratedSort` | Tells the viewer to use a partially GPU-accelerated approach to sorting splats. Currently this means pre-computation of splat distances from the camera is performed on the GPU. It is recommended that this only be set to `true` when `sharedMemoryForWorkers` is also `true`. Defaults to `false` on mobile devices, `true` otherwise.
 | `enableSIMDInSort` | Enable the usage of SIMD WebAssembly instructions for the splat sort. Default is `true`.

src/DropInViewer.js

@@ -12,6 +12,7 @@ export class DropInViewer extends THREE.Group {
 
         options.selfDrivenMode = false;
         options.useBuiltInControls = false;
+        options.listenToKeyEvents = false;
         options.rootElement = null;
         options.dropInMode = true;
         options.camera = undefined;

src/Viewer.js

@@ -65,7 +65,10 @@ export class Viewer {
 
         // If 'useBuiltInControls' is true, the viewer will create its own instance of OrbitControls and attach to the camera
         if (options.useBuiltInControls === undefined) options.useBuiltInControls = true;
+        if (options.listenToKeyEvents === undefined) options.listenToKeyEvents = true;
+
         this.useBuiltInControls = options.useBuiltInControls;
+        this.listenToKeyEvents = options.listenToKeyEvents;
 
         // parent element of the Three.js renderer canvas
         this.rootElement = options.rootElement;
@@ -404,7 +407,7 @@ export class Viewer {
             }
             for (let controls of [this.orthographicControls, this.perspectiveControls,]) {
                 if (controls) {
-                    controls.listenToKeyEvents(window);
+                    this.listenToKeyEvents ?? controls.listenToKeyEvents(window);
                     controls.rotateSpeed = 0.5;
                     controls.maxPolarAngle = Math.PI * .75;
                     controls.minPolarAngle = 0.1;
@@ -427,7 +430,9 @@ export class Viewer {
             this.renderer.domElement.addEventListener('pointerdown', this.mouseDownListener, false);
             this.mouseUpListener = this.onMouseUp.bind(this);
             this.renderer.domElement.addEventListener('pointerup', this.mouseUpListener, false);
-            this.keyDownListener = this.onKeyDown.bind(this);
+            if (listenToKeyEvents) {
+                this.keyDownListener = this.onKeyDown.bind(this);
+            }
             window.addEventListener('keydown', this.keyDownListener, false);
         }
     }
@@ -440,7 +445,7 @@ export class Viewer {
             this.mouseDownListener = null;
             this.renderer.domElement.removeEventListener('pointerup', this.mouseUpListener);
             this.mouseUpListener = null;
-            window.removeEventListener('keydown', this.keyDownListener);
+            this.listenToKeyEvents ?? window.removeEventListener('keydown', this.keyDownListener);
             this.keyDownListener = null;
         }
     }