@needle-tools/engine 4.11.0 → 4.11.1-next.0bef517

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

@@ -96,6 +96,7 @@ export class ScrollFollow extends Behaviour {
     @serializable()
     invert: boolean = false;
 
+
     /** 
      * **Experimental - might change in future updates**  
      * If set, the scroll position will be read from the specified element instead of the window.  
@@ -106,7 +107,7 @@ export class ScrollFollow extends Behaviour {
     htmlSelector: string | null = null;
 
     @serializable()
-    private mode: "window" = "window";
+    mode: "window" = "window";
 
     /**
      * Event fired when the scroll position changes
@@ -124,17 +125,19 @@ export class ScrollFollow extends Behaviour {
     private _current_value: number = 0;
     private _target_value: number = 0;
     private _appliedValue: number = -1;
+    private _needsUpdate = false;
+    private _firstUpdate = false;
 
+    awake() {
+        this._firstUpdate = true;
+    }
 
-    private _scrollStart: number = 0;
-    private _scrollEnd: number = 0;
-    private _scrollValue: number = 0;
-    private _scrollContainerHeight: number = 0;
 
     /** @internal */
     onEnable() {
         window.addEventListener("wheel", this.updateCurrentScrollValue, { passive: true });
         this._appliedValue = -1;
+        this._needsUpdate = true;
     }
 
     /** @internal */
@@ -148,7 +151,7 @@ export class ScrollFollow extends Behaviour {
         this.updateCurrentScrollValue();
 
         if (this._target_value >= 0) {
-            if (this.damping > 0) { // apply damping
+            if (this.damping > 0 && !this._firstUpdate) { // apply damping
                 this._current_value = Mathf.lerp(this._current_value, this._target_value, this.context.time.deltaTime / this.damping);
                 if (Math.abs(this._current_value - this._target_value) < 0.001) {
                     this._current_value = this._target_value;
@@ -159,9 +162,10 @@ export class ScrollFollow extends Behaviour {
             }
         }
 
-        // if (this._current_value !== this._appliedValue) 
+        if (this._needsUpdate || this._current_value !== this._appliedValue) 
         {
             this._appliedValue = this._current_value;
+            this._needsUpdate = false;
 
             let defaultPrevented = false;
             if (this.changed.listenerCount > 0) {
@@ -182,9 +186,6 @@ export class ScrollFollow extends Behaviour {
 
                 const value = this.invert ? 1 - this._current_value : this._current_value;
 
-                // const height = this._rangeEndValue - this._rangeStartValue;
-                // const pixelValue = this._rangeStartValue + value * height;
-
                 // apply scroll to target(s)
                 if (Array.isArray(this.target)) {
                     this.target.forEach(t => t && this.applyScroll(t, value));
@@ -197,21 +198,18 @@ export class ScrollFollow extends Behaviour {
                     console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%, targets [${Array.isArray(this.target) ? this.target.length : 1}]`);
                 }
             }
+
+            this._firstUpdate = false;
         }
     }
 
     private _lastSelectorValue: string | null = null;
     private _lastSelectorElement: Element | null = null;
-    /** Top y */
-    private _rangeStartValue: number = 0;
-    /** Bottom y */
-    private _rangeEndValue: number = 0;
 
     private updateCurrentScrollValue = () => {
 
         switch (this.mode) {
             case "window":
-
                 if (this.htmlSelector?.length) {
                     if (this.htmlSelector !== this._lastSelectorValue) {
                         this._lastSelectorElement = document.querySelector(this.htmlSelector);
@@ -219,26 +217,20 @@ export class ScrollFollow extends Behaviour {
                     }
                     if (this._lastSelectorElement) {
                         const rect = this._lastSelectorElement.getBoundingClientRect();
-
-                        this._scrollStart = rect.top + window.scrollY;
-                        this._scrollEnd = rect.height - window.innerHeight;
-                        this._scrollValue = -rect.top;
                         this._target_value = -rect.top / (rect.height - window.innerHeight);
-                        this._rangeStartValue = rect.top + window.scrollY;
-                        this._rangeEndValue = this._rangeStartValue + rect.height - window.innerHeight;
-                        this._scrollContainerHeight = rect.height;
                         break;
                     }
                 }
                 else {
-                    this._scrollStart = 0;
-                    this._scrollEnd = window.document.body.scrollHeight - window.innerHeight;
-                    this._scrollValue = window.scrollY;
-                    this._target_value = this._scrollValue / (this._scrollEnd || 1);
-                    this._rangeStartValue = 0;
-                    this._rangeEndValue = document.body.scrollHeight;
-                    this._scrollContainerHeight = window.innerHeight;
+                    if (window.document.body.scrollHeight <= window.innerHeight) {
+                        // If the page is not scrollable we can still increment the scroll value to allow triggering timelines etc.
+                    }
+                    else {
+                        const diff = window.document.body.scrollHeight - window.innerHeight;
+                        this._target_value = window.scrollY / (diff || 1);
+                    }
                 }
+
                 break;
         }
 
@@ -272,11 +264,12 @@ export class ScrollFollow extends Behaviour {
             target.intensity = value;
         }
         else if (target instanceof Object3D) {
+            const t = target as any;
             // When objects are assigned they're expected to move vertically based on scroll
-            if (target["needle:scrollbounds"] === undefined) {
-                target["needle:scrollbounds"] = getBoundingBox(target) || null;
+            if (t["needle:scrollbounds"] === undefined) {
+                t["needle:scrollbounds"] = getBoundingBox(target) || null;
             }
-            const bounds = target["needle:scrollbounds"] as Box3;
+            const bounds = t["needle:scrollbounds"] as Box3;
             if (bounds) {
                 // TODO: remap position to use upper screen edge and lower edge instead of center
                 target.position.y = -bounds.min.y - value * (bounds.max.y - bounds.min.y);
@@ -422,13 +415,18 @@ export class ScrollFollow extends Behaviour {
                     time += diff * weight;
                 }
             }
-            if (this.damping <= 0) {
+            if (this.damping <= 0 || this._firstUpdate) {
                 director.time = time;
             }
             else {
                 director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
             }
 
+            const delta = Math.abs(director.time - time);
+            if (delta > .001) { // if the time is > 1/100th of a second off we need another update
+                this._needsUpdate = true;
+            }
+
             if (debug && this.context.time.frame % 30 === 0) {
                 console.log(`[ScrollFollow ] Timeline ${director.name}: ${time.toFixed(3)}`, weightsArray.map(w => `[${w.name} ${(w.weight * 100).toFixed(0)}%]`).join(", "));
             }

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

@@ -1,4 +1,4 @@
-import { Camera, Matrix4, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
+import { Camera, Matrix4, PerspectiveCamera, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
@@ -13,6 +13,8 @@ import { Behaviour } from "../Component.js";
 const debugParam = getParam("debugviewbox");
 const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
 
+export type ViewBoxMode = "continuous" | "once";
+
 /**
  * This component can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.  
  * This is useful for example to frame a character or object in the center of the screen and ensure it is always fully visible. You can also animate or scale the viewbox to create zoom or framing effects.
@@ -36,6 +38,9 @@ const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
 @registerType
 export class ViewBox extends Behaviour {
 
+    /**
+     * All active ViewBox instances. The last one in the array is the currently active one.
+     */
     static readonly instances: ViewBox[] = [];
 
     /**
@@ -45,21 +50,39 @@ export class ViewBox extends Behaviour {
     @serializable()
     referenceFieldOfView: number = -1;
 
+    /**
+     * The mode determines if the viewbox should be applied once or continuously while it is the active viewbox.  
+     * Options:
+     * - "once": The viewbox will be applied once when it becomes the active viewbox. This is useful if you want to fit the view once and then allow the user to zoom or pan freely.
+     * - "continuous": The viewbox will be applied continuously while it is the active viewbox. This is useful if you animate or scale the viewbox over time.
+    */
+    @serializable()
+    get mode() { return this._mode; }
+    set mode(v: ViewBoxMode) {
+        if (v === this._mode) return;
+        this._mode = v;
+        if (v === "once") this._applyCount = 0;
+        if (debugParam || this.debug) console.debug("[ViewBox] Set mode:", v);
+    }
+    private _mode: ViewBoxMode = "continuous";
+
     /**
      * Enable debug logs and rendering for this component instance
      */
     @serializable()
     debug: boolean = false;
 
+    /** @internal */
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
         // register instance
         ViewBox.instances.push(this);
-
+        this._applyCount = 0;
         this.removeUpdateCallback();
         this.context.pre_render_callbacks.push(this.internalUpdate);
     }
 
+    /** @internal */
     onDisable(): void {
         if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
         // unregister instance
@@ -77,6 +100,7 @@ export class ViewBox extends Behaviour {
 
     private static readonly _tempProjectionMatrix: Matrix4 = new Matrix4();
     private static readonly _tempProjectionMatrixInverse: Matrix4 = new Matrix4();
+    private _applyCount = 0;
 
     private internalUpdate = () => {
         if (this.context.isInXR) return;
@@ -108,6 +132,11 @@ export class ViewBox extends Behaviour {
             return;
         }
 
+        if (this._applyCount >= 1 && this.mode === "once") {
+            return;
+        }
+        this._applyCount++;
+
         const domWidth = this.context.domWidth;
         const domHeight = this.context.domHeight;
 
@@ -129,7 +158,7 @@ export class ViewBox extends Behaviour {
         ViewBox._tempProjectionMatrix.copy(camera.projectionMatrix);
         ViewBox._tempProjectionMatrixInverse.copy(camera.projectionMatrixInverse);
         const view = camera.view;
-        const zoom = camera.zoom;
+        const cameraZoom = camera.zoom;
         const aspect = camera.aspect;
         const fov = camera.fov;
         // Set values to default so we can calculate the box size correctly
@@ -194,6 +223,7 @@ export class ViewBox extends Behaviour {
             width / diffWidth,
             height / diffHeight
         );
+        const zoom = scale / (height * .5);
         // console.log({ scale, width, height, boxWidth: boxWidth * camera.aspect, boxHeight, diffWidth, diffHeight, aspect: camera.aspect, distance })
         // this.context.focusRectSettings.zoom = 1.39;
         // if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
@@ -202,13 +232,13 @@ export class ViewBox extends Behaviour {
         vec.project(camera);
         this.context.focusRectSettings.offsetX = vec.x;
         this.context.focusRectSettings.offsetY = vec.y;
-        this.context.focusRectSettings.zoom = scale / (height * .5);
+        this.context.focusRectSettings.zoom = zoom;
         // if we don't have a focus rect yet, set it to the dom element
         if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
 
         // Reset values
         camera.view = view;
-        camera.zoom = zoom;
+        camera.zoom = cameraZoom;
         camera.aspect = aspect;
         camera.fov = fov;
         camera.projectionMatrix.copy(ViewBox._tempProjectionMatrix);