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

package/lib/engine-components/web/CursorFollow.d.ts

@@ -0,0 +1,12 @@
+import { Behaviour } from "../Component.js";
+export declare class CursorFollow extends Behaviour {
+    /**
+     * Damping for the movement, set to 0 for instant movement
+     * @default 0
+     */
+    damping: number;
+    private _distance;
+    updateDistance(): void;
+    /** @internal */
+    update(): void;
+}

package/lib/engine-components/web/CursorFollow.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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
+     */
+    damping = 0;
+    _distance = -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;
+        }
+    }
+}
+__decorate([
+    serializable()
+], CursorFollow.prototype, "damping", void 0);
+//# sourceMappingURL=CursorFollow.js.map

package/lib/engine-components/web/CursorFollow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/CursorFollow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,MAAM,OAAO,YAAa,SAAQ,SAAS;IAEvC;;;OAGG;IAEH,OAAO,GAAW,CAAC,CAAC;IAGZ,SAAS,GAAW,CAAC,CAAC,CAAC;IAC/B,cAAc;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACrG,CAAC;IAGD,gBAAgB;IAChB,MAAM;QACF,8DAA8D;QAC9D,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,yEAAyE;QACzE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QACvC,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC;QAE5C,iDAAiD;QACjD,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAC5E,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,SAAS,EAAE,CAAC;QAE7C,oDAAoD;QACpD,MAAM,WAAW,GAAG,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACpF,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE;YAClB,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YAC1C,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,CAAC,aAAa,GAAG,GAAG,CAAC;SACvC;aACI;YACD,IAAI,CAAC,UAAU,CAAC,aAAa,GAAG,WAAW,CAAC;SAC/C;IAEL,CAAC;CAEJ;AApCG;IADC,YAAY,EAAE;6CACK"}

package/lib/engine-components/web/ScrollFollow.d.ts

@@ -0,0 +1,27 @@
+import { Behaviour } from "../Component.js";
+export declare class ScrollFollow extends Behaviour {
+    /**
+     * Target object(s) to follow the scroll position of the page. If null, the main camera is used.
+     */
+    target: object[] | object | null;
+    /**
+     * Damping for the movement, set to 0 for instant movement
+     * @default 0
+     */
+    damping: number;
+    mode: "window";
+    /**
+     * Current scroll value in "pages" (0 = top of page, 1 = bottom of page)
+     */
+    get currentValue(): number;
+    private current_value;
+    private target_value;
+    /** @internal */
+    onEnable(): void;
+    /** @internal */
+    onDisable(): void;
+    /** @internal */
+    lateUpdate(): void;
+    private updateCurrentScroll;
+    private applyScroll;
+}

package/lib/engine-components/web/ScrollFollow.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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.
+     */
+    target = null;
+    /**
+     * Damping for the movement, set to 0 for instant movement
+     * @default 0
+     */
+    damping = 0;
+    mode = "window";
+    /**
+     * Current scroll value in "pages" (0 = top of page, 1 = bottom of page)
+     */
+    get currentValue() {
+        return this.current_value;
+    }
+    current_value = 0;
+    target_value = 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);
+        }
+    }
+    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;
+        }
+    };
+    applyScroll(target) {
+        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;
+        }
+    }
+}
+__decorate([
+    serializable([Behaviour, Object3D])
+], ScrollFollow.prototype, "target", void 0);
+__decorate([
+    serializable()
+], ScrollFollow.prototype, "damping", void 0);
+__decorate([
+    serializable()
+], ScrollFollow.prototype, "mode", void 0);
+//# sourceMappingURL=ScrollFollow.js.map

package/lib/engine-components/web/ScrollFollow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/ScrollFollow.ts"],"names":[],"mappings":"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"}

package/lib/engine-components/web/index.d.ts

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

package/lib/engine-components/web/index.js

@@ -0,0 +1,4 @@
+export * from "./Clickthrough.js";
+export * from "./CursorFollow.js";
+export * from "./ScrollFollow.js";
+//# sourceMappingURL=index.js.map

package/lib/engine-components/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/engine-components/web/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.9.0-alpha.4",
+  "version": "4.9.0-next.ce04b9f",
   "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": {
@@ -168,4 +168,4 @@
   "module": "lib/needle-engine.js",
   "typings": "lib/needle-engine.d.ts",
   "types": "lib/needle-engine.d.ts"
-}
+}

package/src/engine/codegen/register_types.ts

@@ -67,6 +67,7 @@ import { CameraTargetReachedEvent } from "../../engine-components/OrbitControls.
 import { OrbitControls } from "../../engine-components/OrbitControls.js";
 import { ParticleSystemRenderer } from "../../engine-components/particlesystem/ParticleSystem.js";
 import { ParticleSystem } from "../../engine-components/particlesystem/ParticleSystem.js";
+import { Attractor } from "../../engine-components/physics/Attractor.js";
 import { PlayerColor } from "../../engine-components/PlayerColor.js";
 import { Antialiasing } from "../../engine-components/postprocessing/Effects/Antialiasing.js";
 import { BloomEffect } from "../../engine-components/postprocessing/Effects/BloomEffect.js";
@@ -136,6 +137,9 @@ import { LookAt } from "../../engine-components/utils/LookAt.js";
 import { OpenURL } from "../../engine-components/utils/OpenURL.js";
 import { VideoPlayer } from "../../engine-components/VideoPlayer.js";
 import { Voip } from "../../engine-components/Voip.js";
+import { ClickThrough } from "../../engine-components/web/Clickthrough.js";
+import { CursorFollow } from "../../engine-components/web/CursorFollow.js";
+import { ScrollFollow } from "../../engine-components/web/ScrollFollow.js";
 import { Avatar } from "../../engine-components/webxr/Avatar.js";
 import { XRControllerFollow } from "../../engine-components/webxr/controllers/XRControllerFollow.js";
 import { XRControllerModel } from "../../engine-components/webxr/controllers/XRControllerModel.js";
@@ -219,6 +223,7 @@ TypeStore.add("CameraTargetReachedEvent", CameraTargetReachedEvent);
 TypeStore.add("OrbitControls", OrbitControls);
 TypeStore.add("ParticleSystemRenderer", ParticleSystemRenderer);
 TypeStore.add("ParticleSystem", ParticleSystem);
+TypeStore.add("Attractor", Attractor);
 TypeStore.add("PlayerColor", PlayerColor);
 TypeStore.add("Antialiasing", Antialiasing);
 TypeStore.add("BloomEffect", BloomEffect);
@@ -288,6 +293,9 @@ TypeStore.add("LookAt", LookAt);
 TypeStore.add("OpenURL", OpenURL);
 TypeStore.add("VideoPlayer", VideoPlayer);
 TypeStore.add("Voip", Voip);
+TypeStore.add("ClickThrough", ClickThrough);
+TypeStore.add("CursorFollow", CursorFollow);
+TypeStore.add("ScrollFollow", ScrollFollow);
 TypeStore.add("Avatar", Avatar);
 TypeStore.add("XRControllerFollow", XRControllerFollow);
 TypeStore.add("XRControllerModel", XRControllerModel);

package/src/engine/engine_physics_rapier.ts

@@ -164,13 +164,13 @@ export class RapierPhysics implements IPhysicsEngine {
         this.validate();
         const body = this.internal_getRigidbody(rigidbody);
         if (body) body.addForce(force, wakeup)
-        else console.warn("Rigidbody doesn't exist: can not apply force (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Physics Body doesn't exist: can not apply force (does your object with the Rigidbody have a collider?)");
     }
     addImpulse(rigidbody: IRigidbody, force: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rigidbody);
         if (body) body.applyImpulse(force, wakeup);
-        else console.warn("Rigidbody doesn't exist: can not apply impulse (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Physics Body doesn't exist: can not apply impulse (does your object with the Rigidbody have a collider?)");
     }
     getLinearVelocity(comp: IRigidbody | ICollider): Vec3 | null {
         this.validate();
@@ -206,14 +206,14 @@ export class RapierPhysics implements IPhysicsEngine {
         this.validate();
         const body = this.internal_getRigidbody(rb);
         if (body) body.applyImpulse(vec, wakeup);
-        else console.warn("Rigidbody doesn't exist: can not apply impulse (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Rigidbody doesn't exist: can not apply impulse (does your object with the Rigidbody have a collider?)");
     }
 
     wakeup(rb: IRigidbody) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
         if (body) body.wakeUp();
-        else console.warn("Rigidbody doesn't exist: can not wake up (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Rigidbody doesn't exist: can not wake up (does your object with the Rigidbody have a collider?)");
     }
     isSleeping(rb: IRigidbody) {
         this.validate();
@@ -224,13 +224,13 @@ export class RapierPhysics implements IPhysicsEngine {
         this.validate();
         const body = this.internal_getRigidbody(rb);
         if (body) body.setAngvel(vec, wakeup);
-        else console.warn("Rigidbody doesn't exist: can not set angular velocity (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Rigidbody doesn't exist: can not set angular velocity (does your object with the Rigidbody have a collider?)");
     }
     setLinearVelocity(rb: IRigidbody, vec: Vec3, wakeup: boolean) {
         this.validate();
         const body = this.internal_getRigidbody(rb);
         if (body) body.setLinvel(vec, wakeup);
-        else console.warn("Rigidbody doesn't exist: can not set linear velocity (does your object with the Rigidbody have a collider?)");
+        else if (this._isInitialized) console.warn("Rigidbody doesn't exist: can not set linear velocity (does your object with the Rigidbody have a collider?)");
     }
 
     private readonly context?: IContext;
@@ -273,7 +273,7 @@ export class RapierPhysics implements IPhysicsEngine {
             if (debugPhysics) console.trace("Loading rapier physics engine");
             const module = await MODULES.RAPIER_PHYSICS.load();
             // https://github.com/dimforge/rapier/issues/811
-            await module.init(); 
+            await module.init();
         }
         if (debugPhysics) console.log("Physics engine initialized, creating world...");
         this._world = new MODULES.RAPIER_PHYSICS.MODULE.World(this._gravity);
@@ -673,7 +673,7 @@ export class RapierPhysics implements IPhysicsEngine {
     }
 
     async addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, extraScale?: Vector3) {
-        
+
         // capture the geometry before waiting for phyiscs engine
         let geo = mesh.geometry;
         if (!geo) {
@@ -714,13 +714,13 @@ export class RapierPhysics implements IPhysicsEngine {
         }
 
         if (!collider.activeAndEnabled) return;
-        
+
 
         // let positions = geo.getAttribute("position").array as Float32Array;
         const indices = geo.index?.array as Uint32Array;
-        
+
         const scale = collider.gameObject.worldScale.clone();
-        if(extraScale) scale.multiply(extraScale);
+        if (extraScale) scale.multiply(extraScale);
 
         // scaling seems not supported yet https://github.com/dimforge/rapier/issues/243
         if (Math.abs(scale.x - 1) > 0.0001 || Math.abs(scale.y - 1) > 0.0001 || Math.abs(scale.z - 1) > 0.0001) {

package/src/engine-components/Animation.ts

@@ -130,6 +130,15 @@ export class Animation extends Behaviour implements IAnimationComponent {
         }
     }
 
+    get duration() {
+        if (this.actions) {
+            for (const action of this.actions) {
+                if (action.isRunning()) return action.getClip().duration;
+            }
+        }
+        return 0;
+    }
+
     private _tempAnimationClipBeforeGameObjectExisted: AnimationClip | null = null;
     /**
      * Get the first animation clip in the animations array

package/src/engine-components/EventTrigger.ts

@@ -1,5 +1,4 @@
 import { serializable } from "../engine/engine_serialization.js";
-import { EventSystem } from "./api.js";
 import { Behaviour } from "./Component.js"
 import { EventList } from "./EventList.js";
 import { EventType } from "./EventType.js"

package/src/engine-components/api.ts

@@ -56,6 +56,7 @@ export type { DropListenerNetworkEventArguments, DropListenerOnDropArguments } f
 export { type FitCameraOptions } from "./OrbitControls.js";
 export * from "./particlesystem/api.js"
 export * from "./splines/index.js";
+export * from "./web/index.js";
 
 // for correct type resolution in JSDoc
 import type { PhysicsMaterial } from "../engine/engine_physics.types.js";

package/src/engine-components/codegen/components.ts

@@ -115,6 +115,7 @@ export { InheritVelocityModule } from "../particlesystem/ParticleSystemModules.j
 export { SizeBySpeedModule } from "../particlesystem/ParticleSystemModules.js";
 export { ColorBySpeedModule } from "../particlesystem/ParticleSystemModules.js";
 export { ParticleSubEmitter } from "../particlesystem/ParticleSystemSubEmitter.js";
+export { Attractor } from "../physics/Attractor.js";
 export { PlayerColor } from "../PlayerColor.js";
 export { Antialiasing } from "../postprocessing/Effects/Antialiasing.js";
 export { BloomEffect } from "../postprocessing/Effects/BloomEffect.js";
@@ -202,6 +203,9 @@ export { LookAt } from "../utils/LookAt.js";
 export { OpenURL } from "../utils/OpenURL.js";
 export { VideoPlayer } from "../VideoPlayer.js";
 export { Voip } from "../Voip.js";
+export { ClickThrough } from "../web/Clickthrough.js";
+export { CursorFollow } from "../web/CursorFollow.js";
+export { ScrollFollow } from "../web/ScrollFollow.js";
 export { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";
 export { XRControllerModel } from "../webxr/controllers/XRControllerModel.js";

package/src/engine-components/physics/Attractor.ts

@@ -0,0 +1,35 @@
+import { Behaviour } from "../Component.js";
+import { Rigidbody } from "../RigidBody.js";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+
+
+
+export class Attractor extends Behaviour {
+
+    @serializable()
+    strength: number = 1;
+
+    @serializable()
+    radius: number = 2;
+
+    @serializable(Rigidbody)
+    targets: Rigidbody[] = [];
+
+
+    update() {
+        const wp = this.gameObject.worldPosition;
+        const factor = -this.strength * this.context.time.deltaTime;
+        this.targets.forEach(t => {
+            if(!t) return;
+            const dir = t.gameObject.worldPosition.sub(wp);
+            const length = dir.length();
+            if (length > this.radius) return;
+            let _factor = factor;
+            if (length > 1) _factor /= length * length;
+            else _factor /= Math.max(.05, length);
+            t.applyImpulse(dir.multiplyScalar(_factor));
+        })
+    }
+
+
+}

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

@@ -0,0 +1,60 @@
+import { NEPointerEvent } from "../../engine/engine_input.js";
+import { Behaviour } from "../Component.js";
+import { onStart } from "../../engine/engine_lifecycle_api.js";
+
+// Automatically add ClickThrough component if "clickthrough" attribute is present on the needle-engine element
+onStart(ctx => {
+    const attribute = ctx.domElement.getAttribute("clickthrough");
+    if (attribute !== null && attribute !== "0" && attribute !== "false") {
+        ctx.scene.addComponent(ClickThrough);
+    }
+});
+
+
+/**
+ * ClickThrough component allows pointer events to "click through" the 3D canvas to HTML elements behind it.  
+ * 
+ * This is useful if you have a transparent canvas overlaying HTML content and want to interact with the HTML content through the transparent areas of the canvas.  
+ * 
+ * Usage Options:
+ * - Add the ClickThrough component to any GameObject in your scene.
+ * - Alternatively, add the `clickthrough` attribute to the `<needle-engine>` HTML element (e.g. `<needle-engine clickthrough></needle-engine>`).
+ * 
+ * @link Example https://stackblitz.com/~/github.com/needle-engine/sample-3d-over-html
+ */
+export class ClickThrough extends Behaviour {
+    onEnable() {
+        // Register for pointer down and pointer move event
+        this.context.input.addEventListener('pointerdown', this.onPointerEvent);
+        this.context.input.addEventListener('pointermove', this.onPointerEvent, {
+            queue: 100,
+        });
+        window.addEventListener("touchend", this.onTouchEnd, { passive: true });
+    }
+    onDisable() {
+        this.context.input.removeEventListener('pointerdown', this.onPointerEvent);
+        this.context.input.removeEventListener('pointermove', this.onPointerEvent);
+        window.removeEventListener("touchend", this.onTouchEnd);
+        this.context.domElement.style.pointerEvents = 'all';
+    }
+    onPointerEnter() {
+        /** do nothing, necessary to raycast children */
+    }
+
+    private onPointerEvent = (evt: NEPointerEvent) => {
+        if (evt.pointerId > 0) return;
+        const intersections = evt.intersections;
+        // If we don't had any intersections during the 3D raycasting then we disable pointer events for the needle-engine element so that content BEHIND the 3D element can receive pointer events
+        if (intersections?.length <= 0) {
+            this.context.domElement.style.pointerEvents = 'none';
+        } else {
+            this.context.domElement.style.pointerEvents = 'all';
+        }
+    };
+
+    private onTouchEnd = (_evt: TouchEvent) => {
+        setTimeout(() => {
+            this.context.domElement.style.pointerEvents = 'all';
+        }, 100);
+    }
+}

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