@needle-tools/engine 4.11.0-next.c7baa24 → 4.11.0-next.cc37c71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.11.0-next.c7baa24",
+  "version": "4.11.0-next.cc37c71",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {

package/src/engine-components/OrbitControls.ts

@@ -711,8 +711,10 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
 
         if (this._controls) {
-            if (this.debugLog)
-                this._controls.domElement = this.context.renderer.domElement;
+            if (this.debugLog) this._controls.domElement = this.context.renderer.domElement;
+
+            const viewZoomFactor = 1 / (this.context.focusRectSettings?.zoom || 1);
+
             this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent && !this.context.isInXR && !this._activePointerEvents.some(e => e.used);
             this._controls.keys = this.enableKeys ? defaultKeys : disabledKeys;
             this._controls.autoRotate = this.autoRotate;
@@ -723,6 +725,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this._controls.enableDamping = this.enableDamping;
             this._controls.dampingFactor = this.dampingFactor;
             this._controls.enablePan = this.enablePan;
+            this._controls.panSpeed = viewZoomFactor;
             this._controls.enableRotate = this.enableRotate;
             this._controls.minAzimuthAngle = this.minAzimuthAngle;
             this._controls.maxAzimuthAngle = this.maxAzimuthAngle;

package/src/engine-components/splines/SplineWalker.ts

@@ -1,5 +1,5 @@
 
-import { Object3D } from "three"
+import { Object3D, Vector3 } from "three"
 
 import { Mathf } from "../../engine/engine_math.js";
 import { serializeable } from "../../engine/engine_serialization_decorator.js";
@@ -7,7 +7,10 @@ import { Behaviour } from "../Component.js";
 import { SplineContainer } from "./Spline.js";
 
 /**
- * Moves an object along a spline. Use this with a SplineContainer component.
+ * Moves an object along a spline.   
+ * Use this with a SplineContainer component.
+ * 
+ * - Example http://samples.needle.tools/splines
  */
 export class SplineWalker extends Behaviour {
 
@@ -17,18 +20,35 @@ export class SplineWalker extends Behaviour {
     @serializeable(SplineContainer)
     spline: SplineContainer | null = null;
 
-    /** The object to move along the spline. If object is undefined then the spline walker will use the gameObject the component has been added to 
+    /** 
+     * The object to move along the spline.   
+     * If object is undefined then the spline walker will use it's own object (gameObject).  
+     * If object is null the spline walker will not move any object.
      * @default undefined
     */
     @serializeable(Object3D)
     object?: Object3D | null = undefined;
 
-    /** The object to look at while moving along the spline 
+
+
+    /**
+     * If true the object will rotate to look in the direction of the spline while moving along it.
+     * @default true
+     */
+    @serializeable()
+    useLookAt = true;
+
+    /** 
+     * The object to look at while moving along the spline.   
+     * If null the object will look in the direction of the spline.   
+     * This can be disabled by setting useLookAt to false.
      * @default null
     */
     @serializeable(Object3D)
     lookAt: Object3D | null = null;
-    
+
+
+
     /**
      * When clamp is set to true, the position01 value will be clamped between 0 and 1 and the object will not loop the spline.
      * @default false
@@ -36,7 +56,10 @@ export class SplineWalker extends Behaviour {
     @serializeable()
     clamp: boolean = false;
 
-    /** The current position on the spline. The value ranges from 0 (start of the spline curve) to 1 (end of the spline curve)
+    /**   
+     * The current position on the spline. The value ranges from 0 (start of the spline curve) to 1 (end of the spline curve)  
+     * 
+     * When setting this value, the position will be updated in the next frame.
      * @default 0
      */
     // @type float
@@ -46,7 +69,7 @@ export class SplineWalker extends Behaviour {
     }
     set position01(v: number) {
         this._position01 = v;
-        this.updateFromPosition();
+        this._needsUpdate = true;
     }
 
     /** Resets the position to 0 */
@@ -68,25 +91,60 @@ export class SplineWalker extends Behaviour {
     @serializeable()
     duration: number = 10;
 
+    /**
+     * The strength with which the object is pulled to the spline.  
+     * This can be used to create a "rubber band" effect when the object is moved away from the spline by other forces.  
+     * A value of 0 means no pull, a value of 1 means the object is always on the spline.  
+     * @default 1
+     */
+    pullStrength: number = 1;
+
 
     // #region internal
 
     private _position01: number = 0;
+    private _needsUpdate = false;
 
     /** @internal */
     start() {
-        if(this.object === undefined) this.object = this.gameObject;
+        if (this.object === undefined) this.object = this.gameObject;
         this.updateFromPosition();
     }
 
+    /** @internal */
+    onEnable(): void {
+        window.addEventListener("pointerdown", this.onUserInput, { passive: true });
+        window.addEventListener("wheel", this.onUserInput, { passive: true });
+    }
+    /** @internal */
+    onDisable(): void {
+        window.removeEventListener("pointerdown", this.onUserInput);
+        window.removeEventListener("wheel", this.onUserInput);
+    }
+    private onUserInput = () => {
+        if (this.object?.contains(this.context.mainCamera)) {
+            this._needsUpdate = false;
+            this._performedUpdates += 999;
+        }
+    }
+
+    /** @internal */
     update() {
         if (this.autoRun) {
+            this._needsUpdate = true;
             this._position01 += this.context.time.deltaTime / this.duration;
+        }
+
+        if (this._needsUpdate) {
+            this._needsUpdate = false;
             this.updateFromPosition();
         }
     }
 
-
+    /**
+     * Updates the position of the object based on the current position01 value.  
+     * @internal
+     */
     private updateFromPosition() {
         if (!this.spline || !this.spline.curve) return;
         if (!this.object) return;
@@ -96,11 +154,38 @@ export class SplineWalker extends Behaviour {
 
         const t = this._position01 >= 1 ? 1 : this._position01 % 1;
         const pt = this.spline.getPointAt(t);
-        this.object.worldPosition = pt;
-        if (!this.lookAt) {
-            const tan = this.spline.getTangentAt(t);
-            this.object.lookAt(pt.add(tan));
+
+        if (this.pullStrength >= 1) {
+            this.object.worldPosition = pt;
+        }
+        else {
+            if (this._position01 !== this._lastPosition01) {
+                this._performedUpdates = 0;
+            }
+            this._requiredUpdates = Math.round(100 / this.pullStrength);
+            if (this._performedUpdates < this._requiredUpdates) {
+                const wp = this.object.worldPosition;
+                this._performedUpdates++;
+                const pull = Mathf.clamp01(this.pullStrength);
+                const newPosition = this.object.worldPosition = wp.lerp(pt, pull * (this.context.time.deltaTime / .3));
+                this._lastPositionVector.copy(newPosition);
+                this._needsUpdate = true;
+            }
         }
-        else this.object.lookAt(this.lookAt.worldPosition);
+
+        if (this.useLookAt) {
+            if (!this.lookAt) {
+                const tan = this.spline.getTangentAt(t);
+                this.object.lookAt(pt.add(tan));
+            }
+            else this.object.lookAt(this.lookAt.worldPosition);
+        }
+
+        this._lastPosition01 = this._position01;
     }
+
+    private _lastPosition01 = 0;
+    private _requiredUpdates: number = 0;
+    private _performedUpdates: number = 0;
+    private _lastPositionVector = new Vector3();
 }

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

@@ -1,3 +1,4 @@
+import { Vector2 } from "three";
 import { NEPointerEvent } from "../../engine/engine_input.js";
 import { onStart } from "../../engine/engine_lifecycle_api.js";
 import { addAttributeChangeCallback } from "../../engine/engine_utils.js";
@@ -45,12 +46,14 @@ export class ClickThrough extends Behaviour {
         this.context.input.addEventListener('pointermove', this.onPointerEvent, {
             queue: 100,
         });
+        window.addEventListener("touchstart", this.onTouchStart, { passive: true });
         window.addEventListener("touchend", this.onTouchEnd, { passive: true });
         this._previousPointerEvents = this.context.domElement.style.pointerEvents;
     }
     onDisable() {
         this.context.input.removeEventListener('pointerdown', this.onPointerEvent);
         this.context.input.removeEventListener('pointermove', this.onPointerEvent);
+        window.removeEventListener("touchstart", this.onTouchStart);
         window.removeEventListener("touchend", this.onTouchEnd);
         this.context.domElement.style.pointerEvents = this._previousPointerEvents;
     }
@@ -69,9 +72,33 @@ export class ClickThrough extends Behaviour {
         }
     };
 
+
+
+    // #region Touch hack
+
+    private _touchDidHitAnything = false;
+    
+    private onTouchStart = (_evt: TouchEvent) => {
+
+        const touch = _evt.touches[0];
+        if (!touch) return;
+
+        const ndx = touch.clientX / window.innerWidth * 2 - 1;
+        const ndy = -(touch.clientY / window.innerHeight) * 2 + 1;
+        // console.log(ndx, ndy);
+        const hits = this.context.physics.raycast({
+            screenPoint: new Vector2(ndx, ndy),
+        })
+        if (hits.length > 0) {
+            this._touchDidHitAnything = true;
+        }
+    }
+
     private onTouchEnd = (_evt: TouchEvent) => {
+        const _didHit = this._touchDidHitAnything;
+        this._touchDidHitAnything = false;
         setTimeout(() => {
-            this.context.domElement.style.pointerEvents = 'all';
+            if (_didHit) this.context.domElement.style.pointerEvents = 'all';
         }, 100);
     }
 }

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
@@ -126,11 +127,6 @@ export class ScrollFollow extends Behaviour {
     private _appliedValue: number = -1;
 
 
-    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 });
@@ -159,8 +155,7 @@ export class ScrollFollow extends Behaviour {
             }
         }
 
-        // if (this._current_value !== this._appliedValue) 
-        {
+        if (this._current_value !== this._appliedValue) {
             this._appliedValue = this._current_value;
 
             let defaultPrevented = false;
@@ -182,9 +177,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));
@@ -202,16 +194,11 @@ export class ScrollFollow extends Behaviour {
 
     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 +206,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 +253,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);

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);