@needle-tools/engine 4.10.0-next.2abafea → 4.10.0-next.55c0bf9

package/src/engine/engine_camera.fit.ts

@@ -87,7 +87,7 @@ export type FitCameraReturnType = {
 }
 
 
-export function fitCamera(options?: FitCameraOptions): null | FitCameraReturnType {
+export function fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | FitCameraOptions, options?: FitCameraOptions): null | FitCameraReturnType {
 
     if (NeedleXRSession.active) {
         // camera fitting in XR is not supported
@@ -102,6 +102,37 @@ export function fitCamera(options?: FitCameraOptions): null | FitCameraReturnTyp
     }
     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) {
@@ -124,7 +155,6 @@ export function fitCamera(options?: FitCameraOptions): null | FitCameraReturnTyp
     const size = new Vector3();
     const center = new Vector3();
     const aspect = camera instanceof PerspectiveCamera ? camera.aspect : 1;
-    const objects = options.objects || context.scene;
     // 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,

package/src/engine/engine_camera.ts

@@ -52,23 +52,15 @@ export type FocusRectSettings = {
     /** Lower values will result in faster alignment with the rect (value ~= seconds to reach target) 
      * Minimum value is 0.
      */
-    damping: number,
-
-    /** X offset in camera coordinates. Used by ViewBox component */
-    offsetX: number,
-    /** Y offset in camera coordinates. Used by ViewBox component */
-    offsetY: number,
-    /** Zoom factor. Used by ViewBox component */
-    zoom: number,
+    damping: number
 }
 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 };
-const _testTime = 1;
 
 /** Used internally by the Needle Engine context via 'setFocusRect(<rect>)'  */
-export function updateCameraFocusRect(focusRect: FocusRect, settings: FocusRectSettings, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
+export function updateCameraFocusRect(focusRect: FocusRect, dt: number, camera: PerspectiveCamera, renderer: WebGLRenderer) {
 
     if (focusRect instanceof Element) {
         focusRect = focusRect.getBoundingClientRect();
@@ -84,62 +76,16 @@ export function updateCameraFocusRect(focusRect: FocusRect, settings: FocusRectS
     rect.x -= rendererRect.x;
     rect.y -= rendererRect.y;
 
-    const sourceWidth = rendererRect.width;
-    const sourceHeight = rendererRect.height;
+    const targetX = rect.width / -2 - (rect.x - (rendererRect.width / 2));
+    const targetY = rect.height / -2 - (rect.y - (rendererRect.height / 2));
 
-    const view = camera.view as PerspectiveCamera["view"];
+    const view = camera.view;
 
-    // Apply zoom
-    const zoom = settings.zoom;
     let offsetX = view?.offsetX || 0;
     let offsetY = view?.offsetY || 0;
+    offsetX = Mathf.lerp(offsetX, targetX, dt);
+    offsetY = Mathf.lerp(offsetY, targetY, dt);
 
-    let width = rendererRect.width;
-    let height = rendererRect.height;
-    width /= zoom;
-    height /= zoom;
-    offsetX = width * (zoom - 1) * .5;
-    offsetY = height * (zoom - 1) * .5;
-
-    const focusRectCenterX = rect.x + rect.width * .5;
-    const focusRectCenterY = rect.y + rect.height * .5;
-    const rendererCenterX = rendererRect.width * .5;
-    const rendererCenterY = rendererRect.height * .5;
-
-    const diffx = focusRectCenterX - rendererCenterX;
-    const diffy = focusRectCenterY - rendererCenterY;
-    offsetX -= diffx / zoom;
-    offsetY -= diffy / zoom;
-    if (settings.offsetX !== undefined) {
-        offsetX += settings.offsetX * (rendererRect.width * .5);
-    }
-    if (settings.offsetY !== undefined) {
-        offsetY -= settings.offsetY * (rendererRect.height * .5);
-    }
-
-
-    const currentOffsetX = view?.offsetX || offsetX;
-    const currentOffsetY = view?.offsetY || offsetY;
-    offsetX = Mathf.lerp(currentOffsetX, offsetX, dt);
-    offsetY = Mathf.lerp(currentOffsetY, offsetY, dt);
-    const currentWidth = view?.width || sourceWidth;
-    const currentHeight = view?.height || sourceHeight;
-    width = Mathf.lerp(currentWidth, width, dt);
-    height = Mathf.lerp(currentHeight, height, dt);
-
-    camera.setViewOffset(sourceWidth, sourceHeight, offsetX, offsetY, width, height);
+    camera.setViewOffset(rendererRect.width, rendererRect.height, offsetX, offsetY, rendererRect.width, rendererRect.height);
     camera.updateProjectionMatrix();
-
-    if (settings.damping > 0) {
-        settings.damping *= (1.0 - dt);
-        if (settings.damping < 0.01) settings.damping = 0;
-        settings.damping = Math.max(0, settings.damping);
-    }
-}
-
-
-function fit(width1: number, height1: number, width2: number, height2: number) {
-    const scaleX = width2 / width1;
-    const scaleY = height2 / height1;
-    return Math.max(scaleX, scaleY);
 }

package/src/engine/engine_context.ts

@@ -1382,61 +1382,21 @@ export class Context implements IContext {
 	 * @param settings Optional settings for the focus rect. These will override the `focusRectSettings` property
 	 */
 	public setCameraFocusRect(rect: FocusRect | null, settings?: Partial<FocusRectSettings>) {
-		const oldRect = this._focusRect;
 		this._focusRect = rect;
 		if (settings) {
 			Object.assign(this.focusRectSettings, settings);
 		}
-		if (settings?.damping === undefined) {
-			// if the new rect is on screen then set damping
-			if (oldRect) {
-				let domRect = oldRect as DOMRect;
-				if (oldRect instanceof HTMLElement) {
-					domRect = oldRect.getBoundingClientRect();
-				}
-				if (domRect && "top" in domRect) {
-					const allowedDistance = 100;
-					const isVisible = domRect.bottom >= -allowedDistance && domRect.right >= -allowedDistance && domRect.top <= window.innerHeight + allowedDistance && domRect.left <= window.innerWidth + allowedDistance;
-					if (isVisible) this.focusRectSettings.damping = .2;
-				}
-			}
-		}
-
 	}
 	get focusRect() { return this._focusRect; }
-	get focusRectSize(): null | { x: number, y: number, width: number, height: number } {
-		const rect = this._focusRect;
-		if (rect && (rect instanceof DOMRect || ("width" in rect && "height" in rect && "x" in rect && "y" in rect))) {
-			return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
-		}
-		else if (rect instanceof HTMLElement) {
-			const r = rect.getBoundingClientRect();
-			return { x: r.x, y: r.y, width: r.width, height: r.height };
-		}
-		return null;
-	}
 	/** Settings when a focus rect is set. Use `setCameraFocusRect(...)` to do so.  
 	 * This can be used to offset the renderer center e.g. to a specific DOM element.
 	 */
 	readonly focusRectSettings: FocusRectSettings = {
 		/** Controls how fast the rect is centered. Smaller values mean the rect is centered faster.   
 		 * A minimum value of 0 means the rect is centered instantly.
-		 * @default 0
+		 * @default .05
 		*/
-		damping: 0,
-
-		/**
-		 * Zoom factor when a focus rect is set.
-		 */
-		zoom: 1,
-		/**
-		 * Additional offset in pixels from the center of the rect
-		 */
-		offsetX: 0,
-		/**
-		 * Additional offset in pixels from the center of the rect
-		 */
-		offsetY: 0,
+		damping: .05
 	};
 	private _focusRect: FocusRect | null = null;
 
@@ -1568,6 +1528,14 @@ export class Context implements IContext {
 
 		if (this.isVisibleToUser || this.runInBackground) {
 
+			if (this._focusRect) {
+				if (this.mainCamera instanceof PerspectiveCamera) {
+					const settings = this.focusRectSettings;
+					const dt = settings.damping > 0 ? this.time.deltaTime / settings.damping : 1;
+					updateCameraFocusRect(this._focusRect, dt, this.mainCamera, this.renderer);
+				}
+			}
+
 			this._currentFrameEvent = FrameEvent.OnBeforeRender;
 
 			// should we move these callbacks in the regular three onBeforeRender events?
@@ -1584,14 +1552,6 @@ export class Context implements IContext {
 			this.executeCoroutines(FrameEvent.OnBeforeRender);
 			invokeLifecycleFunctions(this, FrameEvent.OnBeforeRender);
 
-			if (this._focusRect) {
-				if (this.mainCamera instanceof PerspectiveCamera) {
-					const settings = this.focusRectSettings;
-					const dt = settings.damping > 0 ? this.time.deltaTime / settings.damping : 1;
-					updateCameraFocusRect(this._focusRect, this.focusRectSettings, dt, this.mainCamera, this.renderer);
-				}
-			}
-
 			if (this._needsUpdateSize)
 				this.updateSize();
 

package/src/engine/engine_lightdata.ts

@@ -1,7 +1,7 @@
 import { ShaderChunk, Texture, UniformsLib, Vector4 } from "three";
 
 import { setDisposable } from "./engine_assetdatabase.js";
-import type { Context } from "./engine_setup.js";
+import { Context } from "./engine_setup.js";
 import type { SourceIdentifier } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
 import { LightmapType } from "./extensions/NEEDLE_lightmaps.js";
@@ -27,22 +27,22 @@ export interface ILightDataRegistry {
 
 export class LightDataRegistry implements ILightDataRegistry {
 
-    private readonly context: Context;
-    private readonly map: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
+    private _context: Context;
+    private _lightmaps: Map<SourceIdentifier, Map<LightmapType, Texture[]>> = new Map();
 
     clear() {
-        this.map.clear();
+        this._lightmaps.clear();
     }
 
     constructor(context: Context) {
-        this.context = context;
+        this._context = context;
     }
 
     registerTexture(sourceId: SourceIdentifier, type: LightmapType, tex: Texture, index: number) {
         if (debugLightmap) console.log("Registering ", LightmapType[type] + " \"" + sourceId + "\"", tex);
-        if (!this.map.has(sourceId))
-            this.map.set(sourceId, new Map());
-        const map = this.map.get(sourceId);
+        if (!this._lightmaps.has(sourceId))
+            this._lightmaps.set(sourceId, new Map());
+        const map = this._lightmaps.get(sourceId);
         const arr = map?.get(type) ?? [];
         if (arr.length < index) arr.length = index + 1;
         setDisposable(tex, false);
@@ -55,12 +55,12 @@ export class LightDataRegistry implements ILightDataRegistry {
     }
 
     tryGetSkybox(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Skybox]", sourceId, this.map)
+        if (debugLightmap) console.log("[Get Skybox]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Skybox, 0);
     }
 
     tryGetReflection(sourceId?: SourceIdentifier | null): Texture | null {
-        if (debugLightmap) console.log("[Get Reflection]", sourceId, this.map)
+        if (debugLightmap) console.log("[Get Reflection]", sourceId, this._lightmaps)
         return this.tryGet(sourceId, LightmapType.Reflection, 0);
     }
 
@@ -69,7 +69,7 @@ export class LightDataRegistry implements ILightDataRegistry {
             if (debugLightmap) console.warn("Missing source id");
             return null;
         }
-        const entry = this.map.get(sourceId);
+        const entry = this._lightmaps.get(sourceId);
         if (!entry) {
             if (debugLightmap) console.warn(`[Lighting] No ${LightmapType[type]} texture entry for`, sourceId);
             return null;

package/src/engine/engine_physics_rapier.ts

@@ -67,7 +67,6 @@ export class RapierPhysics implements IPhysicsEngine {
     debugRenderRaycasts: boolean = false;
 
     removeBody(obj: IComponent) {
-        if(debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
         if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
@@ -902,8 +901,6 @@ export class RapierPhysics implements IPhysicsEngine {
             // set the collider layers
             this.updateColliderCollisionGroups(collider);
 
-            if (debugPhysics) console.log("Created collider", collider.name, col);
-
             return col;
         }
         catch (e) {

package/src/engine/engine_scenelighting.ts

@@ -162,7 +162,7 @@ export class RendererData {
     private __currentReflectionId: SourceIdentifier | null = null;
 
     /** @internal */
-    internalEnableReflection(sourceId: SourceIdentifier) : Texture | null {
+    internalEnableReflection(sourceId: SourceIdentifier) {
         this.__currentReflectionId = sourceId;
         const settings = this._sceneLightSettings?.get(sourceId);
 
@@ -181,7 +181,7 @@ export class RendererData {
                     const tex = existing.Source;
                     tex.mapping = EquirectangularReflectionMapping;
                     scene.environment = tex;
-                    return tex;
+                    return;
                 }
                 else if (debug) console.warn("Could not find reflection for source", sourceId);
                 break;
@@ -196,21 +196,22 @@ export class RendererData {
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
-                        return tex;
                     }
                     else console.error("Missing ambient trilight", settings.sourceId);
+                    return;
                 case AmbientMode.Flat:
                     if (settings.ambientLight) {
                         const tex = createFlatTexture(settings.ambientLight, 64);
                         tex.colorSpace = SRGBColorSpace;
                         tex.mapping = EquirectangularReflectionMapping;
                         this.context.scene.environment = tex;
-                        return tex;
                     }
                     else console.error("Missing ambientlight", settings.sourceId);
+                    return;
+                default:
+                    return;
             }
         }
-        return null;
     }
 
     /** @internal */

package/src/engine/engine_utils.ts

@@ -381,14 +381,6 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
     }
     return uri;
 }
-
-export function toSourceId(src: string | null): SourceIdentifier | undefined {
-    if (!src) return undefined;
-    src = src.trim();
-    src = src.split("?")[0]?.split("#")[0];
-    return src;
-}
-
 // export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
 //     if (path && glbLocation && !path.includes("/")) {
 //         // get directory of glb and prepend it to the audio file path
@@ -801,7 +793,6 @@ const mutationObserverMap = new WeakMap<HTMLElement, HtmlElementExtra>();
 /** 
  * Register a callback when an {@link HTMLElement} attribute changes.   
  * This is used, for example, by the Skybox component to watch for changes to the environment-* and skybox-* attributes.
- * @returns A function that can be used to unregister the callback
 */
 export function addAttributeChangeCallback(domElement: HTMLElement, name: string, callback: AttributeChangeCallback) {
     if (!mutationObserverMap.get(domElement)) {
@@ -820,9 +811,6 @@ export function addAttributeChangeCallback(domElement: HTMLElement, name: string
         listeners.set(name, []);
     }
     listeners.get(name)!.push(callback);
-    return () => {
-        removeAttributeChangeCallback(domElement, name, callback);
-    }
 };
 
 /** 

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -107,7 +107,7 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
 
     private resolveTexture(entry: LightmapInfo, res: any) {
         const tex: Texture = res as unknown as Texture;
-        if (debug) console.log("Light Texture loaded:", tex);
+        if (debug) console.log("Lightmap loaded:", tex);
         if (tex?.isTexture) {
             if (!this.registry)
                 console.log(LightmapType[entry.type], entry.pointer, tex);

package/src/engine/webcomponents/logo-element.ts

@@ -32,22 +32,10 @@ export class NeedleLogoElement extends HTMLElement {
             cursor: pointer;
         }
         img {
+            width: 95px;
             height: 100%;
             align-self: end;
             margin-left: 0.6rem;
-            transition: transform 0.2s;
-        }
-        img.with-text {
-            width: 11.5ch;
-            &:hover {
-                transform: scale(1.02);
-            }
-        }
-        img.compact {
-            width: 1.7em;
-            &:hover {
-                transform: scale(1.1);
-            }
         }
         span {
             font-size: 1rem;
@@ -55,14 +43,12 @@ export class NeedleLogoElement extends HTMLElement {
         }
         </style>
         <div class="wrapper">
-            <img class="logo with-text" src=${needleLogoSVG} />
+            <img class="logo" src=${needleLogoSVG} />
         </div>
         `;
         this._root.appendChild(template.content.cloneNode(true));
         this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
         this._root.appendChild(this.wrapper);
-        this.logoElement = this._root.querySelector("img.logo") as HTMLImageElement;
-
         // this.wrapper.classList.add("wrapper");
 
         // this.wrapper.appendChild(this.logoElement);
@@ -81,24 +67,13 @@ export class NeedleLogoElement extends HTMLElement {
 
     private readonly _root: ShadowRoot;
     private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement;
+    private readonly logoElement: HTMLImageElement = document.createElement("img");
+    private readonly textElement: HTMLSpanElement = document.createElement("span");
 
     setLogoVisible(val: boolean) {
         this.logoElement.style.display = val ? "block" : "none";
     }
 
-    setType(type: "full" | "compact") {
-        if (type === "full") {
-            this.logoElement.src = needleLogoSVG;
-            this.logoElement.classList.remove("with-text");
-            this.logoElement.classList.remove("compact");
-        } else {
-            this.logoElement.src = needleLogoOnlySVG;
-            this.logoElement.classList.add("with-text");
-            this.logoElement.classList.add("compact");
-        }
-    }
-
 }
 if (!customElements.get(elementName))
     customElements.define(elementName, NeedleLogoElement);

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

@@ -459,7 +459,7 @@ export class NeedleMenuElement extends HTMLElement {
 
         .logo {
             cursor: pointer;
-            padding-left: 0.0rem;
+            padding-left: 0.6rem;
             padding-bottom: .02rem;
             margin-right: 0.5rem;
         }
@@ -664,8 +664,8 @@ export class NeedleMenuElement extends HTMLElement {
                         <slot name="end"></slot>
                     </div>
                 </div>
-                <div style="user-select:none;" class="logo">
-                    <span class="madewith notranslate" style="display:none;">powered by</span>
+                <div style="user-select:none" class="logo">
+                    <span class="madewith notranslate">powered by</span>
                 </div>
             </div>
             <button class="compact-menu-button">
@@ -698,7 +698,6 @@ export class NeedleMenuElement extends HTMLElement {
         this.wrapper.classList.add("wrapper");
 
         const logo = NeedleLogoElement.create();
-        logo.setType("compact");
         logo.style.minHeight = "1rem";
         this.logoContainer.append(logo);
         this.logoContainer.addEventListener("click", () => {

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

@@ -374,40 +374,40 @@ export class EngineLoadingView implements ILoadingViewHandler {
         //     }
         // }
 
-        // this.handleRuntimeLicense(this._loadingElement);
+        this.handleRuntimeLicense(this._loadingElement);
 
         return this._loadingElement;
     }
 
-    // private async handleRuntimeLicense(loadingElement: HTMLElement) {
-    //     // First check if we have a commercial license
-    //     let commercialLicense = hasCommercialLicense();
-    //     // if it's the case then we don't need to perform a runtime check
-    //     if (commercialLicense) return;
-
-    //     // If we don't have a commercial license, then we need to display our message
-    //     if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
-    //     const nonCommercialContainer = document.createElement("div");
-    //     nonCommercialContainer.style.paddingTop = ".6em";
-    //     nonCommercialContainer.style.fontSize = ".8em";
-    //     nonCommercialContainer.style.textTransform = "uppercase";
-    //     nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
-    //     nonCommercialContainer.style.cursor = "pointer";
-    //     nonCommercialContainer.style.userSelect = "none";
-    //     nonCommercialContainer.style.textAlign = "center";
-    //     nonCommercialContainer.style.pointerEvents = "all";
-    //     nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
-    //     nonCommercialContainer.style.opacity = "0";
-    //     loadingElement.appendChild(nonCommercialContainer);
-
-    //     // Use the runtime license check
-    //     if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
-    //         if (debugLicense) console.log("Waiting for runtime license check");
-    //         await runtimeLicenseCheckPromise;
-    //         commercialLicense = hasCommercialLicense();
-    //     }
-    //     if (commercialLicense) return;
-    //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
-    //     nonCommercialContainer.style.opacity = "1";
-    // }
+    private async handleRuntimeLicense(loadingElement: HTMLElement) {
+        // First check if we have a commercial license
+        let commercialLicense = hasCommercialLicense();
+        // if it's the case then we don't need to perform a runtime check
+        if (commercialLicense) return;
+
+        // If we don't have a commercial license, then we need to display our message
+        if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
+        const nonCommercialContainer = document.createElement("div");
+        nonCommercialContainer.style.paddingTop = ".6em";
+        nonCommercialContainer.style.fontSize = ".8em";
+        nonCommercialContainer.style.textTransform = "uppercase";
+        nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
+        nonCommercialContainer.style.cursor = "pointer";
+        nonCommercialContainer.style.userSelect = "none";
+        nonCommercialContainer.style.textAlign = "center";
+        nonCommercialContainer.style.pointerEvents = "all";
+        nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
+        nonCommercialContainer.style.opacity = "0";
+        loadingElement.appendChild(nonCommercialContainer);
+
+        // Use the runtime license check
+        if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
+            if (debugLicense) console.log("Waiting for runtime license check");
+            await runtimeLicenseCheckPromise;
+            commercialLicense = hasCommercialLicense();
+        }
+        if (commercialLicense) return;
+        nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
+        nonCommercialContainer.style.opacity = "1";
+    }
 }

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

@@ -570,10 +570,6 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
-            // HACK: if we set background-color to a color and then back to null we want the background-image attribute to re-apply
-            else if(this.getAttribute("background-image")) {
-                this.setAttribute("background-image", this.getAttribute("background-image")!);
-            }
         }
     }
 

package/src/engine-components/OrbitControls.ts

@@ -993,50 +993,11 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
     // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
-
     /** 
      * Fits the camera to show the objects provided (defaults to the scene if no objects are passed in) 
-     * @param options The options for fitting the camera. Use to provide objects to fit to, fit direction and size and other settings.
     */
-    fitCamera(options?: OrbitFitCameraOptions);
-    /** @deprecated Use fitCamera(options) */
-    fitCamera(objects?: Object3D | Array<Object3D>, options?: Omit<OrbitFitCameraOptions, "objects">);    
-    fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | OrbitFitCameraOptions, options?: OrbitFitCameraOptions): void {
-
-
-        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 = this.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;
-        }
-
-
+    fitCamera(options?: OrbitFitCameraOptions): void {
         const res = fitCamera({
-            objects: [...objects],
             ...options,
             autoApply: false,
             context: this.context,