@needle-tools/engine 4.8.7-next.e134730 → 4.8.8-next.5537a55

package/src/engine/engine_animation.ts

@@ -2,6 +2,7 @@ import { AnimationAction, AnimationClip, AnimationMixer, Object3D, PropertyBindi
 
 import type { Context } from "./engine_context.js";
 import { GLTF, IAnimationComponent, Model } from "./engine_types.js";
+import { TypeStore } from "./engine_typestore.js";
 
 /**
  * Registry for animation related data. Use {@link registerAnimationMixer} to register an animation mixer instance.  
@@ -88,12 +89,15 @@ export class AnimationUtils {
      * This method will look for objects in the scene that have animations and assign them to the correct objects.  
      * @param file The GLTF file to assign the animations from
      */
-    static assignAnimationsFromFile(file: Pick<Model, "animations" | "scene">, opts?: { createAnimationComponent(obj: Object3D, animation: AnimationClip): IAnimationComponent }) {
+    static autoplayAnimations(file: Object3D | Pick<Model, "animations" | "scene">): Array<IAnimationComponent> | null {
         if (!file || !file.animations) {
             console.debug("No animations found in file");
-            return;
+            return null;
         }
 
+        const scene = "scene" in file ? file.scene : file as Object3D;
+        const animationComponents = new Array<IAnimationComponent>();
+
         for (let i = 0; i < file.animations.length; i++) {
             const animation = file.animations[i];
             if (!animation.tracks || animation.tracks.length <= 0) {
@@ -103,12 +107,12 @@ export class AnimationUtils {
             for (const t in animation.tracks) {
                 const track = animation.tracks[t];
                 const parsedPath = PropertyBinding.parseTrackName(track.name);
-                let obj = PropertyBinding.findNode(file.scene, parsedPath.nodeName);
+                let obj = PropertyBinding.findNode(scene, parsedPath.nodeName);
                 if (!obj) {
                     const objectName = track["__objectName"] ?? track.name.substring(0, track.name.indexOf("."));
                     // let obj = gltf.scene.getObjectByName(objectName);
                     // this finds unnamed objects that still have tracks targeting them
-                    obj = file.scene.getObjectByProperty('uuid', objectName);
+                    obj = scene.getObjectByProperty('uuid', objectName);
 
                     if (!obj) {
                         // console.warn("could not find " + objectName, animation, gltf.scene);
@@ -116,20 +120,23 @@ export class AnimationUtils {
                     }
                 }
 
-                let animationComponent = findAnimationGameObjectInParent(obj);
+                let animationComponent = findAnimationGameObjectInParent(obj) || findAnimationGameObjectInParent(scene);
                 if (!animationComponent) {
-                    if (!opts?.createAnimationComponent) {
-                        console.warn("No AnimationComponent found in parent hierarchy of object and no 'createAnimationComponent' callback was provided in options.")
-                        continue;
+                    const anim = TypeStore.get("Animation");
+                    animationComponent = scene.addComponent(anim);
+                    if (!animationComponent) {
+                        console.error("Failed creating Animation component: No 'Animation' component found in TypeStore");
+                        break;
                     }
-                    animationComponent = opts.createAnimationComponent(file.scene, animation);
-                    obj.addComponent(animationComponent);
                 }
+                animationComponents.push(animationComponent);
                 if (animationComponent.addClip) {
                     animationComponent.addClip(animation);
                 }
             }
         }
+        return animationComponents;
+
         function findAnimationGameObjectInParent(obj): IAnimationComponent | null {
             if (!obj) return null;
             const components = obj.userData?.components;

package/src/engine/engine_assetdatabase.ts

@@ -61,7 +61,7 @@ export function disposeObjectResources(obj: object | null | undefined) {
         return;
     }
 
-    if(typeof obj === "object") {
+    if (typeof obj === "object") {
         obj[$disposed] = true;
     }
 
@@ -79,8 +79,8 @@ export function disposeObjectResources(obj: object | null | undefined) {
         disposeObjectResources(obj.bindMatrixInverse);
         disposeObjectResources(obj.customDepthMaterial);
         disposeObjectResources(obj.customDistanceMaterial);
-        obj.geometry = null;
-        obj.material = null;
+        obj.geometry = {};
+        obj.material = {};
         obj.visible = false;
     }
     else if (obj instanceof Mesh) {
@@ -88,8 +88,8 @@ export function disposeObjectResources(obj: object | null | undefined) {
         disposeObjectResources(obj.material);
         disposeObjectResources(obj.customDepthMaterial);
         disposeObjectResources(obj.customDistanceMaterial);
-        obj.geometry = null;
-        obj.material = null;
+        obj.geometry = {};
+        obj.material = {};
         obj.visible = false;
     }
     else if (obj instanceof BufferGeometry) {
@@ -175,8 +175,8 @@ function free(obj: any) {
 
 export function __internalNotifyObjectDestroyed(obj: Object3D) {
     if (obj instanceof Mesh || obj instanceof SkinnedMesh) {
-        obj.material = null;
-        obj.geometry = null;
+        obj.material = {};
+        obj.geometry = {};
     }
 }
 

package/src/engine/engine_camera.ts

@@ -1,5 +1,6 @@
-import { Camera, Object3D } from "three";
+import { Camera, HemisphereLightHelper, Object3D, PerspectiveCamera, Vector2, WebGLRenderer } from "three";
 
+import { Mathf } from "./engine_math.js";
 import type { ICameraController } from "./engine_types.js";
 
 
@@ -37,4 +38,42 @@ export function useForAutoFit(obj: Object3D): boolean {
  */
 export function setAutoFitEnabled(obj: Object3D, enabled: boolean): void {
     obj[autofit] = enabled;
+}
+
+
+
+
+export type FocusRect = DOMRect | Element | { x: number, y: number, width: number, height: number };
+
+let rendererRect: DOMRect | undefined = undefined;
+const overlapRect = { x: 0, y: 0, width: 0, height: 0 };
+
+export function updateCameraFocusRect(focusRect: FocusRect, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
+
+    if (focusRect instanceof Element) {
+        focusRect = focusRect.getBoundingClientRect();
+    }
+    rendererRect = renderer.domElement.getBoundingClientRect();
+
+    const rect = overlapRect;
+    rect.x = focusRect.x;
+    rect.y = focusRect.y;
+    rect.width = focusRect.width;
+    rect.height = focusRect.height;
+
+    rect.x -= rendererRect.x;
+    rect.y -= rendererRect.y;
+
+    const targetX = rect.width / -2 - (rect.x - (rendererRect.width / 2));
+    const targetY = rect.height / -2 - (rect.y - (rendererRect.height / 2));
+
+    const view = camera.view;
+
+    let offsetX = view?.offsetX || 0;
+    let offsetY = view?.offsetY || 0;
+    offsetX = Mathf.lerp(offsetX, targetX, dt);
+    offsetY = Mathf.lerp(offsetY, targetY, dt);
+
+    camera.setViewOffset(rendererRect.width, rendererRect.height, offsetX, offsetY, rendererRect.width, rendererRect.height);
+    camera.updateProjectionMatrix();
 }

package/src/engine/engine_context.ts

@@ -18,6 +18,7 @@ import { Addressables } from './engine_addressables.js';
 import { AnimationsRegistry } from './engine_animation.js';
 import { Application } from './engine_application.js';
 import { AssetDatabase } from './engine_assetdatabase.js';
+import { FocusRect, updateCameraFocusRect } from './engine_camera.js';
 import { VERSION } from './engine_constants.js';
 import { ContextEvent, ContextRegistry } from './engine_context_registry.js';
 import { WaitForPromise } from './engine_coroutine.js';
@@ -1371,6 +1372,20 @@ export class Context implements IContext {
 		this.internalUpdatePhysics(steps);
 	}
 
+
+
+	/**
+	 * Set a rect or dom element. The camera center will be moved to the center of the rect.  
+	 * This is useful if you have Needle Engine embedded in a HTML layout and while you want the webgl background to fill e.g. the whole screen you want to move the camera center to free space.  
+	 * For that you can simply pass in the rect or HMTL div that you want the camera to center on.
+	 */
+	public setCameraFocusRect(rect: FocusRect | null) {
+		this._focusRect = rect;
+	}
+	get focusRect() { return this._focusRect; }
+	private _focusRect: FocusRect | null = null;
+
+
 	private _lastTimestamp = 0;
 	private _accumulatedTime = 0;
 	private _dispatchReadyAfterFrame = false;
@@ -1421,7 +1436,7 @@ export class Context implements IContext {
 
 		Context.Current = this;
 		this.time.update();
-		
+
 		if (debugframerate) console.log("FPS", (this.time.smoothedFps).toFixed(0));
 
 
@@ -1498,6 +1513,11 @@ export class Context implements IContext {
 
 		if (this.isVisibleToUser || this.runInBackground) {
 
+			if (this._focusRect) {
+				if (this.mainCamera instanceof PerspectiveCamera)
+					updateCameraFocusRect(this._focusRect, this.time.deltaTime / .05, this.mainCamera, this.renderer);
+			}
+
 			this._currentFrameEvent = FrameEvent.OnBeforeRender;
 
 			// should we move these callbacks in the regular three onBeforeRender events?

package/src/engine/engine_gameobject.ts

@@ -166,9 +166,9 @@ export function destroy(instance: Object3D | Component, recursive: boolean = tru
         setDestroyed(obj, true);
         if (dispose) {
             disposeObjectResources(obj);
+            // This needs to be called after disposing because it removes the references to resources
+            __internalRemoveReferences(obj);
         }
-        // This needs to be called after disposing because it removes the references to resources
-        __internalRemoveReferences(obj);
     }
     destroyed_objects.length = 0;
     destroyed_components.length = 0;

package/src/engine/engine_loaders.callbacks.ts

@@ -98,6 +98,7 @@ export namespace NeedleEngineModelLoader {
      *     }
      *     return null;
      * });
+     * ```
      */
     export function onCreateCustomModelLoader(callback: CustomLoaderCallback, opts?: CustomLoaderOptions) {
         const entry = { name: opts?.name, priority: opts?.priority ?? 0, callback };

package/src/engine/engine_loaders.ts

@@ -61,7 +61,7 @@ export async function onCreateLoader(url: string, context: Context): Promise<Cus
     switch (type) {
         case "unsupported":
             return null;
-            
+
         default:
         case "unknown":
             {
@@ -287,15 +287,6 @@ async function onAfterLoaded(loader: Loader | CustomLoader, context: Context, gl
         gltfId = gltfId.split("?")[0];
     }
 
-    // assign animations of loaded glTF to all scenes
-    if ("scenes" in model) {
-        for (const scene of model.scenes) {
-            if (scene && !scene.animations?.length) {
-                scene.animations = [...model.animations];
-            }
-        }
-    }
-
     // E.g. fbx material cleanup
     postprocessLoadedFile(loader, model);
 
@@ -357,13 +348,27 @@ function checkIfUserAttemptedToLoadALocalFile(url: string) {
 /**
  * Postprocess the loaded file. This is used to apply any custom postprocessing to the loaded file.
  */
-function postprocessLoadedFile(loader: object, result: Model) {
+function postprocessLoadedFile(loader: object, model: Model) {
+
+
+    // assign animations of loaded glTF to all scenes
+    if ("scenes" in model) {
+        for (const scene of model.scenes) {
+            if (scene && !scene.animations?.length) {
+                for (const anim of model.animations) {
+                    if (!scene.animations.includes(anim)) {
+                        scene.animations.push(anim);
+                    }
+                }
+            }
+        }
+    }
 
     if (loader instanceof FBXLoader || loader instanceof OBJLoader) {
 
-        let obj: Object3D | Model = result;
+        let obj: Object3D | Model = model;
         if (!(obj instanceof Object3D)) {
-            obj = (result as GLTF).scene;
+            obj = (model as GLTF).scene || model.scenes.find(s => s);
         }
 
         obj.traverse((child) => {

package/src/engine/webcomponents/needle-engine.attributes.ts

@@ -60,6 +60,8 @@ type SkyboxAttributes = {
     "background-color"?: string,
     /** URL to .exr, .hdr, .png, .jpg to be used for lighting */
     "environment-image"?: string,
+
+    "environment-intensity"?: number,
 }
 
 export type TonemappingAttributeOptions = "none" | "linear" | "neutral" | "agx";

package/src/engine/webcomponents/needle-engine.ts

@@ -45,6 +45,7 @@ const observedAttributes = [
     "tone-mapping-exposure",
     "background-blurriness",
     "background-color",
+    "environment-intensity",
 ]
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
@@ -54,8 +55,8 @@ const observedAttributes = [
  * The needle engine web component creates and manages a needle engine context which is responsible for rendering a 3D scene using threejs.   
  * The needle engine context is created when the src attribute is set and disposed when the needle engine is removed from the document (you can prevent this by setting the keep-alive attribute to true).  
  * The needle engine context is accessible via the context property on the needle engine element (e.g. document.querySelector("needle-engine").context).
- * @link https://engine.needle.tools/docs/reference/needle-engine-attributes
- * 
+ * See {@link https://engine.needle.tools/docs/reference/needle-engine-attributes}
+ *
  * @example
  * <needle-engine src="https://example.com/scene.glb"></needle-engine>
  * @example
@@ -64,7 +65,7 @@ const observedAttributes = [
 export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngineComponent {
 
     static get observedAttributes() {
-        return observedAttributes
+        return observedAttributes;
     }
 
     public get loadingProgress01(): number { return this._loadingProgress01; }
@@ -94,7 +95,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /**
      * Get the current context for this web component instance. The context is created when the src attribute is set and the loading has finished.  
      * The context is disposed when the needle engine is removed from the document (you can prevent this by setting the keep-alive attribute to true).  
-     * @returns {Promise<Context>} a promise that resolves to the context when the loading has finished
+     * @returns a promise that resolves to the context when the loading has finished
      */
     public getContext(): Promise<Context> {
         return new Promise((res, _rej) => {
@@ -325,22 +326,14 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 if (debug) console.log("ktx2DecoderPath", newValue);
                 setKtx2TranscoderPath(newValue);
                 break;
-            case "tone-mapping": {
-                this.applyAttributes();
-                break;
-            }
-            case "tone-mapping-exposure": {
-                this.applyAttributes();
-                break;
-            }
-            case "background-blurriness": {
-                const value = parseFloat(newValue);
-                if (value != undefined && this._context) {
-                    this._context.scene.backgroundBlurriness = value;
-                }
-                break;
-            }
-            case "background-color": {
+                
+            case "tonemapping":
+            case "tone-mapping":
+            case "tone-mapping-exposure":
+            case "background-blurriness":
+            case "background-color":
+            case "environment-intensity":
+            {
                 this.applyAttributes();
                 break;
             }
@@ -552,11 +545,18 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         const backgroundBlurriness = this.getAttribute("background-blurriness");
         if (backgroundBlurriness !== null && backgroundBlurriness !== undefined) {
             const value = parseFloat(backgroundBlurriness);
-            if (value !== undefined && this._context) {
+            if (!isNaN(value) && this._context) {
                 this._context.scene.backgroundBlurriness = value;
             }
         }
 
+        const environmentIntensity = this.getAttribute("environment-intensity");
+        if (environmentIntensity != undefined && this._context) {
+            const value = parseFloat(environmentIntensity);
+            if (!isNaN(value) && this._context)
+                this._context.scene.environmentIntensity = value;
+        }
+
         const backgroundColor = this.getAttribute("background-color");
         if (this._context?.renderer) {
             if (typeof backgroundColor === "string" && backgroundColor.length > 0) {

package/src/engine-components/Animation.ts

@@ -67,7 +67,7 @@ export class Animation extends Behaviour implements IAnimationComponent {
     get isAnimationComponent(): boolean { return true; }
     addClip(clip: AnimationClip) {
         if (!this.animations) this.animations = [];
-        this.animations.push(clip);
+        if (!this.animations.includes(clip)) this.animations.push(clip);
     }
 
     /**

package/src/engine-components/AnimationUtilsAutoplay.ts

@@ -1,7 +1,6 @@
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { AnimationUtils } from "../engine/engine_animation.js";
-import { addComponent } from "../engine/engine_components.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { Animation } from "./Animation.js";
 import { Animator } from "./Animator.js";
@@ -29,11 +28,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreated, args => {
                     return undefined;
                 }, true);
                 if (hasAnimation !== true) {
-                    AnimationUtils.assignAnimationsFromFile(file.file as GLTF, {
-                        createAnimationComponent: (obj, _clip) => {
-                            return addComponent(obj, Animation);
-                        },
-                    });
+                    AnimationUtils.autoplayAnimations(file.file as GLTF);
                 }
             }
         }

package/src/engine-components/Camera.ts

@@ -10,6 +10,7 @@ import { getTempColor, getWorldPosition } from "../engine/engine_three_utils.js"
 import type { ICamera } from "../engine/engine_types.js"
 import { getParam } from "../engine/engine_utils.js";
 import { RGBAColor } from "../engine/js-extensions/index.js";
+import { NeedleXREventArgs } from "../engine/engine_xr.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { OrbitControls } from "./OrbitControls.js";
 
@@ -446,6 +447,11 @@ export class Camera extends Behaviour implements ICamera {
         this.context.removeCamera(this);
     }
 
+    onLeaveXR(_args: NeedleXREventArgs): void {
+        // Restore previous FOV
+        this.fieldOfView = this._fov;
+    }
+
 
     /** @internal */
     onBeforeRender() {
@@ -553,7 +559,7 @@ export class Camera extends Behaviour implements ICamera {
         }
 
         // restore previous fov (e.g. when user was in VR or AR and the camera's fov has changed)
-        this.fieldOfView = this._fov;
+        this.fieldOfView = this.fieldOfView;
 
         if (debug) {
             const msg = `[Camera] Apply ClearFlags: ${ClearFlags[this._clearFlags]} - \"${this.name}\"`;

package/src/engine-components/DropListener.ts

@@ -143,13 +143,6 @@ const blobKeyName = "blob";
  */
 export class DropListener extends Behaviour {
 
-    /**
-     * When enabled, the DropListener will automatically synchronize dropped files to other connected clients.
-     * When a file is dropped locally, it will be uploaded to blob storage and the URL will be shared with other clients.
-     */
-    @serializable()
-    useNetworking: boolean = true;
-
     /**
      * When assigned, the DropListener will only accept files that are dropped on this specific object.
      * This allows creating designated drop zones in your scene.
@@ -159,7 +152,10 @@ export class DropListener extends Behaviour {
 
     /**
      * When enabled, dropped objects will be automatically scaled to fit within the volume defined by fitVolumeSize.
-     * Useful for ensuring dropped models appear at an appropriate scale.
+     * Useful for ensuring dropped models appear at an appropriate scale.   
+     * 
+     * **Tip**: Use the handy `fitObjectIntoVolume` function (`import { fitObjectIntoVolume } from "@needle-tools/engine"`) for custom fitting needs.  
+     * 
      * @default false
      */
     @serializable()
@@ -180,6 +176,14 @@ export class DropListener extends Behaviour {
     @serializable()
     placeAtHitPosition: boolean = true;
 
+    /**
+     * When enabled, the DropListener will automatically synchronize dropped files to other connected clients.
+     * When a file is dropped locally, it will be uploaded to blob storage and the URL will be shared with other clients.
+     * @default false
+     */
+    @serializable()
+    useNetworking: boolean = false;
+
     /**
      * Event list that gets invoked after a file has been successfully added to the scene.
      * Receives {@link DropListenerOnDropArguments} containing the added object and related information.
@@ -193,6 +197,27 @@ export class DropListener extends Behaviour {
     @serializable(EventList)
     onDropped: EventList<DropListenerOnDropArguments> = new EventList();
 
+    /**
+     * Loads a file from the given URL and adds it to the scene.
+     * @returns A promise that resolves to the loaded object or null if loading failed.
+     */
+    loadFromURL(url: string, data?: { point?: Vec3, size?: Vec3 }): Promise<Object3D | null> {
+        return this.addFromUrl(url, { screenposition: new Vector2(), point: data?.point, size: data?.size, }, false);
+    }
+
+    /**
+     * Forgets all previously added objects.     
+     * The droplistener will then not be able to remove previously added objects.
+     */
+    forgetObjects() {
+        this.removePreviouslyAddedObjects(false);
+    }
+
+
+
+
+    // #region internals
+
     /** @internal */
     onEnable(): void {
         this.context.renderer.domElement.addEventListener("dragover", this.onDrag);
@@ -208,21 +233,6 @@ export class DropListener extends Behaviour {
         this.context.connection.stopListen("droplistener", this.onNetworkEvent);
     }
 
-    /**
-     * Loads a file from the given URL and adds it to the scene.
-     */
-    loadFromURL(url: string, data?: { point?: Vec3, size?: Vec3 }) {
-        this.addFromUrl(url, { screenposition: new Vector2(), point: data?.point, size: data?.size, }, true);
-    }
-
-    /**
-     * Forgets all previously added objects.     
-     * The droplistener will then not be able to remove previously added objects.
-     */
-    forgetObjects() {
-        this.removePreviouslyAddedObjects(false);
-    }
-
     /**
      * Handles network events received from other clients containing information about dropped objects
      * @param evt Network event data containing object information, position, and content URL
@@ -326,7 +336,7 @@ export class DropListener extends Behaviour {
             }
         }
         if (files.length > 0) {
-            await this.addDroppedFiles(files, ctx);
+            await this.addFromFiles(files, ctx);
         }
     }
 
@@ -359,6 +369,7 @@ export class DropListener extends Behaviour {
             // Ignore dropped images
             const lowercaseUrl = url.toLowerCase();
             if (lowercaseUrl.endsWith(".hdr") || lowercaseUrl.endsWith(".hdri") || lowercaseUrl.endsWith(".exr") || lowercaseUrl.endsWith(".png") || lowercaseUrl.endsWith(".jpg") || lowercaseUrl.endsWith(".jpeg")) {
+                console.warn(`Fileformat is not supported: ${lowercaseUrl}`);
                 return null;
             }
 
@@ -374,7 +385,7 @@ export class DropListener extends Behaviour {
             });
             if (res && this._addedObjects.length <= 0) {
                 ctx.url = url;
-                const obj = this.addObject(res, ctx, isRemote);
+                const obj = this.onObjectLoaded(res, ctx, isRemote);
                 return obj;
             }
         }
@@ -388,12 +399,13 @@ export class DropListener extends Behaviour {
     private _abort: AbortController | null = null;
 
     /**
-     * Processes dropped files, loads them as 3D models, and handles networking if enabled
-     * Creates an abort controller to cancel previous uploads if new files are dropped
+     * Processes dropped files and loads them as 3D models.
+     * When enabled, it also handles network drops (sending files between clients).
+     * Automatically handles cancelling previous uploads if new files are dropped.
      * @param fileList Array of dropped files
-     * @param ctx Context information about where the drop occurred
+     * @param ctx Context information about where on the screen or in 3D space the drop occurred
      */
-    private async addDroppedFiles(fileList: Array<File>, ctx: DropContext) {
+    private async addFromFiles(fileList: Array<File>, ctx: DropContext) {
         if (debug) console.log("Add files", fileList)
         if (!Array.isArray(fileList)) return;
         if (!fileList.length) return;
@@ -427,7 +439,7 @@ export class DropListener extends Behaviour {
             if (res) {
                 this.dispatchEvent(new CustomEvent(DropListenerEvents.FileDropped, { detail: file }));
                 ctx.file = file;
-                const obj = this.addObject(res, ctx, false);
+                const obj = this.onObjectLoaded(res, ctx, false);
 
                 // handle uploading the dropped object and networking the event
                 if (obj && this.context.connection.isConnected && this.useNetworking) {
@@ -478,7 +490,7 @@ export class DropListener extends Behaviour {
      * @param isRemote Whether this object was shared from a remote client
      * @returns The added object or null if adding failed
      */
-    private addObject(data: { model: Model, contentMD5: string }, ctx: DropContext, isRemote: boolean): Object3D | null {
+    private onObjectLoaded(data: { model: Model, contentMD5: string }, ctx: DropContext, isRemote: boolean): Object3D | null {
 
         const { model, contentMD5 } = data;
 
@@ -522,9 +534,7 @@ export class DropListener extends Behaviour {
             }
         }
 
-        AnimationUtils.assignAnimationsFromFile(model, {
-            createAnimationComponent: obj => addComponent(obj, Animation)
-        });
+        AnimationUtils.autoplayAnimations(model);
 
         const evt = new DropListenerAddedEvent({
             sender: this,

package/src/engine-components/LookAtConstraint.ts

@@ -1,4 +1,4 @@
-import { Object3D } from "three";
+import { Object3D, Vector3 } from "three";
 
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { Behaviour } from "./Component.js";
@@ -23,4 +23,12 @@ export class LookAtConstraint extends Behaviour {
      */
     @serializable(Object3D)
     sources: Object3D[] = [];
+
+    /**
+     * Set the position of the constraint.
+     */
+    setConstraintPosition(worldPosition: Vector3) {
+        const source = this.sources[0];
+        if (source) source.worldPosition = worldPosition;
+    }
 }