@needle-tools/engine 4.10.0-next.f5ce0ae → 4.10.1

package/src/engine-components/web/ViewBox.ts

@@ -1,4 +1,4 @@
-import { Camera, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
+import { Camera, Matrix4, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
@@ -17,6 +17,22 @@ const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
  * This component can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.  
  * 
  * Add the ViewBox to an object into your scene
+ * 
+ * @link [Example on needle.run](https://viewbox-demo-z23hmxbz2gkayo-z1nyzm6.needle.run/)
+ * @link [Scrollytelling Demo using animated Viewbox](https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/)   
+ * @link [Example on Stackblitz](https://stackblitz.com/edit/needle-engine-view-box-example)
+ * 
+ * @example Add a Viewbox component to an object in your scene
+ * ```ts
+  const viewBox = new Object3D();
+  viewBox.scale.set(0, 0, 0);
+  viewBox.addComponent(ViewBox, { debug: true });
+  scene.add(viewBox);
+ * ```
+  
+ * @category Camera
+ * @group Components
+ * @component
  */
 @registerType
 export class ViewBox extends Behaviour {
@@ -25,10 +41,10 @@ export class ViewBox extends Behaviour {
 
     /**
      * The reference field of view is used to calculate the box size. This should usually be the same as your camera's fov.
-     * @default undefined (meaning it will use the camera fov on the first frame)
+     * @default -1 (meaning it will use the camera fov on the first frame)
      */
     @serializable()
-    referenceFieldOfView: number | undefined = undefined;
+    referenceFieldOfView: number = -1;
 
     /**
      * Enable debug logs and rendering for this component instance
@@ -40,6 +56,9 @@ export class ViewBox extends Behaviour {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
         // register instance
         ViewBox.instances.push(this);
+
+        this.removeUpdateCallback();
+        this.context.pre_render_callbacks.push(this.internalUpdate);
     }
 
     onDisable(): void {
@@ -48,11 +67,21 @@ export class ViewBox extends Behaviour {
         const idx = ViewBox.instances.indexOf(this);
         if (idx !== -1) ViewBox.instances.splice(idx, 1);
         this._projectedBoxElement?.remove();
+        this.removeUpdateCallback();
     }
 
-    onBeforeRender(): void {
+    private removeUpdateCallback() {
+        // remove prerender callback
+        const cbIdx = this.context.pre_render_callbacks.indexOf(this.internalUpdate);
+        if (cbIdx !== -1) this.context.pre_render_callbacks.splice(cbIdx, 1);
+    }
+
+    private static readonly _tempProjectionMatrix: Matrix4 = new Matrix4();
+    private static readonly _tempProjectionMatrixInverse: Matrix4 = new Matrix4();
+
+    private internalUpdate = () => {
         if (this.context.isInXR) return;
-        if (this.destroyed) return;
+        if (this.destroyed || !this.activeAndEnabled) return;
         const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
         if (!isActive) {
             if (debugParam || this.debug) {
@@ -70,8 +99,9 @@ export class ViewBox extends Behaviour {
             return;
         }
 
-        if (this.referenceFieldOfView === undefined) {
+        if (this.referenceFieldOfView === undefined || this.referenceFieldOfView === -1) {
             this.referenceFieldOfView = camera.fov;
+            console.debug("[ViewBox] No referenceFieldOfView set, using camera fov:", this.referenceFieldOfView);
         }
 
         if (this.referenceFieldOfView === undefined || this.referenceFieldOfView <= 0) {
@@ -82,8 +112,6 @@ export class ViewBox extends Behaviour {
         const domWidth = this.context.domWidth;
         const domHeight = this.context.domHeight;
 
-        let rectPosX = 0;
-        let rectPosY = 0;
         let rectWidth = domWidth;
         let rectHeight = domHeight;
         let diffWidth = 1;
@@ -91,9 +119,6 @@ export class ViewBox extends Behaviour {
         // use focus rect if available
         const focusRectSize = this.context.focusRectSize;
         if (focusRectSize) {
-            // console.log(focusRectSize)
-            rectPosX = focusRectSize.x;
-            rectPosY = focusRectSize.y;
             rectWidth = focusRectSize.width;
             rectHeight = focusRectSize.height;
             diffWidth = domWidth / rectWidth;
@@ -101,10 +126,14 @@ export class ViewBox extends Behaviour {
         }
 
 
+        // Copy the projection matrix and restore values so we can reset it later
+        ViewBox._tempProjectionMatrix.copy(camera.projectionMatrix);
+        ViewBox._tempProjectionMatrixInverse.copy(camera.projectionMatrixInverse);
         const view = camera.view;
         const zoom = camera.zoom;
         const aspect = camera.aspect;
         const fov = camera.fov;
+        // Set values to default so we can calculate the box size correctly
         camera.view = null;
         camera.zoom = 1;
         camera.fov = this.referenceFieldOfView;
@@ -128,7 +157,7 @@ export class ViewBox extends Behaviour {
             const positionDirection = getTempVector(direction);
             positionDirection.y *= .00000001; // stay on horizontal plane mostly
             positionDirection.normalize();
-            const lengthToMove = (boxSizeMax - distance); 
+            const lengthToMove = (boxSizeMax - distance);
             const newPosition = cameraPosition.add(positionDirection.multiplyScalar(lengthToMove));
             camera.worldPosition = newPosition.lerp(cameraPosition, 1 - this.context.time.deltaTime);
         }
@@ -183,7 +212,8 @@ export class ViewBox extends Behaviour {
         camera.zoom = zoom;
         camera.aspect = aspect;
         camera.fov = fov;
-        // camera.updateProjectionMatrix();
+        camera.projectionMatrix.copy(ViewBox._tempProjectionMatrix);
+        camera.projectionMatrixInverse.copy(ViewBox._tempProjectionMatrixInverse);
 
 
         // BACKLOG: some code for box scale of an object (different component)

package/src/engine-components/webxr/WebARSessionRoot.ts

@@ -465,6 +465,7 @@ export class WebARSessionRoot extends Behaviour {
             return;
         }
         else {
+            // @ts-ignore
             const anchor = await hit.createAnchor(session.viewerPose!.transform);
             // make sure the session is still active
             if (session.running && anchor) {