Merge pull request #191 from mkkellogg/dev

Release v0.3.7: Updated visualization modes

README.md

@@ -59,12 +59,20 @@ Keyboard
   - Ratio of rendered splats to total splats
   - Last splat sort duration
 
-- `P` Toggles a debug object that shows the orientation of the camera controls. It includes a green arrow representing the camera's orbital axis and a white square representing the plane at which the camera's elevation angle is 0.
+- `U` Toggles a debug object that shows the orientation of the camera controls. It includes a green arrow representing the camera's orbital axis and a white square representing the plane at which the camera's elevation angle is 0.
 
 - `Left arrow` Rotate the camera's up vector counter-clockwise
 
 - `Right arrow` Rotate the camera's up vector clockwise
 
+- `P` Toggle point-cloud mode, where each splat is rendered as a filled circle
+
+- `=` Increase splat scale
+
+- `-` Decrease splat scale
+
+- `O` Toggle orthographic mode
+
 <br>
 
 ## Building from source and running locally
@@ -262,8 +270,8 @@ const viewer = new GaussianSplats3D.Viewer({
     'webXRMode': GaussianSplats3D.WebXRMode.None,
     'renderMode': GaussianSplats3D.RenderMode.OnChange,
     'sceneRevealMode': GaussianSplats3D.SceneRevealMode.Instant,
-    `antialiased`: false,
-    `focalAdjustment`: 1.0
+    'antialiased': false,
+    'focalAdjustment': 1.0
 });
 viewer.addSplatScene('<path to .ply, .ksplat, or .splat file>')
 .then(() => {

package.json

@@ -4,7 +4,7 @@
         "type": "git",
         "url": "https://github.com/mkkellogg/GaussianSplats3D"
     },
-    "version": "0.3.6",
+    "version": "0.3.7",
     "description": "Three.js-based 3D Gaussian splat viewer",
     "module": "build/gaussian-splats-3d.module.js",
     "main": "build/gaussian-splats-3d.umd.cjs",

src/OrbitControls.js

@@ -437,6 +437,11 @@ class OrbitControls extends EventDispatcher {
 
         };
 
+        this.clearDampedRotation = function() {
+            sphericalDelta.theta = 0.0;
+            sphericalDelta.phi = 0.0;
+        };
+
         //
         // internals
         //

src/SceneHelper.js

@@ -165,13 +165,17 @@ export class SceneHelper {
 
         const tempPosition = new THREE.Vector3();
         const tempMatrix = new THREE.Matrix4();
+        const toCamera = new THREE.Vector3();
 
         return function(position, camera, viewport) {
             tempMatrix.copy(camera.matrixWorld).invert();
             tempPosition.copy(position).applyMatrix4(tempMatrix);
             tempPosition.normalize().multiplyScalar(10);
             tempPosition.applyMatrix4(camera.matrixWorld);
-            this.focusMarker.position.copy(tempPosition);
+            toCamera.copy(camera.position).sub(position);
+            const toCameraDistance = toCamera.length();
+            this.focusMarker.position.copy(position);
+            this.focusMarker.scale.set(toCameraDistance, toCameraDistance, toCameraDistance);
             this.focusMarker.material.uniforms.realFocusPosition.value.copy(position);
             this.focusMarker.material.uniforms.viewport.value.copy(viewport);
             this.focusMarker.material.uniformsNeedUpdate = true;