@needle-tools/engine 4.8.6 → 4.8.7-next.3c34e8b

package/src/engine/engine_gameobject.ts

@@ -105,11 +105,7 @@ export class InstantiateOptions implements IInstantiateOptions {
 // });
 
 
-const $isActive = Symbol("isActive");
 export function isActiveSelf(go: Object3D): boolean {
-    // if (go[$isActive] === undefined) {
-    //     go[$isActive] = true;
-    // }
     return go.visible;
 }
 

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/engine_mainloop_utils.ts

@@ -3,6 +3,7 @@ import { CubeCamera, Object3D, Scene, WebGLCubeRenderTarget } from 'three';
 import { isDevEnvironment } from "./debug/index.js";
 import * as constants from "./engine_constants.js";
 import { ContextRegistry } from "./engine_context_registry.js";
+import { NEEDLE_ENGINE_FEATURE_FLAGS } from './engine_feature_flags.js';
 import { isActiveSelf } from './engine_gameobject.js';
 import { safeInvoke } from "./engine_generic_utils.js";
 import type { IComponent, IContext } from './engine_types.js';
@@ -31,7 +32,7 @@ export function processNewScripts(context: IContext) {
     if (debug)
         console.log("Register new components", context.new_scripts.length, [...context.new_scripts], context.alias ? ("element: " + context.alias) : context["hash"], context);
 
-    
+
     if (context.new_scripts_pre_setup_callbacks.length > 0) {
         for (const cb of context.new_scripts_pre_setup_callbacks) {
             if (!cb) continue;
@@ -39,7 +40,7 @@ export function processNewScripts(context: IContext) {
         }
         context.new_scripts_pre_setup_callbacks.length = 0;
     }
-    
+
     if (context.new_scripts.length <= 0) return;
 
     // TODO: update all the code from above to use this logic
@@ -269,8 +270,22 @@ export function isNeedleXRSessionEventReceiver(script: any, mode: XRSessionMode
 }
 
 
+let needsUpdate = true;
+export function markHierarchyDirty() {
+    needsUpdate = true;
+}
+
 /** @internal */
-export function updateIsActive(obj?: Object3D) {
+export function updateIsActive(obj?: Object3D, force: boolean = false) {
+
+    if (NEEDLE_ENGINE_FEATURE_FLAGS.experimentalSmartHierarchyUpdate) {
+
+        if (!force) {
+            if (!needsUpdate) return;
+        }
+        needsUpdate = false;
+    }
+
     if (!obj) obj = ContextRegistry.Current.scene;
     if (!obj) {
         console.trace("Invalid call - no current context.");
@@ -295,11 +310,11 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: Object3D, activeInHierarc
         return false;
     }
 
-    const isActive = isActiveSelf(go);
+    const activeSelf = isActiveSelf(go);
     if (activeInHierarchy) {
-        activeInHierarchy = isActive;
+        activeInHierarchy = activeSelf;
         // IF we update activeInHierarchy within a disabled hierarchy we need to check the parent
-        if (activeInHierarchy && go.parent) {
+        if (activeInHierarchy && go.parent && level === 0) {
             const parent = go.parent;
             activeInHierarchy = parent[constants.activeInHierarchyFieldName];
             if (activeInHierarchy === undefined) {
@@ -315,12 +330,13 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: Object3D, activeInHierarc
 
     const prevActive = go[constants.activeInHierarchyFieldName];
     const changed = prevActive !== activeInHierarchy;
-    go[constants.activeInHierarchyFieldName] = activeInHierarchy;
 
     // only raise events here if we didnt call enable etc already
     if (changed) {
+        go[constants.activeInHierarchyFieldName] = activeInHierarchy;
+
         if (debugHierarchy)
-            console.warn("ACTIVE CHANGE", go.name, isActive, go.visible, activeInHierarchy, "changed?" + changed, go);
+            console.warn("ACTIVE CHANGE", go.name, activeSelf, go.visible, activeInHierarchy, "changed?" + changed, go);
         if (allowEventCall) {
             perComponent(go, comp => {
                 if (activeInHierarchy) {

package/src/engine/engine_pmrem.ts

@@ -4,12 +4,16 @@ import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
 import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 
-import { disposeObjectResources, setDisposable } from "./engine_assetdatabase.js";
-
 const running: Map<string, Promise<Texture | null>> = new Map();
 
 // #region api
 
+/**
+ * Loads a PMREM texture from the given URL. This also supports the ultra-fast preprocessed environment maps (PMREM) format.
+ * @param url The URL of the PMREM texture to load.
+ * @param renderer The WebGLRenderer to use for loading the texture.
+ * @returns A promise that resolves to the loaded texture or null if loading failed.
+ */
 export function loadPMREM(url: string, renderer: WebGLRenderer): Promise<Texture | null> {
     if (running.has(url)) {
         return running.get(url)!;
@@ -17,47 +21,13 @@ export function loadPMREM(url: string, renderer: WebGLRenderer): Promise<Texture
     const actualUrl = new URL(url, window.location.href);
     const promise = internalLoadPMREM(actualUrl, renderer);
     running.set(url, promise);
+    promise.finally(() => {
+        running.delete(url);
+    });
     return promise;
 }
 
 
-
-// #region Cache
-
-declare type SkyboxCacheEntry = { src: string, texture: Promise<Texture | null> };
-function ensureGlobalCache() {
-    if (!globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"])
-        globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] = new Array<SkyboxCacheEntry>();
-    return globalThis["NEEDLE_ENGINE_SKYBOX_TEXTURES"] as Array<SkyboxCacheEntry>;
-}
-
-function tryGetPreviouslyLoadedTexture(src: string) {
-    const cache = ensureGlobalCache();
-    const found = cache.find(x => x.src === src);
-    if (found) {
-        return found.texture;
-    }
-    return null;
-}
-async function disposeCachedTexture(tex: Promise<Texture | null>) {
-    const texture = await tex;
-    if (!texture) return;
-    setDisposable(texture, true);
-    disposeObjectResources(texture);
-}
-function registerPromise(src: string, texture: Promise<Texture | null>) {
-    const cache = ensureGlobalCache();
-    // Make sure the cache doesnt get too big
-    while (cache.length > 5) {
-        const entry = cache.shift();
-        if (entry) { disposeCachedTexture(entry.texture); }
-    }
-    texture.then(t => { return setDisposable(t, false) });
-    cache.push({ src, texture });
-}
-
-
-
 // #region loading
 
 
@@ -67,11 +37,6 @@ async function internalLoadPMREM(url: URL, renderer: WebGLRenderer) {
     const pathname = url.pathname;
     const isPMREM_URL: boolean = url.toString().toLowerCase().includes("pmrem") || url.searchParams.get("pmrem") != null;
 
-    const cached = tryGetPreviouslyLoadedTexture(pathname);
-    if (cached) {
-        const res = await cached;
-        if (res?.source?.data?.length > 0 || res?.source?.data?.data?.length) return res;
-    }
     const isEXR = pathname.endsWith(".exr");
     const isHdr = pathname.endsWith(".hdr");
     const isKtx2 = pathname.endsWith(".ktx2");
@@ -110,7 +75,6 @@ async function internalLoadPMREM(url: URL, renderer: WebGLRenderer) {
             return tex;
         });
 
-    registerPromise(str, promise);
     const texture = await promise.catch(_err => {
         console.warn("Failed to load texture from url:", url);
         return null;

package/src/engine/extensions/extensions.ts

@@ -22,11 +22,11 @@ const debug = getParam("debugextensions");
 
 // lazily import the GLTFAnimationPointerExtension in case it doesnt exist (e.g. using vanilla three)
 let GLTFAnimationPointerExtension: any;
-const KHR_ANIMATIONPOINTER_IMPORT = import("three/examples/jsm/loaders/GLTFLoaderAnimationPointer.js").then(async mod => {
+const KHR_ANIMATIONPOINTER_IMPORT = import("@needle-tools/three-animation-pointer").then(async mod => {
     GLTFAnimationPointerExtension = mod.GLTFAnimationPointerExtension;
     return GLTFAnimationPointerExtension;
 }).catch(e => {
-    console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three for full KHR_animation support", e);
+    console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three-animationpointer for full KHR_animation support", e);
 });
 
 

package/src/engine/js-extensions/Object3D.ts

@@ -1,7 +1,7 @@
 import { Object3D, Quaternion, Vector3 } from "three";
 import { TransformControlsGizmo } from "three/examples/jsm/controls/TransformControls.js";
 
-import { addComponent, addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components.js";
+import { addComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components.js";
 import { destroy, isActiveSelf, setActive } from "../../engine/engine_gameobject.js";
 import {
     getTempVector,
@@ -15,7 +15,9 @@ import {
     setWorldScale
 }
     from "../../engine/engine_three_utils.js";
-import type { ComponentInit, Constructor, ConstructorConcrete, HideFlags,IComponent as Component, IComponent } from "../../engine/engine_types.js";
+import type { ComponentInit, Constructor, ConstructorConcrete, HideFlags, IComponent as Component, IComponent } from "../../engine/engine_types.js";
+import { NEEDLE_ENGINE_FEATURE_FLAGS } from "../engine_feature_flags.js";
+import { markHierarchyDirty } from "../engine_mainloop_utils.js";
 import { applyPrototypeExtensions, registerPrototypeExtensions } from "./ExtensionUtils.js";
 
 
@@ -150,6 +152,27 @@ export function apply(object: Object3D) {
     }
 }
 
+if (NEEDLE_ENGINE_FEATURE_FLAGS.experimentalSmartHierarchyUpdate) {
+
+    const addFn = Object3D.prototype.add;
+    Object3D.prototype.add = function (...args: any) {
+        markHierarchyDirty();
+        return addFn.apply(this, args);
+    }
+
+    const attachFn = Object3D.prototype.attach;
+    Object3D.prototype.attach = function (...args: any) {
+        markHierarchyDirty();
+        return attachFn.apply(this, args);
+    }
+
+    const removeFn = Object3D.prototype.remove;
+    Object3D.prototype.remove = function (...args: any) {
+        markHierarchyDirty();
+        return removeFn.apply(this, args);
+    }
+}
+
 
 Object3D.prototype["SetActive"] = function (active: boolean) {
     this.visible = active;

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/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;
             }
         }
@@ -393,7 +404,7 @@ export class DropListener extends Behaviour {
      * @param fileList Array of dropped files
      * @param ctx Context information about where 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 +438,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 +489,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 +533,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;
+    }
 }

package/src/engine-components/OrbitControls.ts

@@ -649,12 +649,12 @@ export class OrbitControls extends Behaviour implements ICameraController {
             if (this._lookTargetLerpActive) {
                 this._lookTargetLerp01 += this.context.time.deltaTime / this._lookTargetLerpDuration;
                 if (this._lookTargetLerp01 >= 1) {
-                    this._controls.target.copy(this._lookTargetEndPosition);
+                    this.lerpLookTarget(this._lookTargetEndPosition, this._lookTargetEndPosition, 1);
                     this._lookTargetLerpActive = false;
                     this.dispatchEvent(new CameraTargetReachedEvent(this, "lookat"));
                 } else {
                     const t = Mathf.easeInOutCubic(this._lookTargetLerp01);
-                    this._controls.target.lerpVectors(this._lookTargetStartPosition, this._lookTargetEndPosition, t);
+                    this.lerpLookTarget(this._lookTargetStartPosition, this._lookTargetEndPosition, t);
                 }
             }
 
@@ -729,7 +729,9 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
             // this._controls.zoomToCursor = this.zoomToCursor;
             if (!this.context.isInXR) {
-                if (!freeCam && this.lookAtConstraint?.locked) this.setLookTargetFromConstraint(0, this.lookAtConstraint01);
+                if (!freeCam && this.lookAtConstraint?.locked && !this._lookTargetLerpActive) {
+                    this.setLookTargetFromConstraint(0, this.lookAtConstraint01);
+                }
                 this._controls.update(this.context.time.deltaTime);
 
                 if (debug) {
@@ -910,7 +912,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         }
 
         if (immediateOrDuration === true) {
-            this._controls.target.copy(this._lookTargetEndPosition);
+            this.lerpLookTarget(this._lookTargetEndPosition, this._lookTargetEndPosition, 1);
         }
         else {
             this._lookTargetLerpActive = true;
@@ -941,20 +943,18 @@ export class OrbitControls extends Behaviour implements ICameraController {
             const target = sources[index];
             if (target) {
                 target.getWorldPosition(this._lookTargetEndPosition);
-                this.lerpLookTarget(this._lookTargetEndPosition, t);
+                this.lerpLookTarget(this._controls.target, this._lookTargetEndPosition, t);
                 return true;
             }
         }
         return false;
     }
 
-    /** @deprecated use `controls.target.lerp(position, delta)` */
-    public lerpTarget(position: Vector3, delta: number) { return this.lerpLookTarget(position, delta); }
-
-    private lerpLookTarget(position: Vector3, delta: number) {
+    private lerpLookTarget(start: Vector3, position: Vector3, t: number) {
         if (!this._controls) return;
-        if (delta >= 1) this._controls.target.copy(position);
-        else this._controls.target.lerp(position, delta);
+        if (t >= 1) this._controls.target.copy(position);
+        else this._controls.target.lerpVectors(start, position, t);
+        if (this.lookAtConstraint) this.lookAtConstraint.setConstraintPosition(this._controls.target);
     }
 
     private setTargetFromRaycast(ray?: Ray, immediateOrDuration: number | boolean = false): boolean {
@@ -1063,7 +1063,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             return;
         }
 
-        const verticalFov = options.fov || camera.fov;
+        const verticalFov = fov;
         const horizontalFov = 2 * Math.atan(Math.tan(verticalFov * Math.PI / 360 / 2) * camera.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));
@@ -1161,16 +1161,19 @@ declare type FitCameraOptions = {
      * 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,
     /** If true the camera will move immediately to the new position, otherwise it will lerp 
      * @default false
      */
     immediate?: boolean,
+
     /** If set to "y" the camera will be centered in the y axis */
     centerCamera?: "none" | "y",
     cameraNearFar?: "keep" | "auto",
+
     fov?: number,
+
+    /** Fit offset: A factor to multiply the distance to the objects by
+     * @default 1.1
+     */
+    fitOffset?: number,
 }

package/src/engine-components/Skybox.ts

@@ -217,9 +217,9 @@ export class RemoteSkybox extends Behaviour {
             if (debug) console.warn("RemoteSkybox: Failed to load texture from url", url);
             return false;
         }
-        // Check if we're still enabled
-        if (!this.enabled) {
-            if (debug) console.warn("RemoteSkybox: Component is not enabled, aborting setSkybox");
+        // Check if we're not disabled or destroyed
+        if (!this.enabled || this.destroyed) {
+            if (debug) console.warn("RemoteSkybox: Component is disabled or destroyed");
             return false;
         }
         // Check if the url has changed while loading
@@ -239,7 +239,6 @@ export class RemoteSkybox extends Behaviour {
         const envMap = this._prevLoadedEnvironment;
         if (!envMap) return;
 
-
         if ((envMap instanceof CubeTexture || envMap instanceof CompressedCubeTexture) || envMap.mapping == CubeUVReflectionMapping) {
             // Nothing to do
         }
@@ -248,6 +247,11 @@ export class RemoteSkybox extends Behaviour {
             envMap.needsUpdate = true;
         }
 
+        if(this.destroyed) return;
+        if(!this.context) {
+            console.warn("RemoteSkybox: Context is not available - can not apply skybox.");
+            return;
+        }
 
         // capture state
         if (this.context.scene.background !== envMap)