@needle-tools/engine 4.9.3 → 4.10.0-beta

package/src/engine/codegen/register_types.ts

@@ -108,6 +108,7 @@ import { PlayableDirector } from "../../engine-components/timeline/PlayableDirec
 import { SignalReceiver } from "../../engine-components/timeline/SignalAsset.js";
 import { AnimationTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
+import { MarkerTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { SignalTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
 import { TransformGizmo } from "../../engine-components/TransformGizmo.js";
@@ -139,6 +140,7 @@ 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 { HoverAnimation } from "../../engine-components/web/HoverAnimation.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";
@@ -264,6 +266,7 @@ TypeStore.add("PlayableDirector", PlayableDirector);
 TypeStore.add("SignalReceiver", SignalReceiver);
 TypeStore.add("AnimationTrackHandler", AnimationTrackHandler);
 TypeStore.add("AudioTrackHandler", AudioTrackHandler);
+TypeStore.add("MarkerTrackHandler", MarkerTrackHandler);
 TypeStore.add("SignalTrackHandler", SignalTrackHandler);
 TypeStore.add("ControlTrackHandler", ControlTrackHandler);
 TypeStore.add("TransformGizmo", TransformGizmo);
@@ -295,6 +298,7 @@ TypeStore.add("VideoPlayer", VideoPlayer);
 TypeStore.add("Voip", Voip);
 TypeStore.add("ClickThrough", ClickThrough);
 TypeStore.add("CursorFollow", CursorFollow);
+TypeStore.add("HoverAnimation", HoverAnimation);
 TypeStore.add("ScrollFollow", ScrollFollow);
 TypeStore.add("Avatar", Avatar);
 TypeStore.add("XRControllerFollow", XRControllerFollow);

package/src/engine/engine_animation.ts

@@ -1,4 +1,4 @@
-import { AnimationAction, AnimationClip, AnimationMixer, Object3D, PropertyBinding } from "three";
+import { AnimationAction, AnimationClip, AnimationMixer, KeyframeTrack, Object3D, PropertyBinding, Vector3Like } from "three";
 
 import type { Context } from "./engine_context.js";
 import { GLTF, IAnimationComponent, Model } from "./engine_types.js";
@@ -151,4 +151,72 @@ export class AnimationUtils {
             return findAnimationComponentInParent(obj.parent);
         }
     }
+
+
+    static emptyClip(): AnimationClip {
+        return new AnimationClip("empty", 0, []);
+    }
+
+    static createScaleClip(options?: ScaleClipOptions): AnimationClip {
+        const duration = options?.duration ?? 0.3;
+
+        let baseScale: Vector3Like = { x: 1, y: 1, z: 1 };
+        if (options?.scale !== undefined) {
+            if (typeof options.scale === "number") {
+                baseScale = { x: options.scale, y: options.scale, z: options.scale };
+            }
+            else {
+                baseScale = options.scale;
+            }
+        }
+        const type = options?.type ?? "linear";
+        const scale = options?.scaleFactor ?? 1.2;
+
+        const times = new Array<number>();
+        const values = new Array<number>();
+        switch (type) {
+            case "linear":
+                times.push(0, duration);
+                values.push(
+                    baseScale.x, baseScale.y, baseScale.z,
+                    baseScale.x * scale, baseScale.y * scale, baseScale.z * scale
+                );
+                break;
+
+            case "spring":
+                times.push(0, duration * 0.3, duration * 0.5, duration * 0.7, duration * 0.9, duration);
+                values.push(
+                    baseScale.x, baseScale.y, baseScale.z,
+                    baseScale.x * scale, baseScale.y * scale, baseScale.z * scale,
+                    baseScale.x * 0.9, baseScale.y * 0.9, baseScale.z * 0.9,
+                    baseScale.x * 1.05, baseScale.y * 1.05, baseScale.z * 1.05,
+                    baseScale.x * 0.98, baseScale.y * 0.98, baseScale.z * 0.98,
+                    baseScale.x, baseScale.y, baseScale.z
+                );
+                break;
+
+        }
+
+        const track = new KeyframeTrack(".scale", times, values);
+        return new AnimationClip("scale", times[times.length - 1], [track]);
+    }
+}
+
+/**
+ * Type of scale animation to create.  
+ * - "linear": Simple linear scale up animation.  
+ * - "spring": Spring-like scale animation with overshoot and settling.  
+ */
+export type ScaleClipType = "linear"  | "spring";
+
+type ScaleClipOptions = {
+    /**
+     * Type of scale animation to create.
+     * - "linear": Simple linear scale up animation.
+     * - "spring": Spring-like scale animation with overshoot and settling.
+     */
+    type?: ScaleClipType,
+    duration?: number,
+    scale?: number | Vector3Like,
+    scaleFactor?: number
 }

package/src/engine/engine_camera.fit.ts

@@ -0,0 +1,288 @@
+import { Camera, Object3D, PerspectiveCamera, Vector3, Vector3Like } from "three";
+
+import { GroundProjectedEnv } from "../engine-components/GroundProjection.js";
+import { findObjectOfType } from "./engine_components.js";
+import { Context } from "./engine_context.js";
+import { Gizmos } from "./engine_gizmos.js";
+import { getBoundingBox } from "./engine_three_utils.js";
+import { NeedleXRSession } from "./xr/NeedleXRSession.js";
+
+
+/**
+ * Options for fitting the camera to the scene. Used in {@link OrbitControls.fitCamera}
+ */
+export type FitCameraOptions = {
+    /** When enabled debug rendering will be shown */
+    debug?: boolean,
+
+    /**
+     * If true the camera position and target will be applied immediately
+     * @default true
+     */
+    autoApply?: boolean,
+
+    /**
+     * The context to use. If not provided the current context will be used
+     */
+    context?: Context,
+
+    /**
+     * The camera to fit. If not provided the current camera will be used
+     */
+    camera?: Camera,
+
+    currentZoom?: number,
+    minZoom?: number,
+    maxZoom?: number,
+
+    /**
+     * The objects to fit the camera to. If not provided the scene children will be used
+     */
+    objects?: Object3D[] | Object3D;
+
+    /** Fit offset: A factor to multiply the distance to the objects by
+     * @default 1.1
+     */
+    fitOffset?: number,
+
+    /** The direction from which the camera should be fitted in worldspace. If not defined the current camera's position will be used */
+    fitDirection?: Vector3Like,
+
+    /** If set to "y" the camera will be centered in the y axis */
+    centerCamera?: "none" | "y",
+    /** Set to 'auto' to update the camera near or far plane based on the fitted-objects bounds */
+    cameraNearFar?: "keep" | "auto",
+
+    /**
+     * Offset the camera position in world space
+     */
+    cameraOffset?: Partial<Vector3Like>,
+    /**
+     * Offset the camera position relative to the size of the objects being focused on (e.g. x: 0.5).  
+     * Value range: -1 to 1
+     */
+    relativeCameraOffset?: Partial<Vector3Like>,
+
+    /**
+     * Offset the camera target position in world space
+     */
+    targetOffset?: Partial<Vector3Like>,
+    /**
+     * Offset the camera target position relative to the size of the objects being focused on.  
+     * Value range: -1 to 1
+     */
+    relativeTargetOffset?: Partial<Vector3Like>,
+
+    /**
+     * Field of view (FOV) for the camera
+     */
+    fov?: number,
+}
+
+export type FitCameraReturnType = {
+    camera: Camera,
+    position: Vector3,
+    lookAt: Vector3,
+    fov: number | undefined
+}
+
+
+export function fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | FitCameraOptions, options?: FitCameraOptions): null | FitCameraReturnType {
+
+    if (NeedleXRSession.active) {
+        // camera fitting in XR is not supported
+        console.warn('[OrbitControls] Can not fit camera while XR session is active');
+        return null;
+    }
+
+    const context = Context.Current;
+    if (!context) {
+        console.warn('[OrbitControls] No context found');
+        return null;
+    }
+    const camera = options?.camera || context.mainCamera;
+
+    let objects: Object3D | Array<Object3D> | undefined = undefined;
+    // If the user passed in an array as first argument
+    if (Array.isArray(objectsOrOptions)) {
+        objects = objectsOrOptions;
+    }
+    // If the user passed in an object as first argument
+    else if (objectsOrOptions && "type" in objectsOrOptions) {
+        objects = objectsOrOptions;
+    }
+    // If the user passed in an object as first argument and options as second argument
+    else if (objectsOrOptions && typeof objectsOrOptions === "object") {
+        if (!(objectsOrOptions instanceof Object3D) && !Array.isArray(objectsOrOptions)) {
+            options = objectsOrOptions;
+            objects = options.objects;
+        }
+    }
+    // Ensure objects are setup correctly
+    if (objects && !Array.isArray(objects)) {
+        objects = [objects];
+    }
+    if (!Array.isArray(objects) || objects && objects.length <= 0) {
+        objects = context.scene.children;
+    }
+
+    // Make sure there's anything to fit to
+    if (!Array.isArray(objects) || objects.length <= 0) {
+        console.warn("No objects to fit camera to...");
+        return null;
+    }
+
+
+    // const controls = this._controls as ThreeOrbitControls | null;
+
+    if (!camera) {
+        console.warn("No camera or controls found to fit camera to objects...");
+        return null;
+    }
+
+    if (!options) options = {}
+    options.autoApply = options.autoApply !== false; // default to true
+    options.minZoom ||= 0;
+    options.maxZoom ||= Infinity;
+
+    const {
+        centerCamera,
+        cameraNearFar = "auto",
+        fitOffset = 1.1,
+        fov = camera instanceof PerspectiveCamera ? camera?.fov : -1
+    } = options;
+
+    const size = new Vector3();
+    const center = new Vector3();
+    const aspect = camera instanceof PerspectiveCamera ? camera.aspect : 1;
+    // TODO would be much better to calculate the bounds in camera space instead of world space - 
+    // we would get proper view-dependant fit.
+    // Right now it's independent from where the camera is actually looking from,
+    // and thus we're just getting some maximum that will work for sure.
+    const box = getBoundingBox(objects, undefined, camera?.layers);
+    const boxCopy = box.clone();
+    box.getCenter(center);
+
+    const box_size = new Vector3();
+    box.getSize(box_size);
+
+    // project this box into camera space
+    if (camera instanceof PerspectiveCamera) camera.updateProjectionMatrix();
+    camera.updateMatrixWorld();
+    box.applyMatrix4(camera.matrixWorldInverse);
+
+    box.getSize(size);
+    box.setFromCenterAndSize(center, size);
+    if (Number.isNaN(size.x) || Number.isNaN(size.y) || Number.isNaN(size.z)) {
+        console.warn("Camera fit size resultet in NaN", camera, box);
+        return null;
+    }
+    if (size.length() <= 0.0000000001) {
+        console.warn("Camera fit size is zero", box);
+        return null;
+    }
+
+    const verticalFov = fov;
+    const horizontalFov = 2 * Math.atan(Math.tan(verticalFov * Math.PI / 360 / 2) * aspect) / Math.PI * 360;
+    const fitHeightDistance = size.y / (2 * Math.atan(Math.PI * verticalFov / 360));
+    const fitWidthDistance = size.x / (2 * Math.atan(Math.PI * horizontalFov / 360));
+
+    const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance) + size.z / 2;
+    options.maxZoom = distance * 10;
+    options.minZoom = distance * 0.01;
+
+    if (options.debug === true) {
+        console.log("Fit camera to objects", { fitHeightDistance, fitWidthDistance, distance, verticalFov, horizontalFov });
+    }
+
+    const verticalOffset = 0.05;
+    const lookAt = center.clone();
+    lookAt.y -= size.y * verticalOffset;
+    if (options.targetOffset) {
+        if (options.targetOffset.x !== undefined) lookAt.x += options.targetOffset.x;
+        if (options.targetOffset.y !== undefined) lookAt.y += options.targetOffset.y;
+        if (options.targetOffset.z !== undefined) lookAt.z += options.targetOffset.z;
+    }
+    if (options.relativeTargetOffset) {
+        if (options.relativeTargetOffset.x !== undefined) lookAt.x += options.relativeTargetOffset.x * size.x;
+        if (options.relativeTargetOffset.y !== undefined) lookAt.y += options.relativeTargetOffset.y * size.y;
+        if (options.relativeTargetOffset.z !== undefined) lookAt.z += options.relativeTargetOffset.z * size.z;
+    }
+    // this.setLookTargetPosition(lookAt, immediate);
+    // this.setFieldOfView(options.fov, immediate);
+
+    if (cameraNearFar == undefined || cameraNearFar == "auto") {
+        // Check if the scene has a GroundProjectedEnv and include the scale to the far plane so that it doesnt cut off
+        const groundprojection = findObjectOfType(GroundProjectedEnv);
+        const groundProjectionRadius = groundprojection ? groundprojection.radius : 0;
+        const boundsMax = Math.max(box_size.x, box_size.y, box_size.z, groundProjectionRadius);
+        // TODO: this doesnt take the Camera component nearClipPlane into account
+        if (camera instanceof PerspectiveCamera) {
+            camera.near = (distance / 100);
+            camera.far = boundsMax + distance * 10;
+            camera.updateProjectionMatrix();
+        }
+
+        // adjust maxZoom so that the ground projection radius is always inside
+        if (groundprojection) {
+            options.maxZoom = Math.max(Math.min(options.maxZoom, groundProjectionRadius * 0.5), distance);
+        }
+    }
+
+    // ensure we're not clipping out of the current zoom level just because we're fitting
+    if (options.currentZoom !== undefined) {
+        if (options.currentZoom < options.minZoom) options.minZoom = options.currentZoom * 0.9;
+        if (options.currentZoom > options.maxZoom) options.maxZoom = options.currentZoom * 1.1;
+    }
+
+    const direction = center.clone();
+    if (options.fitDirection) {
+        direction.sub(new Vector3().copy(options.fitDirection).multiplyScalar(1_000_000));
+    }
+    else {
+        direction.sub(camera.worldPosition);
+    }
+    if (centerCamera === "y")
+        direction.y = 0;
+    direction.normalize();
+    direction.multiplyScalar(distance);
+    if (centerCamera === "y")
+        direction.y += -verticalOffset * 4 * distance;
+
+    let cameraLocalPosition = center.clone().sub(direction);
+    if (options.cameraOffset) {
+        if (options.cameraOffset.x !== undefined) cameraLocalPosition.x += options.cameraOffset.x;
+        if (options.cameraOffset.y !== undefined) cameraLocalPosition.y += options.cameraOffset.y;
+        if (options.cameraOffset.z !== undefined) cameraLocalPosition.z += options.cameraOffset.z;
+    }
+    if (options.relativeCameraOffset) {
+        if (options.relativeCameraOffset.x !== undefined) cameraLocalPosition.x += options.relativeCameraOffset.x * size.x;
+        if (options.relativeCameraOffset.y !== undefined) cameraLocalPosition.y += options.relativeCameraOffset.y * size.y;
+        if (options.relativeCameraOffset.z !== undefined) cameraLocalPosition.z += options.relativeCameraOffset.z * size.z;
+    }
+    if (camera.parent) {
+        cameraLocalPosition = camera.parent.worldToLocal(cameraLocalPosition);
+    }
+    // this.setCameraTargetPosition(cameraLocalPosition, immediate);
+
+    if (options.debug) {
+        Gizmos.DrawWireBox3(box, 0xffff33, 10);
+        Gizmos.DrawWireBox3(boxCopy, 0x00ff00, 10);
+    }
+
+    if (options.autoApply) {
+        camera.position.copy(cameraLocalPosition);
+        camera.lookAt(lookAt);
+        if (fov > 0 && camera instanceof PerspectiveCamera) {
+            camera.fov = fov;
+            camera.updateProjectionMatrix();
+        }
+    }
+
+    return {
+        camera: camera,
+        position: cameraLocalPosition,
+        lookAt: lookAt,
+        fov: options.fov,
+    }
+}

package/src/engine/engine_gizmos.ts

@@ -230,8 +230,8 @@ export class Gizmos {
      * Draw a 3D wiremesh box gizmo in the scene
      * @param box the box in world space
      * @param color the color of the box
-     * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame
-     * @param depthTest if true the box will be rendered with depth test
+     * @param duration the duration in seconds the box will be rendered. If 0 it will be rendered for one frame. Default: 0
+     * @param depthTest if true the box will be rendered with depth test. Default: true
      */
     static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
         if (!Gizmos.enabled) return;

package/src/engine/engine_physics.ts

@@ -592,7 +592,7 @@ namespace NEMeshBVH {
                 const timeSinceLastUpdate = now - skinnedMesh.staticGeometryLastUpdate!;
                 const interval = skinnedMesh.autoUpdateMeshBvhInterval ?? 100;
                 if (skinnedMeshBVHNeedsUpdate || timeSinceLastUpdate > interval) {
-                    if(debugPhysics) console.warn(`Physics: updating skinned mesh bvh for ${mesh.name} after ${timeSinceLastUpdate.toFixed(2)}ms`);
+                    if (debugPhysics) console.warn(`Physics: updating skinned mesh bvh for ${mesh.name} after ${timeSinceLastUpdate.toFixed(2)}ms`);
                     skinnedMesh.bvhNeedsUpdate = false;
                     skinnedMesh.staticGeometryLastUpdate = now;
                     skinnedMesh.staticGenerator?.generate(skinnedMesh.staticGeometry);
@@ -709,8 +709,11 @@ namespace NEMeshBVH {
             else {
                 if (debugPhysics) console.warn("No bounds tree found for mesh", mesh.name, { workerTask: geom[workerTaskSymbol], hasAcceleratedRaycast: _acceleratedRaycast != null });
                 if (options.allowSlowRaycastFallback === false) {
-                    if (debugPhysics) console.warn("Skipping raycast because no bounds tree is available and allowSlowRaycastFallback is false");
-                    return false;
+                    const vertices = geom.getAttribute("position")?.array?.length ?? 0;
+                    if (vertices > 2000) {
+                        if (debugPhysics) console.warn("Skipping raycast because no bounds tree is available and allowSlowRaycastFallback is false");
+                        return false;
+                    }
                 }
             }
             const prevFirstHitOnly = raycaster.firstHitOnly;

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

@@ -158,8 +158,18 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private onDoneLoading() {
         if (this._loadingElement) {
             if (debug) console.log("Hiding loading element");
-            this._loadingElement.style.display = "none";
-            this._loadingElement.remove();
+            // animate alpha to 0
+            const element = this._loadingElement;
+            element.animate([
+                { opacity: 1 },
+                { opacity: 0 }
+            ], {
+                duration: 200,
+                easing: 'ease-in-out',
+            }).addEventListener('finish', () => {
+                element.style.display = "none";
+                element.remove();
+            });
         }
         if (this._progressLoop)
             clearInterval(this._progressLoop);
@@ -190,6 +200,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 loadingStyle = "light";
         }
 
+
         const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "absolute";
@@ -197,6 +208,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             this._loadingElement.style.height = "100%";
             this._loadingElement.style.left = "0";
             this._loadingElement.style.top = "0";
+            this._loadingElement.style.overflow = "hidden";
             const loadingBackgroundColor = this._element.getAttribute("loading-background");
             if (loadingBackgroundColor) {
                 this._loadingElement.style.background = loadingBackgroundColor;
@@ -227,24 +239,48 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
 
         const content = document.createElement("div");
+        content.style.cssText = `
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        `
         this._loadingElement.appendChild(content);
 
+        const poster = this._element.getAttribute("poster");
+        if (poster !== null && poster !== "0") {
+            const backgroundImage = document.createElement("div");
+            const backgroundBlur = poster?.length ? "0px" : "50px";
+            backgroundImage.style.cssText = `
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            z-index: -1;
+            overflow: hidden;
+
+            margin: -${backgroundBlur};
+            background: url('${poster?.length ? poster : "/include/poster.webp"}') center center no-repeat;
+            background-size: cover;
+            filter: blur(${backgroundBlur});
+        `;
+            this._loadingElement.appendChild(backgroundImage);
+        }
+
         const logo = document.createElement("img");
-        const logoSize = 120;
-        logo.style.width = `${logoSize}px`;
-        logo.style.height = `${logoSize}px`;
-        logo.style.paddingTop = "20px";
-        logo.style.paddingBottom = "10px";
-        logo.style.margin = "0px";
+        const logoWidth = "80%";
+        const logoHeight = "15%";
+        const logoDelay = ".2s";
         logo.style.userSelect = "none";
         logo.style.objectFit = "contain";
-        logo.style.transition = "transform 1.5s ease-out, opacity .3s ease-in-out";
         logo.style.transform = "translateY(30px)";
-        logo.style.opacity = "0.05";
-        setTimeout(() => {
-            logo.style.opacity = "1";
-            logo.style.transform = "translateY(0px)";
-        }, 1);
+        logo.style.opacity = "0.0000001";
+        logo.style.transition = `transform 1s ease-out ${logoDelay}, opacity .3s ease-in-out ${logoDelay}`;
         logo.src = needleLogoOnlySVG;
         let isUsingCustomLogo = false;
         if (hasLicense && this._element) {
@@ -252,8 +288,15 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (customLogo) {
                 isUsingCustomLogo = true;
                 logo.src = customLogo;
+                setTimeout(() => {
+                    logo.style.opacity = "1";
+                    logo.style.transform = "translateY(0px)";
+                }, 1);
             }
         }
+
+        logo.style.width = `${logoWidth}`;
+        logo.style.height = `min(1000px, max(${logoHeight}, 50px))`;
         content.appendChild(logo);
 
         const details = document.createElement("div");
@@ -273,18 +316,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const maxWidth = 100;
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
-        loadingBarContainer.style.height = "3px";
+        loadingBarContainer.style.height = "5px";
         loadingBarContainer.style.position = "absolute";
         loadingBarContainer.style.left = "0";
-        loadingBarContainer.style.bottom = "0px";
+        loadingBarContainer.style.top = "0px";
         loadingBarContainer.style.opacity = "0";
-        loadingBarContainer.style.transition = "opacity 1s ease-in-out 2s";
+        loadingBarContainer.style.transition = "opacity 1s ease-in-out";
+        loadingBarContainer.style.backgroundColor = "rgba(240,240,240,.5)"
         setTimeout(() => { loadingBarContainer.style.opacity = "1"; }, 1);
-        if (loadingStyle === "light")
-            loadingBarContainer.style.backgroundColor = "rgba(0,0,0,.2)"
-        else
-            loadingBarContainer.style.backgroundColor = "rgba(255,255,255,.2)"
-        // loadingBarContainer.style.alignItems = "center";
 
         this._loadingElement.appendChild(loadingBarContainer);
 
@@ -294,9 +333,9 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const getGradientPos = function (t: number): string {
             return Mathf.lerp(0, maxWidth, t) + "%";
         }
-        this._loadingBar.style.background = "#66A22F";
-            // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
+        // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
         this._loadingBar.style.backgroundAttachment = "fixed";
+        this._loadingBar.style.background = "#c4c4c4ab";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
         if (hasLicense && this._element) {

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

@@ -85,12 +85,17 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      * <needle-engine></needle-engine>
      * @returns {boolean | null} if the attribute is not set it returns null
      */
-    public get cameraControls(): boolean | null {
+    get cameraControls(): boolean | null {
         const attr = this.getAttribute("camera-controls") as NeedleEngineAttributes["camera-controls"] | ({} & string)
         if (attr == null) return null;
         if (attr === null || attr === "False" || attr === "false" || attr === "0" || attr === "none") return false;
         return true;
     }
+    set cameraControls(value: boolean | null) {
+        if (value === null) this.removeAttribute("camera-controls");
+        else this.setAttribute("camera-controls", value ? "true" : "false");
+    }
+    
 
     /**
      * Get the current context for this web component instance. The context is created when the src attribute is set and the loading has finished.  

package/src/engine-components/AnimatorController.ts

@@ -276,7 +276,7 @@ export class AnimatorController {
      * @returns The found state or null if not found
      */
     FindState(name: string | number | undefined | null): State | null { return this.findState(name); }
-    
+
     /**
      * Finds an animation state by name or hash.
      * 
@@ -321,6 +321,25 @@ export class AnimatorController {
         return action;
     }
 
+    // addState(state: State, layerIndex: number = 0) {
+    //     if (!this.model) throw new Error("AnimatorController model is missing");
+    //     if (layerIndex < 0 || layerIndex >= this.model.layers.length) {
+    //         throw new Error(`Invalid layer index: ${layerIndex}`);
+    //     }
+    //     const layer = this.model.layers[layerIndex];
+    //     if (!layer.stateMachine) {
+    //         layer.stateMachine = { states: [], defaultState: 0 };
+    //     }
+    //     if (!layer.stateMachine.states) {
+    //         layer.stateMachine.states = [];
+    //     }
+    //     if (state.hash === undefined) {
+    //         state.hash = stringToHash(state.name || "state" + layer.stateMachine.states.length);
+    //     }
+
+    // }
+
+
     /**
      * The normalized time (0-1) to start playing the first state at.
      * This affects the initial state when the animator is first enabled.
@@ -331,7 +350,7 @@ export class AnimatorController {
      * The Animator component this controller is bound to.
      */
     animator?: Animator;
-    
+
     /**
      * The data model describing the animation states and transitions.
      */

package/src/engine-components/CameraUtils.ts

@@ -117,16 +117,15 @@ function createDefaultCameraControls(context: IContext, cam?: ICamera) {
     if (cameraObject) {
         const orbit = getOrAddComponent(cameraObject, OrbitControls) as OrbitControls;
         orbit.sourceId = cam?.sourceId ?? "unknown";
+        // /enable auto-rotate if the auto-rotate attribute is provided
         const autoRotate = context.domElement.getAttribute("auto-rotate");
-        orbit.autoRotate = autoRotate !== undefined && autoRotate !== null && (autoRotate != "0" && autoRotate?.toLowerCase() != "false");
-        orbit.autoRotateSpeed = 0.5;
-        orbit.autoFit = true;
-        if (orbit.autoRotate && autoRotate) {
-            const autoRotateValue = parseFloat(autoRotate);
-            if (!isNaN(autoRotateValue)) {
-                orbit.autoRotateSpeed = autoRotateValue;
-            }
-        }
+        orbit.autoRotate = autoRotate != "0" && autoRotate?.toLowerCase() != "false";
+        const autoRotateSpeed = Number.parseFloat(autoRotate || ".5");
+        orbit.autoRotateSpeed = !isNaN(autoRotateSpeed) ? autoRotateSpeed : .5;
+        console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
+        const autoFit = context.domElement.getAttribute("auto-fit");
+        orbit.autoFit = autoFit !== "0" && autoFit?.toLowerCase() != "false";
+        orbit.autoTarget = true;
     }
     else {
         console.warn("Missing camera object, can not add orbit controls")