Merge pull request #174 from Smithsonian/dev-bugfix

Dev bugfix

package.json

@@ -1,6 +1,6 @@
 {
     "name": "voyager",
-    "version": "0.16.1",
+    "version": "0.23.0",
     "description": "Smithsonian DPO Voyager - 3D Explorer and Tool Suite",
     "scripts": {
         "start": "npm run server",
@@ -70,7 +70,7 @@
         "simple-dropzone": "^0.8.1",
         "stream-browserify": "^3.0.0",
         "style-loader": "^3.3.1",
-        "three": "^0.143.0",
+        "three": "^0.146.0",
         "three-bmfont-text": "git+https://github.com/Smithsonian/three-bmfont-text.git#e611dac13d",
         "tinymce": "^6.0.1",
         "toposort": "^2.0.2",
@@ -82,7 +82,7 @@
         "@types/chai": "^4.2.21",
         "@types/mocha": "^9.0.0",
         "@types/node": "^14.0.26",
-        "@types/three": "^0.143.0",
+        "@types/three": "^0.144.0",
         "chai": "^4.2.0",
         "concurrently": "^6.2.1",
         "css-loader": "^6.2.0",

source/client/annotations/CircleSprite.ts

@@ -16,8 +16,8 @@
  */
 
 import { Camera, ArrayCamera, PerspectiveCamera, Vector3, Quaternion, Matrix4, Group, 
-    Mesh, RingBufferGeometry, MeshBasicMaterial, BufferGeometry, RawShaderMaterial, 
-    GreaterDepth, CircleBufferGeometry, MathUtils } from "three";
+    Mesh, RingGeometry, MeshBasicMaterial, BufferGeometry, RawShaderMaterial, 
+    GreaterDepth, CircleGeometry, MathUtils } from "three";
 import * as createTextGeometry from "three-bmfont-text";
 import * as createTextShader from "three-bmfont-text/shaders/msdf";
 
@@ -50,7 +50,7 @@ export default class CircleSprite extends AnnotationSprite
     protected anchorMesh: Mesh;
 
     protected ringMesh: Mesh;
-    protected ringGeometry: RingBufferGeometry;
+    protected ringGeometry: RingGeometry;
     protected ringMaterialA: MeshBasicMaterial;
     protected ringMaterialB: MeshBasicMaterial;
 
@@ -76,7 +76,7 @@ export default class CircleSprite extends AnnotationSprite
 
         this.add(this.offset);
 
-        this.ringGeometry = new RingBufferGeometry(0.45, 0.5, 32);
+        this.ringGeometry = new RingGeometry(0.45, 0.5, 32);
 
         this.ringMaterialA = new MeshBasicMaterial();
         this.ringMaterialB = new MeshBasicMaterial({
@@ -97,7 +97,7 @@ export default class CircleSprite extends AnnotationSprite
         );
 
         const innerCircle = new Mesh(
-            new CircleBufferGeometry(0.45, 32),
+            new CircleGeometry(0.45, 32),
             new MeshBasicMaterial({ color: 0, opacity: 0.65, transparent: true }),
         );
 

source/client/annotations/LabelSprite.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Mesh, CylinderBufferGeometry, MeshPhongMaterial, Camera } from "three";
+import { Mesh, CylinderGeometry, MeshPhongMaterial, Camera } from "three";
 
 import { customElement, html } from "@ff/ui/CustomElement";
 
@@ -35,7 +35,7 @@ export default class LabelSprite extends AnnotationSprite
         super(annotation);
 
         this.cone = new Mesh(
-            new CylinderBufferGeometry(0.3, 0.02, 4),
+            new CylinderGeometry(0.3, 0.02, 4),
             new MeshPhongMaterial({ color: "green" })
         );
 

source/client/annotations/PinSprite.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Vector3, Mesh, CylinderBufferGeometry, MeshPhongMaterial, Camera } from "three";
+import { Vector3, Mesh, CylinderGeometry, MeshPhongMaterial, Camera } from "three";
 
 import math from "@ff/core/math";
 import { customElement, html } from "@ff/ui/CustomElement";
@@ -38,7 +38,7 @@ export default class PinSprite extends AnnotationSprite
         super(annotation);
 
         this.pin = new Mesh(
-            new CylinderBufferGeometry(0.25, 0.02, 1, 16, 1),
+            new CylinderGeometry(0.25, 0.02, 1, 16, 1),
             new MeshPhongMaterial({ color: "white" })
         );
         this.pin.geometry.translate(0, 0.5, 0);

source/client/components/CVARManager.ts

@@ -29,8 +29,8 @@ import UniversalCamera from "@ff/three/UniversalCamera";
 import CPulse from "@ff/graph/components/CPulse";
 import Notification from "@ff/ui/Notification";
 
-import {Matrix4, Vector3, Ray, Raycaster, Mesh, Object3D, PlaneBufferGeometry, MeshBasicMaterial, ArrayCamera, Material, 
-    PerspectiveCamera, Shape, ShapeBufferGeometry, DoubleSide, WebGLRenderer, Box3, Quaternion} from 'three';
+import {Matrix4, Vector3, Ray, Raycaster, Mesh, Object3D, PlaneGeometry, MeshBasicMaterial, ArrayCamera, Material, Camera,
+    PerspectiveCamera, Shape, ShapeGeometry, DoubleSide, WebGLRenderer, Box3, Quaternion} from 'three';
 
 //import * as WebXR from "../types/WebXR";
 import {IS_ANDROID, IS_AR_QUICKLOOK_CANDIDATE, IS_IOS, /*IS_IOS_CHROME, IS_IOS_SAFARI,*/ IS_WEBXR_AR_CANDIDATE, IS_MOBILE} from '../constants';
@@ -494,9 +494,9 @@ export default class CVARManager extends Component
             return;
         }
         else if(xrCamera) {
-            camera.position.setFromMatrixPosition(xrCamera.matrixWorld); 
-            xrCamera.projectionMatrixInverse.copy(xrCamera.projectionMatrix).invert();
+            renderer.xr.updateCamera(camera as Camera as PerspectiveCamera);
 
+            camera.updateMatrixWorld(true);
             camera.projectionMatrix.fromArray(xrCamera.projectionMatrix.elements);
             camera.projectionMatrixInverse.copy(xrCamera.projectionMatrix).invert();
         }
@@ -507,6 +507,8 @@ export default class CVARManager extends Component
             const {position} = scene; 
             const radius =  sceneNode.outs.boundingRadius.value * 2.0 + xrCamera.near; // Math.abs(this.optimalCameraDistance);
 
+            xrCamera.projectionMatrixInverse.copy(xrCamera.projectionMatrix).invert();
+
             const pose : XRViewerPose = frame.getViewerPose(refSpace!);
             const e = pose.views[0].transform.matrix;
 			position.set(-e[ 8 ], -e[ 9 ], -e[ 10 ]).normalize(); 
@@ -771,7 +773,7 @@ export default class CVARManager extends Component
 
         // add interaction plane
         const hitPlane = this.hitPlane = new Mesh( 
-            new PlaneBufferGeometry(width, height),
+            new PlaneGeometry(width, height),
             new MeshBasicMaterial()   
         );
         hitPlane.position.set(centerOffsetX, min.y, centerOffsetZ);
@@ -786,7 +788,7 @@ export default class CVARManager extends Component
         this.roundedRect(roundedRectShape, -width/2.0, -height/2.0, width, height, thickness*0.5);
         this.roundedRect(cutOut, -width/2.0 + thickness, -height/2.0 + thickness, width-2*thickness, height-2*thickness, thickness*0.4);
         roundedRectShape.holes.push(cutOut);
-        let geometry = new ShapeBufferGeometry(roundedRectShape);
+        let geometry = new ShapeGeometry(roundedRectShape);
         const selectionRing = this.selectionRing = new Mesh( geometry, new MeshBasicMaterial({ side: DoubleSide, opacity: 0.0 }) );
         selectionRing.position.set(centerOffsetX, min.y, centerOffsetZ);
         selectionRing.rotation.set(-Math.PI / 2.0, 0, 0);

source/client/components/CVAudioManager.ts

@@ -131,9 +131,10 @@ export default class CVAudioManager extends Component
     {
         const meta = event.object;
 
-        if (event.add) {
+        if (meta.node.typeName === "NVScene" && event.add) {
+            this.audioClips = meta.audio.dictionary;  // needed to support initially empty meta nodes
             meta.once("load", () => {
-                this.audioClips = meta.audio.dictionary || {};
+                this.audioClips = meta.audio.dictionary;
             });
         }
     }

source/client/components/CVOrbitNavigation.ts

@@ -20,7 +20,7 @@ import { Box3 } from "three";
 import CObject3D, { Node, types } from "@ff/scene/components/CObject3D";
 
 import CameraController from "@ff/three/CameraController";
-import { IPointerEvent, ITriggerEvent } from "@ff/scene/RenderView";
+import { IKeyboardEvent, IPointerEvent, ITriggerEvent } from "@ff/scene/RenderView";
 import CScene, { IRenderContext } from "@ff/scene/components/CScene";
 import CTransform, { ERotationOrder } from "@ff/scene/components/CTransform";
 import { EProjection } from "@ff/three/UniversalCamera";
@@ -34,7 +34,8 @@ import CVAssetManager from "./CVAssetManager";
 
 export { EProjection };
 
-export enum EViewPreset { Left, Right, Top, Bottom, Front, Back, None }
+export enum EViewPreset { Left, Right, Top, Bottom, Front, Back, None };
+export enum EKeyNavMode { Orbit, Zoom, Pan };
 
 const _orientationPresets = [];
 _orientationPresets[EViewPreset.Left] = [ 0, -90, 0 ];
@@ -79,6 +80,7 @@ export default class CVOrbitNavigation extends CObject3D
         minOffset: types.Vector3("Limits.Min.Offset", [ -Infinity, -Infinity, 0.1 ]),
         maxOrbit: types.Vector3("Limits.Max.Orbit", [ 90, Infinity, Infinity ]),
         maxOffset: types.Vector3("Limits.Max.Offset", [ Infinity, Infinity, Infinity ]),
+        keyNavActive: types.Enum("Navigation.KeyNavActive", EKeyNavMode)
     };
 
     ins = this.addInputs<CObject3D, typeof CVOrbitNavigation.ins>(CVOrbitNavigation.ins);
@@ -131,6 +133,7 @@ export default class CVOrbitNavigation extends CObject3D
 
         this.system.on<IPointerEvent>(["pointer-down", "pointer-up", "pointer-move"], this.onPointer, this);
         this.system.on<ITriggerEvent>("wheel", this.onTrigger, this);
+        this.system.on<IKeyboardEvent>("keydown", this.onKeyboard, this);
 
         this.assetManager.outs.completed.on("value", this.onLoadingCompleted, this);
     }
@@ -141,6 +144,7 @@ export default class CVOrbitNavigation extends CObject3D
 
         this.system.off<IPointerEvent>(["pointer-down", "pointer-up", "pointer-move"], this.onPointer, this);
         this.system.off<ITriggerEvent>("wheel", this.onTrigger, this);
+        this.system.off<IKeyboardEvent>("keydown", this.onKeyboard, this);
 
         super.dispose();
     }
@@ -216,7 +220,7 @@ export default class CVOrbitNavigation extends CObject3D
                 controller.camera = cameraComponent.camera;
 
                 controller.zoomExtents(this._modelBoundingBox);
-                //cameraComponent.ins.zoom.set();
+                cameraComponent.ins.zoom.set();
                 this._hasZoomed = true;
             }
             this._isAutoZooming = false;
@@ -375,6 +379,35 @@ export default class CVOrbitNavigation extends CObject3D
         this._hasChanged = true;
     }
 
+    protected onKeyboard(event: IKeyboardEvent)
+    {
+        const viewport = event.viewport;
+
+        // if viewport has it's own camera, don't handle event here
+        if (viewport.camera) {
+            return;
+        }
+
+        if (this.ins.enabled.value && this._scene.activeCameraComponent) {
+            if(event.key.includes("Arrow")) {
+                if(event.ctrlKey) {
+                    this.ins.keyNavActive.setValue(EKeyNavMode.Zoom);
+                }
+                else if(event.shiftKey) {
+                    this.ins.keyNavActive.setValue(EKeyNavMode.Pan);
+                }
+                else {
+                    this.ins.keyNavActive.setValue(EKeyNavMode.Orbit);
+                }
+            }
+            this._controller.setViewportSize(viewport.width, viewport.height);
+            this._controller.onKeypress(event);
+            event.stopPropagation = true;
+        }
+
+        this._hasChanged = true;
+    }
+
     protected onLoadingCompleted(isLoading: boolean)
     {
         if (this.ins.autoZoom.value && (!this._hasChanged || !this._hasZoomed)) {

source/client/components/CVPoseTask.ts

@@ -102,6 +102,11 @@ export default class CVPoseTask extends CVTask
         this.renderer.views.forEach(view => {
             if (view instanceof RenderQuadView) {
                 view.layout = EQuadViewLayout.Quad;
+                view.viewports.forEach(viewport => {
+                    if(viewport.camera) {
+                        viewport.camera.layers.enable(1);
+                    }
+                });
             }
         });
 

source/client/components/CVScene.ts

@@ -232,7 +232,7 @@ export default class CVScene extends CVNode
 
         this.cameras.forEach(camera => {
             const far = 4 * Math.max(orbitRadius, this.outs.boundingRadius.value);
-            const near = far / 1000.0;
+            const near = Math.min(far / 1000.0, this.outs.boundingRadius.value / 100.0);
             if(far < camera.ins.far.value || camera.ins.far.value < 2*this.setup.navigation.ins.maxOffset.value[2]) {
                 camera.ins.far.setValue(far);
                 camera.ins.near.setValue(near);