Needle Engine 3.12.0-beta

Files changed (12) hide show

src/engine/debug/debug_overlay.ts +0 -2
src/engine/debug/debug.ts +9 -3
src/engine/engine_addressables.ts +18 -2
src/engine/engine_license.ts +40 -46
src/engine/engine_networking_utils.ts +10 -6
src/engine-components/ui/EventSystem.ts +4 -0
src/engine-components/timeline/index.ts +2 -1
src/engine-components/ParticleSystem.ts +19 -9
src/engine-components/ParticleSystemSubEmitter.ts +3 -0
src/engine-components/timeline/PlayableDirector.ts +33 -1
src/engine-components/export/usdz/ThreeUSDZExporter.ts +2 -1
src/engine-components/timeline/TimelineTracks.ts +63 -53

src/engine/debug/debug_overlay.ts CHANGED Viewed

@@ -6,9 +6,7 @@
 let hide = false;
 if (getParam("noerrors")) hide = true;
-const arContainerClassName = "ar";
 const globalErrorContainerKey = "needle_engine_global_error_container";
-const locationRegex = new RegExp("    at .+\/(.+?\.ts)", "g");
 export enum LogType {
     Log,

src/engine/debug/debug.ts CHANGED Viewed

@@ -6,16 +6,22 @@
 export { LogType, setAllowOverlayMessages };
 /** Displays a debug message on screen for a certain amount of time */
-export function showBalloonMessage(text: string, logType: LogType = LogType.Log) {
+export function showBalloonMessage(text: string, logType: LogType = LogType.Log): void {
     addLog(logType, text);
 }
 /** Displays a warning message on screen for a certain amount of time */
-export function showBalloonWarning(text: string) {
+export function showBalloonWarning(text: string): void {
     showBalloonMessage(text, LogType.Warn);
 }
+let _manuallySetDevEnvironment: boolean | undefined;
 /** True when the application runs on a local url */
-export function isDevEnvironment(){
+export function isDevEnvironment(): boolean {
+    if (_manuallySetDevEnvironment !== undefined) return _manuallySetDevEnvironment;
     return isLocalNetwork();
+}
+export function setDevEnvironment(val: boolean): void {
+    _manuallySetDevEnvironment = val;
 }

src/engine/engine_addressables.ts CHANGED Viewed

@@ -6,7 +6,7 @@
 import { registerPrefabProvider, syncInstantiate } from "./engine_networking_instantiate.js";
 import { download } from "./engine_web_api.js";
 import { getLoader } from "./engine_gltf.js";
-import { SourceIdentifier } from "./engine_types.js";
+import { IComponent, SourceIdentifier } from "./engine_types.js";
 import { destroy, instantiate, InstantiateOptions, isDestroyed } from "./engine_gameobject.js";
 import { IGameObject } from "./engine_types.js";
@@ -63,7 +63,23 @@
 export class AssetReference {
-    static getOrCreate(sourceId: SourceIdentifier, url: string, context: Context): AssetReference {
+    /**
+     * Get an AssetReference for a URL to be easily loaded. AssetReferences are cached so calling this method multiple times with the same arguments will always return the same AssetReference.
+     */
+    static getOrCreate(sourceId: SourceIdentifier | IComponent, url: string, context?: Context): AssetReference {
+        if (typeof sourceId === "string") {
+            if (!context) {
+                context = Context.Current;
+                if (!context)
+                    throw new Error("Context is required when sourceId is a string. When you call this method from a component you can call it with \"getOrCreate(this, url)\" where \"this\" is the component.");
+            }
+        }
+        else {
+            context = sourceId.context as Context;
+            sourceId = sourceId.sourceId!;
+        }
         const fullPath = resolveUrl(sourceId, url);
         if (debug) console.log("GetOrCreate Addressable from", sourceId, url, "FinalPath=", fullPath);
         const addressables = context.addressables;

src/engine/engine_license.ts CHANGED Viewed

@@ -48,11 +48,10 @@
     if (NEEDLE_ENGINE_LICENSE_TYPE === "basic") {
         try {
             const licenseUrl = "https://engine.needle.tools/licensing/check?location=" + encodeURIComponent(window.location.href) + "&version=" + VERSION + "&generator=" + encodeURIComponent(GENERATOR);
-            const res = await fetch(licenseUrl).catch();
-            if (debug) {
-                const text = await res?.text();
-                console.log("Response: \"" + text + "\"\n", res);
-            }
+            const res = await fetch(licenseUrl, {
+                method: "GET",
+                mode: "no-cors",
+            }).catch();
             if (res?.status === 200) {
                 applicationIsForbidden = false;
                 if (debug) console.log("License check succeeded");
@@ -134,7 +133,7 @@
 const licenseElementIdentifier = "needle-license-element";
-const licenseDuration = 5000;
+const licenseDuration = 10000;
 const licenseDelay = 200;
 async function onNonCommercialVersionDetected(ctx: IContext) {
@@ -171,7 +170,7 @@
     const textElement = document.createElement("div");
     textElement.classList.add("text");
     // if (!isMobileDevice())
-    //     textElement.innerHTML = "Needle Engine<br/><span class=\"non-commercial\">Non Commercial</span>";
+    // textElement.innerHTML = "Made with Needle";
     licenseElement.appendChild(textElement);
     licenseElement.title = "Needle Engine";
@@ -181,18 +180,20 @@
         globalThis.open("https://needle.tools", "_blank");
     });
-    const removeDelay = licenseDuration + licenseDelay;
-    setTimeout(() => {
-        clearInterval(interval);
-        licenseElement?.remove();
-        style?.remove();
-        // show the logo every x minutes
-        const intervalInMinutes = 5;
+    if (hasIndieLicense()) {
+        const removeDelay = licenseDuration + licenseDelay;
         setTimeout(() => {
-            if (ctx.domElement.parentNode)
-                insertNonCommercialUseHint(ctx);
-        }, 1000 * 60 * intervalInMinutes)
-    }, removeDelay);
+            clearInterval(interval);
+            licenseElement?.remove();
+            style?.remove();
+            // show the logo every x minutes
+            const intervalInMinutes = 5;
+            setTimeout(() => {
+                if (ctx.domElement.parentNode)
+                    insertNonCommercialUseHint(ctx);
+            }, 1000 * 60 * intervalInMinutes)
+        }, removeDelay);
+    }
 }
 let lastLogTime = 0;
@@ -251,45 +252,44 @@
     ${selector}:hover {
         cursor: pointer;
-        transition: all 0.1s ease-in-out !important;
+        transition: all 0.3s ease-in-out !important;
     }
     ${selector}, ${selector} > * {
         display: inline-block !important;
         visibility: visible !important;
-        background: none !important;
         border: none !important;
         text-decoration: none !important;
         vertical-align: middle !important;
     }
-    @keyframes license-animation {
+    @keyframes license-animation-text {
         1% {
             opacity: 0;
         }
         2.5% {
             opacity: 1;
         }
-        98% {
+        100% {
             opacity: 1;
         }
-        99% {
-            opacity: 0;
-        }
     }
     ${selector} .text {
+        position: relative;
+        display: inline-block;
         opacity: 0;
-        animation: license-animation;
-        animation-iteration-count: 1;
+        animation: license-animation-text;
         animation-duration: ${(licenseDuration / 1000)}s;
         animation-delay: ${licenseDelay / 1000}s;
-        animation-easing: ease-in-out;
-        mix-blend-mode: difference;
-        color: rgb(0, 0, 0);
-        mix-blend-mode: difference;
+        animation-fill-mode: forwards;
         line-height: 1em;
         margin-left: -3px;
-        text-shadow: 0 0 2px rgba(200,200,200, .5);
+        color: rgba(20,20,20,1);
+        font-size: 14px;
+        font-weight: 800;
+        background-color: rgba(220, 220, 220, .8);
+        // padding: .51em .6em .43em .6em;
+        border-radius: .7em;
     }
     ${selector} .text .non-commercial {
@@ -303,34 +303,30 @@
             transform: translate(0px, 10px);
             pointer-events: none;
         }
-        8% {
+        3% {
             transform: translate(0, 0px);
             pointer-events: all;
             opacity: 1;
             transform: scale(1.1)
         }
-        20% {
+        12% {
             transform: scale(1)
         }
-        90% {
+        100% {
             opacity: 1;
             pointer-events: all;
             transform: scale(1)
         }
-        100% {
-            pointer-events: none;
-            opacity: 0;
-        }
     }
     ${selector} .logo {
         opacity: 0;
         pointer-events: none;
         animation: logo-animation;
-        animation-iteration-count: 1;
         animation-duration: ${(licenseDuration / 1000)}s;
         animation-delay: ${licenseDelay / 1000}s;
         animation-easing: ease-in-out;
+        animation-fill-mode: forwards;
     }
     ${selector} .logo {
@@ -339,12 +335,12 @@
         border-radius: 50% !important;
         background-color: transparent !important;
         padding: 5px !important;
-        transition: all 0.1s ease-in-out !important;
+        transition: all 0.2s ease-in-out !important;
     }
     ${selector}:hover .logo {
-        transition: all 0.1s ease-in-out !important;
-        transform: scale(1.1) !important;
+        transition: all 0.2s ease-in-out !important;
+        transform: scale(1.02) !important;
         cursor: pointer !important;
     }
     `
@@ -354,9 +350,7 @@
 async function sendUsageMessageToAnalyticsBackend() {
     try {
-        const analyticsBackendUrlForward = "https://urls.needle.tools/analytics-endpoint-v2";
-        const res = await fetch(analyticsBackendUrlForward);
-        const analyticsUrl = await res.text();
+        const analyticsUrl = "https://needle-engine-analytics-v2-r26roub2hq-lz.a.run.app";
         if (analyticsUrl) {
             if (debug) console.log("Analytics backend url", analyticsUrl);

src/engine/engine_networking_utils.ts CHANGED Viewed

@@ -1,14 +1,11 @@
-// const testUrls = ["https://192.254.384.122:3000/", "https://my-glitch-page.glitch.me/"]
-// for (let url of testUrls)
-//     console.log("Testing url: " + url, isLocalNetwork(url));
 const localNetworkResults = new Map<string, boolean>();
 export function isLocalNetwork(hostname = globalThis.location?.hostname) {
-    if(localNetworkResults.has(hostname)) return localNetworkResults.get(hostname)!;
-    const isLocalNetwork = new RegExp("[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}|localhost", "gm").test(hostname);
+    if (localNetworkResults.has(hostname)) return localNetworkResults.get(hostname)!;
+    const isLocalNetwork = new RegExp("([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\:[0-9]{1,5})|localhost").test(hostname);
     localNetworkResults.set(hostname, isLocalNetwork);
     if (isLocalNetwork === true) return true;
     return false;
@@ -16,4 +13,11 @@
 export function isHostedOnGlitch() {
     return window.location.hostname.includes("glitch.me");
-}
+}
+// const testUrls = [
+//     "https://192.254.384.122:3000/",
+//     "https://my-glitch-page.glitch.me/",
+// ]
+// for (let url of testUrls)
+//     console.log("Testing url: " + url, isLocalNetwork(url));

src/engine-components/ui/EventSystem.ts CHANGED Viewed

@@ -257,7 +257,11 @@
         // if the pointer didnt change, theoretically we would need to check the camera as well
         if (!args.isDown && !args.isUp && !args.isClicked && !args.isPressed && !args.positionDelta.x && !args.positionDelta.y)
+        {
+            this.objectsHoveredThisFrame.length = 0;
+            this.objectsHoveredThisFrame.push(...this.objectsHoveredLastFrame);
             return
+        }
         if(debug) console.log("EventSystem: raycast");
         const hits = this.performRaycast(null);

src/engine-components/timeline/index.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from "./SignalAsset.js"
 export * from "./TimelineTracks.js"
-export * from "./TimelineModels.js"
+export * from "./TimelineModels.js"
+export { type ITimelineAnimationCallbacks as ITimelineAnimationOverride } from "./PlayableDirector.js"

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -11,7 +11,7 @@
 import { AxesHelper, BufferGeometry, Color, Material, Matrix4, Mesh, MeshStandardMaterial, Object3D, OneMinusDstAlphaFactor, PlaneGeometry, Quaternion, Sprite, SpriteMaterial, Vector3, Vector4 } from "three";
 import { getWorldPosition, getWorldQuaternion, getWorldScale, setWorldScale } from "../engine/engine_three_utils.js";
 import { assign } from "../engine/engine_serialization_core.js";
-import { BatchedParticleRenderer, Behavior, BillBoardSettings, BurstParameters, ColorGenerator, ConstantColor, ConstantValue, EmissionState, EmitSubParticleSystem, EmitterShape, FunctionColorGenerator, FunctionJSON, FunctionValueGenerator, IntervalValue, MeshSettings, Particle, ParticleEmitter, ParticleSystem as _ParticleSystem, ParticleSystemParameters, PointEmitter, RecordState, RenderMode, RotationGenerator, SizeOverLife, TrailBatch, TrailParticle, TrailSettings, ValueGenerator } from "three.quarks";
+import { BatchedRenderer, BatchedParticleRenderer, Behavior, BillBoardSettings, BurstParameters, ColorGenerator, ConstantColor, ConstantValue, EmissionState, EmitSubParticleSystem, EmitterShape, FunctionColorGenerator, FunctionJSON, FunctionValueGenerator, IntervalValue, MeshSettings, Particle, ParticleEmitter, ParticleSystem as _ParticleSystem, ParticleSystemParameters, PointEmitter, RecordState, RenderMode, RotationGenerator, SizeOverLife, TrailBatch, TrailParticle, TrailSettings, ValueGenerator } from "three.quarks";
 import { createFlatTexture } from "../engine/engine_shaders.js";
 import { Mathf } from "../engine/engine_math.js";
 import { Context } from "../engine/engine_setup.js";
@@ -269,6 +269,8 @@
     }
     toJSON() { throw new Error("Method not implemented."); }
     clone(): Behavior { throw new Error("Method not implemented."); }
+    reset() {
+    }
 }
 const $startFrame = Symbol("startFrame")
@@ -346,7 +348,9 @@
         let size = 1;
         if (this.system.sizeOverLifetime.enabled)
             size *= this.system.sizeOverLifetime.evaluate(age01, undefined, particle[$sizeLerpFactor]).x;
-        const scaleFactor = this.system.worldScale.x / this.system.cameraScale;
+        let scaleFactor = 1;
+        if (this.system.renderer.renderMode !== ParticleSystemRenderMode.Mesh)
+            scaleFactor = this.system.worldScale.x / this.system.cameraScale;
         particle.size = particle.startSize * size * scaleFactor;
         if (this.system.localspace) {
             const scale = getLocalSimulationScale(this.system, localScaleVec3);
@@ -544,6 +548,10 @@
         this.emission = new ParticleSystemEmissionOverTime(this.system);
     }
+    get prewarm() { return false; } // force disable three.quark prewarm, we have our own!
+    get material() { return this.system.renderer.getMaterial(this.system.trails.enabled) as Material;}
+    get layers() { return this.system.gameObject.layers; }
     update() {
         this.emission.update();
     }
@@ -575,9 +583,9 @@
         switch (this.system.renderer.renderMode) {
             case ParticleSystemRenderMode.Billboard: return RenderMode.BillBoard;
             case ParticleSystemRenderMode.Stretch: return RenderMode.StretchedBillBoard;
-            case ParticleSystemRenderMode.HorizontalBillboard: return RenderMode.LocalSpace;
-            case ParticleSystemRenderMode.VerticalBillboard: return RenderMode.LocalSpace;
-            case ParticleSystemRenderMode.Mesh: return RenderMode.LocalSpace;
+            case ParticleSystemRenderMode.HorizontalBillboard: return RenderMode.BillBoard;
+            case ParticleSystemRenderMode.VerticalBillboard: return RenderMode.BillBoard;
+            case ParticleSystemRenderMode.Mesh: return RenderMode.Mesh;
         }
         return RenderMode.BillBoard;
     }
@@ -587,7 +595,7 @@
     };
     get speedFactor() { return this.system.main.simulationSpeed; }
     get texture(): THREE.Texture {
-        const mat = this.system.renderer.getMaterial(this.system.trails.enabled);
+        const mat = this.material;
         if (mat && mat["map"]) {
             const tex = mat["map"]!;
             tex.premultiplyAlpha = false;
@@ -811,7 +819,7 @@
     }
     private _renderer!: ParticleSystemRenderer;
-    private _batchSystem?: BatchedParticleRenderer;
+    private _batchSystem?: BatchedRenderer;
     private _particleSystem?: _ParticleSystem;
     private _interface!: ParticleSystemInterface;
@@ -882,13 +890,14 @@
         this._batchSystem.name = this.gameObject.name;
         this._container.add(this._batchSystem);
         this._interface = new ParticleSystemInterface(this);
-        this._particleSystem = new _ParticleSystem(this._batchSystem, this._interface);
+        this._particleSystem = new _ParticleSystem(this._interface);
         this._particleSystem.addBehavior(new SizeBehaviour(this));
         this._particleSystem.addBehavior(new ColorBehaviour(this));
         this._particleSystem.addBehavior(new TextureSheetAnimationBehaviour(this));
         this._particleSystem.addBehavior(new RotationBehaviour(this));
         this._particleSystem.addBehavior(new VelocityBehaviour(this));
         this._particleSystem.addBehavior(new TrailBehaviour(this));
+        this._batchSystem.addSystem(this._particleSystem);
         const emitter = this._particleSystem.emitter;
         this.context.scene.add(emitter);
@@ -946,7 +955,7 @@
         const timeToSimulate = Math.min(Math.max(duration, lifetime) / Math.max(.01, this.main.simulationSpeed), maxDurationToPrewarm);
         const framesToSimulate = Math.ceil(timeToSimulate / dt);
         const startTime = Date.now();
-        if (debug || this.name === "Snow")
+        if (debug)
             console.log(`Particles ${this.name} - Prewarm for ${framesToSimulate} frames (${timeToSimulate} sec). Duration: ${duration}, Lifetime: ${lifetime}`);
         for (let i = 0; i < framesToSimulate; i++) {
             if (this.currentParticles >= this.maxParticles) break;
@@ -993,6 +1002,7 @@
     private lastMaterialVersion: number = -1;
     private onUpdate() {
         const mat = this.renderer.getMaterial(this.trails.enabled);
         if (mat && mat.version != this.lastMaterialVersion && this._particleSystem) {
             this.lastMaterialVersion = mat.version;

src/engine-components/ParticleSystemSubEmitter.ts CHANGED Viewed

@@ -68,6 +68,9 @@
     toJSON(): any {
     }
+    reset() {
+    }
     private run(particle: Particle) {
         if (this.subSystem.currentParticles >= this.subSystem.main.maxParticles)
             return;

src/engine-components/timeline/PlayableDirector.ts CHANGED Viewed

@@ -8,7 +8,7 @@
 import * as Tracks from "./TimelineTracks.js";
 import { deepClone, delay, getParam } from '../../engine/engine_utils.js';
 import { GuidsMap } from '../../engine/engine_types.js';
-import { Object3D } from 'three';
+import { Object3D, Quaternion, Vector3 } from 'three';
 import { isLocalNetwork } from '../../engine/engine_networking_utils.js';
 import { FrameEvent } from '../../engine/engine_context.js';
@@ -597,4 +597,36 @@
         }
     }
+    /** Experimental support for overriding timeline animation data (position or rotation) */
+    readonly animationCallbackReceivers: ITimelineAnimationCallbacks[] = [];
+    /** Experimental: Receive callbacks for timeline animation. Allows modification of final value */
+    registerAnimationCallback(receiver: ITimelineAnimationCallbacks) { this.animationCallbackReceivers.push(receiver); }
+    /** Experimental: Unregister callbacks for timeline animation. Allows modification of final value */
+    unregisterAnimationCallback(receiver: ITimelineAnimationCallbacks) {
+        const index = this.animationCallbackReceivers.indexOf(receiver);
+        if (index === -1) return;
+        this.animationCallbackReceivers.splice(index, 1);
+    }
 }
+/**
+ * Experimental interface for receiving timeline animation callbacks. Register at the PlayableDirector
+ */
+export interface ITimelineAnimationCallbacks {
+    /**
+    * @param director The director that is playing the timeline
+    * @param target The target object that is being animated
+    * @param time The current time of the timeline
+    * @param rotation The evaluated rotation of the target object at the current time
+     */
+    onTimelineRotation?(director: PlayableDirector, target: Object3D, time: number, rotation: Quaternion);
+    /**
+    * @param director The director that is playing the timeline
+    * @param target The target object that is being animated
+    * @param time The current time of the timeline
+    * @param position The evaluated position of the target object at the current time
+     */
+    onTimelinePosition?(director: PlayableDirector, target: Object3D, time: number, position: Vector3);
+}

src/engine-components/export/usdz/ThreeUSDZExporter.ts CHANGED Viewed

@@ -1189,6 +1189,7 @@
 		const normalScale = material instanceof MeshStandardMaterial ? (material.normalScale ? material.normalScale.x * 2 : 2) : 2;
 		const normalScaleValueString = normalScale.toFixed( PRECISION );
 		const normalBiasString = (-1 * (normalScale / 2)).toFixed( PRECISION );
+		const normalBiasZString = (1 - normalScale).toFixed( PRECISION );
 		return `
         ${needsTextureTransform ? `def Shader "Transform2d_${mapType}" (
@@ -1216,7 +1217,7 @@
 			` : `` }
 			${needsNormalScaleAndBias ? `
 			float4 inputs:scale = (${normalScaleValueString}, ${normalScaleValueString}, ${normalScaleValueString}, 1)
-			float4 inputs:bias = (${normalBiasString}, ${normalBiasString}, ${normalBiasString}, 0)
+			float4 inputs:bias = (${normalBiasString}, ${normalBiasString}, ${normalBiasZString}, 0)
 			` : `` }
 			token inputs:wrapS = "${ WRAPPINGS[ texture.wrapS ] }"
 			token inputs:wrapT = "${ WRAPPINGS[ texture.wrapT ] }"

src/engine-components/timeline/TimelineTracks.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { PlayableDirector } from "./PlayableDirector.js";
 import * as Models from "./TimelineModels.js";
-import * as THREE from 'three';
 import { GameObject } from "../Component.js";
 import { Context } from "../../engine/engine_setup.js";
 import { SignalReceiver } from "./SignalAsset.js";
-import { AnimationClip, Quaternion, Vector3 } from "three";
+import { Audio, AudioListener, AnimationAction, AnimationClip, AnimationMixer, AudioLoader, Euler, Object3D, Quaternion, QuaternionKeyframeTrack, Vector3, VectorKeyframeTrack } from "three";
 import { getParam, resolveUrl } from "../../engine/engine_utils.js";
 import { AudioSource } from "../AudioSource.js";
 import { Animator } from "../Animator.js"
@@ -88,17 +87,17 @@
 class AnimationClipOffsetData {
     clip: AnimationClip;
-    rootPositionOffset?: THREE.Vector3;
-    rootQuaternionOffset?: THREE.Quaternion;
+    rootPositionOffset?: Vector3;
+    rootQuaternionOffset?: Quaternion;
     get hasOffsets(): boolean { return this.rootPositionOffset !== undefined || this.rootQuaternionOffset !== undefined; }
     // not necessary
-    rootStartPosition?: THREE.Vector3;
-    rootEndPosition?: THREE.Vector3;
-    rootStartQuaternion?: THREE.Quaternion;
-    rootEndQuaternion?: THREE.Quaternion;
+    rootStartPosition?: Vector3;
+    rootEndPosition?: Vector3;
+    rootStartQuaternion?: Quaternion;
+    rootEndQuaternion?: Quaternion;
-    constructor(action: THREE.AnimationAction) {
+    constructor(action: AnimationAction) {
         const clip = action.getClip();
         this.clip = clip;
         const root = action.getRoot();
@@ -109,20 +108,20 @@
         for (const track of clip.tracks) {
             if (track.times.length <= 0) continue;
             if (track.name.endsWith(rootPositionTrackName)) {
-                this.rootStartPosition = new THREE.Vector3().fromArray(track.values, 0);
-                this.rootEndPosition = new THREE.Vector3().fromArray(track.values, track.values.length - 3);
+                this.rootStartPosition = new Vector3().fromArray(track.values, 0);
+                this.rootEndPosition = new Vector3().fromArray(track.values, track.values.length - 3);
                 this.rootPositionOffset = this.rootEndPosition.clone().sub(this.rootStartPosition);
                 if (debug)
                     console.log(this.rootPositionOffset);
                 // this.rootPositionOffset.set(0, 0, 0);
             }
             else if (track.name.endsWith(rootRotationTrackName)) {
-                this.rootStartQuaternion = new THREE.Quaternion().fromArray(track.values, 0);
-                this.rootEndQuaternion = new THREE.Quaternion().fromArray(track.values, track.values.length - 4);
+                this.rootStartQuaternion = new Quaternion().fromArray(track.values, 0);
+                this.rootEndQuaternion = new Quaternion().fromArray(track.values, track.values.length - 4);
                 this.rootQuaternionOffset = this.rootEndQuaternion.clone().multiply(this.rootStartQuaternion);
                 if (debug) {
-                    const euler = new THREE.Euler().setFromQuaternion(this.rootQuaternionOffset);
+                    const euler = new Euler().setFromQuaternion(this.rootQuaternionOffset);
                     console.log("ROT", euler);
                 }
             }
@@ -135,11 +134,11 @@
     models: Array<Models.ClipModel> = [];
     trackOffset?: Models.TrackOffset;
-    target?: THREE.Object3D;
+    target?: Object3D;
     /** The AnimationMixer, should be shared with the animator if an animator is bound */
-    mixer?: THREE.AnimationMixer;
-    clips: Array<THREE.AnimationClip> = [];
-    actions: Array<THREE.AnimationAction> = [];
+    mixer?: AnimationMixer;
+    clips: Array<AnimationClip> = [];
+    actions: Array<AnimationAction> = [];
     /** holds data/info about clips differences */
     private _actionOffsets: Array<AnimationClipOffsetData> = [];
@@ -185,7 +184,7 @@
         // TODO: this currently assumes that there is only one root always that has offsets so it only does create the interpolator for the first track which might be incorrect. In general it would probably be better if we would not create additional tracks but apply the offsets for these objects elsewhere!?
         if (!foundPositionTrack || !foundRotationTrack) {
-            const root = this.mixer?.getRoot() as THREE.Object3D;
+            const root = this.mixer?.getRoot() as Object3D;
             const track = clip.tracks[0];
             const indexOfProperty = track.name.lastIndexOf(".");
             const baseName = track.name.substring(0, indexOfProperty);
@@ -202,7 +201,7 @@
                     if (debug) console.warn("Create position track", objName, targetObj);
                     // apply initial local position so it doesnt get flipped or otherwise changed
                     const pos = targetObj.position;
-                    const track = new THREE.VectorKeyframeTrack(trackName, [0, clip.duration], [pos.x, pos.y, pos.z, pos.x, pos.y, pos.z]);
+                    const track = new VectorKeyframeTrack(trackName, [0, clip.duration], [pos.x, pos.y, pos.z, pos.x, pos.y, pos.z]);
                     clip.tracks.push(track);
                     this.createPositionInterpolant(clip, clipModel, track);
                 }
@@ -210,7 +209,7 @@
                     const trackName = clip.tracks[0].name.substring(0, indexOfProperty) + ".quaternion";
                     if (debug) console.warn("Create quaternion track", objName, targetObj);
                     const rot = targetObj.quaternion;
-                    const track = new THREE.QuaternionKeyframeTrack(trackName, [0, clip.duration], [rot.x, rot.y, rot.z, rot.w, rot.x, rot.y, rot.z, rot.w]);
+                    const track = new QuaternionKeyframeTrack(trackName, [0, clip.duration], [rot.x, rot.y, rot.z, rot.w, rot.x, rot.y, rot.z, rot.w]);
                     clip.tracks.push(track);
                     this.createRotationInterpolant(clip, clipModel, track);
                 }
@@ -224,7 +223,7 @@
         if (debug) console.log(this.models);
         // the object being animated
-        if (this.mixer) this.target = this.mixer.getRoot() as THREE.Object3D;
+        if (this.mixer) this.target = this.mixer.getRoot() as Object3D;
         else console.warn("No mixer was assigned to animation track")
         for (const action of this.actions) {
@@ -265,13 +264,13 @@
             const pos = this.trackOffset.position as any;
             if (pos) {
                 if (!pos.isVector3) {
-                    this.trackOffset.position = new THREE.Vector3(pos.x, pos.y, pos.z);
+                    this.trackOffset.position = new Vector3(pos.x, pos.y, pos.z);
                 }
             }
             const rot = this.trackOffset.rotation as any;
             if (rot) {
                 if (!rot.isQuaternion) {
-                    this.trackOffset.rotation = new THREE.Quaternion(rot.x, rot.y, rot.z, rot.w);
+                    this.trackOffset.rotation = new Quaternion(rot.x, rot.y, rot.z, rot.w);
                 }
             }
         }
@@ -279,20 +278,20 @@
     private _useclipOffsets: boolean = true;
-    private _totalOffsetPosition: THREE.Vector3 = new THREE.Vector3();
-    private _totalOffsetRotation: THREE.Quaternion = new THREE.Quaternion();
-    private _totalOffsetPosition2: THREE.Vector3 = new THREE.Vector3();
-    private _totalOffsetRotation2: THREE.Quaternion = new THREE.Quaternion();
-    private _summedPos = new THREE.Vector3();
-    private _tempPos = new THREE.Vector3();
-    private _summedRot = new THREE.Quaternion();
-    private _tempRot = new THREE.Quaternion();
-    private _clipRotQuat = new THREE.Quaternion();
+    private _totalOffsetPosition: Vector3 = new Vector3();
+    private _totalOffsetRotation: Quaternion = new Quaternion();
+    private _totalOffsetPosition2: Vector3 = new Vector3();
+    private _totalOffsetRotation2: Quaternion = new Quaternion();
+    private _summedPos = new Vector3();
+    private _tempPos = new Vector3();
+    private _summedRot = new Quaternion();
+    private _tempRot = new Quaternion();
+    private _clipRotQuat = new Quaternion();
     evaluate(time: number) {
         if (this.track.muted) return;
         if (!this.mixer) return;
         this.bind();
         // if (this._animator && this.director.isPlaying && this.director.weight > 0) this._animator.enabled = false;
@@ -349,7 +348,7 @@
                             break;
                         case Models.ClipExtrapolation.Loop:
                             // TODO: this is not correct yet
-                            time += model.start;
+                            time += model.start;
                             handleLoop = true;
                             break;
                         default:
@@ -442,7 +441,7 @@
                                 tempPos.applyQuaternion(this._clipRotQuat);
                             if (offsets.rootQuaternionOffset) {
-                                // console.log(new THREE.Euler().setFromQuaternion(offsets.rootQuaternionOffset).y.toFixed(2));
+                                // console.log(new Euler().setFromQuaternion(offsets.rootQuaternionOffset).y.toFixed(2));
                                 tempRot.copy(offsets.rootQuaternionOffset);
                                 summedRot.multiply(tempRot);
                             }
@@ -455,7 +454,7 @@
                     totalRotation.multiply(summedRot);
                     if (clipModel.position)
-                        summedPos.add(clipModel.position as THREE.Vector3);
+                        summedPos.add(clipModel.position as Vector3);
                     totalPosition.add(summedPos);
                 }
@@ -484,9 +483,9 @@
     private createRotationInterpolant(_clip: AnimationClip, _clipModel: Models.AnimationClipModel, track: any) {
         const createInterpolantOriginal = track.createInterpolant.bind(track);
-        const quat: THREE.Quaternion = new THREE.Quaternion();
+        const quat: Quaternion = new Quaternion();
         this.ensureTrackOffsets();
-        const trackOffsetRot: THREE.Quaternion | null = this.trackOffset?.rotation as Quaternion;
+        const trackOffsetRot: Quaternion | null = this.trackOffset?.rotation as Quaternion;
         track.createInterpolant = () => {
             const createdInterpolant: any = createInterpolantOriginal();
             const interpolate = createdInterpolant.evaluate.bind(createdInterpolant);
@@ -495,13 +494,19 @@
                 const res = interpolate(time);
                 quat.set(res[0], res[1], res[2], res[3]);
                 quat.premultiply(this._totalOffsetRotation);
-                // console.log(new THREE.Euler().setFromQuaternion(quat).y.toFixed(2));
+                // console.log(new Euler().setFromQuaternion(quat).y.toFixed(2));
                 if (trackOffsetRot) quat.premultiply(trackOffsetRot);
+                if (this.director.animationCallbackReceivers) {
+                    for (const rec of this.director.animationCallbackReceivers) {
+                        rec?.onTimelineRotation?.call(rec, this.director, this.target!, time, quat);
+                    }
+                }
                 res[0] = quat.x;
                 res[1] = quat.y;
                 res[2] = quat.z;
                 res[3] = quat.w;
                 return res;
             };
             return createdInterpolant;
@@ -510,10 +515,10 @@
     private createPositionInterpolant(clip: AnimationClip, clipModel: Models.AnimationClipModel, track: any) {
         const createInterpolantOriginal = track.createInterpolant.bind(track);
-        const currentPosition: THREE.Vector3 = new THREE.Vector3();
+        const currentPosition: Vector3 = new Vector3();
         this.ensureTrackOffsets();
-        const trackOffsetRot: THREE.Quaternion | null = this.trackOffset?.rotation as Quaternion;
-        const trackOffsetPos: THREE.Vector3 | null = this.trackOffset?.position as Vector3;
+        const trackOffsetRot: Quaternion | null = this.trackOffset?.rotation as Quaternion;
+        const trackOffsetPos: Vector3 | null = this.trackOffset?.position as Vector3;
         let startOffset: Vector3 | null | undefined = undefined;
         track.createInterpolant = () => {
             const createdInterpolant: any = createInterpolantOriginal();
@@ -540,6 +545,11 @@
                     currentPosition.y += trackOffsetPos.y;
                     currentPosition.z += trackOffsetPos.z;
                 }
+                if (this.director.animationCallbackReceivers) {
+                    for (const rec of this.director.animationCallbackReceivers) {
+                        rec?.onTimelinePosition?.call(rec, this.director, this.target!, time, currentPosition);
+                    }
+                }
                 res[0] = currentPosition.x;
                 res[1] = currentPosition.y;
                 res[2] = currentPosition.z;
@@ -556,12 +566,12 @@
 export class AudioTrackHandler extends TrackHandler {
     models: Array<Models.ClipModel> = [];
-    listener!: THREE.AudioListener;
-    audio: Array<THREE.Audio> = [];
+    listener!: AudioListener;
+    audio: Array<Audio> = [];
     audioContextTimeOffset: Array<number> = [];
     lastTime: number = 0;
-    private _audioLoader: THREE.AudioLoader | null = null;
+    private _audioLoader: AudioLoader | null = null;
     private getAudioFilePath(path: string) {
         // TODO: this should be the timeline asset location probably which MIGHT be different
@@ -578,7 +588,7 @@
     }
     addModel(model: Models.ClipModel) {
-        const audio = new THREE.Audio(this.listener);
+        const audio = new Audio(this.listener as any);
         this.audio.push(audio);
         this.models.push(model);
     }
@@ -653,7 +663,7 @@
                 else {
                     const targetOffset = model.clipIn + (time - model.start) * model.timeScale;
                     // seems it's non-trivial to get the right time from audio sources;
-                    // https://github.com/mrdoob/three.js/blob/master/src/audio/Audio.js#L170
+                    // https://github.com/mrdoob/js/blob/master/src/audio/Audio.js#L170
                     const currentTime = audio.context.currentTime - audio["_startedAt"] + audio.offset;
                     const diff = Math.abs(targetOffset - currentTime);
@@ -720,9 +730,9 @@
         AudioTrackHandler._audioBuffers.clear();
     }
-    private handleAudioLoading(model: Models.ClipModel, audio: THREE.Audio): Promise<AudioBuffer | null> | null {
+    private handleAudioLoading(model: Models.ClipModel, audio: Audio): Promise<AudioBuffer | null> | null {
         if (!this._audioLoader) {
-            this._audioLoader = new THREE.AudioLoader();
+            this._audioLoader = new AudioLoader();
         }
         // TODO: maybe we should cache the loaders / buffers here by path
         const path = this.getAudioFilePath(model.asset.clip);
@@ -861,7 +871,7 @@
                 const clipTime = this.getClipTime(time, model);
                 if (asset.controlActivation) {
-                    const obj = asset.sourceObject as THREE.Object3D;
+                    const obj = asset.sourceObject as Object3D;
                     obj.visible = true;
                 }
@@ -881,7 +891,7 @@
             else {
                 const previousActiveAsset = this._previousActiveModel?.asset as Models.ControlClipModel;
                 if (asset.controlActivation) {
-                    const obj = asset.sourceObject as THREE.Object3D;
+                    const obj = asset.sourceObject as Object3D;
                     if (previousActiveAsset?.sourceObject !== obj)
                         obj.visible = false;
                 }