@needle-tools/engine 4.9.0-alpha.3 → 4.9.0-next.ce04b9f

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

@@ -0,0 +1,49 @@
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
+import { Behaviour } from "../Component.js";
+
+
+export class CursorFollow extends Behaviour {
+
+    /**
+     * Damping for the movement, set to 0 for instant movement
+     * @default 0
+     */
+    @serializable()
+    damping: number = 0;
+
+
+    private _distance: number = -1;
+    updateDistance() {
+        this._distance = this.gameObject.worldPosition.distanceTo(this.context.mainCamera.worldPosition);
+    }
+
+
+    /** @internal */
+    update() {
+        // continuously update distance in case camera or object moves
+        this.updateDistance();
+
+        // follow cursor in screenspace but maintain initial distance from camera
+        const cursor = this.context.input.mousePositionRC;
+        const camera = this.context.mainCamera;
+        const cameraPosition = camera.worldPosition;
+
+        // create ray from camera through cursor position
+        const rayDirection = getTempVector(cursor.x, cursor.y, 1).unproject(camera);
+        rayDirection.sub(cameraPosition).normalize();
+
+        // position object at initial distance along the ray
+        const newPosition = rayDirection.multiplyScalar(this._distance).add(cameraPosition);
+        if (this.damping > 0) {
+            const pos = this.gameObject.worldPosition;
+            pos.lerp(newPosition, this.context.time.deltaTime / this.damping);
+            this.gameObject.worldPosition = pos;
+        }
+        else {
+            this.gameObject.worldPosition = newPosition;
+        }
+
+    }
+
+}

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

@@ -0,0 +1,91 @@
+import { Object3D } from "three";
+import { serializable } from "../../engine/engine_serialization.js";
+import { Mathf } from "../../engine/engine_math.js";
+import { Behaviour } from "../Component.js";
+import { Animation, PlayableDirector } from "../api.js";
+
+
+
+export class ScrollFollow extends Behaviour {
+
+    /**
+     * Target object(s) to follow the scroll position of the page. If null, the main camera is used.
+     */
+    @serializable([Behaviour, Object3D])
+    target: object[] | object | null = null;
+
+    /**
+     * Damping for the movement, set to 0 for instant movement
+     * @default 0
+     */
+    @serializable()
+    damping: number = 0;
+
+    @serializable()
+    mode: "window" = "window";
+
+    /**
+     * Current scroll value in "pages" (0 = top of page, 1 = bottom of page)
+     */
+    get currentValue() {
+        return this.current_value;
+    }
+
+    private current_value: number = 0;
+    private target_value: number = 0;
+
+    /** @internal */
+    onEnable() {
+        window.addEventListener("wheel", this.updateCurrentScroll, { passive: true });
+    }
+
+    /** @internal */
+    onDisable() {
+        window.removeEventListener("wheel", this.updateCurrentScroll);
+    }
+
+    /** @internal */
+    lateUpdate() {
+
+        // apply damping if any
+        if (this.damping > 0) {
+            this.current_value = Mathf.lerp(this.current_value, this.target_value, this.context.time.deltaTime / this.damping);
+        }
+
+        // apply scroll to target(s)
+        if (Array.isArray(this.target)) {
+            this.target.forEach(t => t && this.applyScroll(t));
+        }
+        else if (this.target) {
+            this.applyScroll(this.target);
+        }
+
+    }
+
+
+    private updateCurrentScroll = () => {
+
+        switch (this.mode) {
+            case "window":
+                this.target_value = window.scrollY / (document.body.scrollHeight - window.innerHeight);
+                if (isNaN(this.target_value) || !isFinite(this.target_value)) this.target_value = 0;
+                break;
+        }
+
+        if (this.damping <= 0) {
+            this.current_value = this.target_value;
+        }
+
+    }
+
+    private applyScroll(target: object) {
+        if (target instanceof PlayableDirector) {
+            target.time = this.current_value * target.duration;
+            if (!target.isPlaying) target.evaluate();
+        }
+        else if (target instanceof Animation) {
+            target.time = this.current_value * target.duration;
+        }
+    }
+
+}

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

@@ -0,0 +1,3 @@
+export * from "./Clickthrough.js";
+export * from "./CursorFollow.js";
+export * from "./ScrollFollow.js";