@needle-tools/engine 4.14.0-next.31f837e → 4.14.0-next.b2e3b1a

package/src/engine-components/NeedleMenu.ts

@@ -2,6 +2,9 @@ import type { Context } from '../engine/engine_context.js';
 import { serializable } from '../engine/engine_serialization.js';
 import { DeviceUtilities } from '../engine/engine_utils.js';
 import { Behaviour } from './Component.js';
+// Type-only imports for TSDoc @see links
+import type { ScreenCapture } from './ScreenCapture.js';
+import type { Voip } from './Voip.js';
 
 /**
  * [NeedleMenu](https://engine.needle.tools/docs/api/NeedleMenu) provides configuration for the built-in UI menu.

package/src/engine-components/NestedGltf.ts

@@ -64,7 +64,7 @@ export class NestedGltf extends Behaviour {
      * EXPERIMENTAL for cloud asset loading
      */
     @serializable()
-    loadAssetInParent = true;
+    loadAssetInParent: boolean = true;
 
 
     private _isLoadingOrDoneLoading: boolean = false;

package/src/engine-components/ReflectionProbe.ts

@@ -1,13 +1,14 @@
 import { Color, CubeReflectionMapping, CubeTexture, EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, MeshStandardMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
 
 import { isDevEnvironment, showBalloonWarning } from "../engine/debug/index.js";
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { Context } from "../engine/engine_setup.js";
 import type { IRenderer } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
 import { BoxHelperComponent } from "./BoxHelperComponent.js";
 import { Behaviour } from "./Component.js";
-import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
+import { EventList } from "./EventList.js";
 
 export const debug = getParam("debugreflectionprobe");
 const disable = getParam("noreflectionprobe");
@@ -37,7 +38,6 @@ const $reflectionProbeKey = Symbol("reflectionProbeKey");
  * @see {@link Renderer} for material and rendering control
  * @see {@link Light} for scene lighting
  */
-
 export class ReflectionProbe extends Behaviour {
 
     private static _probes: Map<Context, ReflectionProbe[]> = new Map();
@@ -46,6 +46,24 @@ export class ReflectionProbe extends Behaviour {
         return !!(material as any)[$reflectionProbeKey];
     }
 
+
+    /**
+     * Event invoked when a reflection probe is enabled. Used internally by Renderer components to update probes when they become active. Not recommended to call this directly in most cases.
+     */
+    static readonly onEnabled: EventList<ReflectionProbe> = new EventList();
+    static readonly onDisabled: EventList<ReflectionProbe> = new EventList();
+
+    /**
+     * Gets the active reflection probe for the given object and context. If `isAnchor` is true, it will only return a probe if the object is the anchor of that probe. Otherwise, it checks if the object is within the probe's influence area.  
+     * 
+     * Note: This method is used internally by the Renderer component to determine which reflection probe to apply. It is not recommended to call this method directly in most cases. Instead, assign probes to renderers using the "anchor" property or rely on automatic assignment when supported.  
+     * Note: Volume-based automatic assignment is not fully supported yet, so explicit assignment is recommended for now.  
+     * 
+     * @param object The object to find a reflection probe for
+     * @param context The context to search within
+     * @param isAnchor If true, only return a probe if the object is the anchor of that probe
+     * @param anchor Optional anchor object to match against probes
+     */
     public static get(object: Object3D | null | undefined, context: Context, isAnchor: boolean, anchor?: Object3D): ReflectionProbe | null {
         if (!object || object.isObject3D !== true) return null;
         if (disable) return null;
@@ -73,6 +91,7 @@ export class ReflectionProbe extends Behaviour {
 
     private _texture!: Texture;
 
+    @serializable(Texture)
     set texture(tex: Texture) {
         if (this._texture === tex) return;
         this._texture = tex;
@@ -93,11 +112,26 @@ export class ReflectionProbe extends Behaviour {
         return this._texture;
     }
 
+    @serializable()
+    intensity: number = 1;
+
+    /**
+     * Defines the center and size of the reflection probe's influence area.
+     */
     @serializable(Vector3)
     center?: Vector3;
+
+    /**
+     * Defines the size of the reflection probe's influence area. Objects within this box will be affected by the probe's reflections.
+     */
     @serializable(Vector3)
     size?: Vector3;
 
+    /**
+     * Workaround for lightmap. Compensates for the fact that lightmaps are pre-multiplied by intensity, while reflection probes are not. This means that if you use both lightmaps and reflection probes, you may need to adjust this value to get the correct balance between them. The default value of `Math.PI` is a good starting point for most cases, but you may need to tweak it based on your specific lighting setup and artistic needs.
+     */
+    __lightmapIntensityScale: boolean = true;
+
     private _boxHelper?: BoxHelperComponent;
 
     private isInBox(obj: Object3D) {
@@ -124,6 +158,15 @@ export class ReflectionProbe extends Behaviour {
             this._texture.needsUpdate = true;
         }
     }
+
+    onEnable(): void {
+        ReflectionProbe.onEnabled?.invoke(this);
+    }
+
+    onDisable(): void {
+        ReflectionProbe.onDisabled?.invoke(this);
+    }
+
     start(): void {
         if (!this._texture) {
             console.warn(`[ReflectionProbe] Missing texture. Please assign a custom cubemap texture. To use reflection probes assign them to your renderer's "anchor" property.`);
@@ -140,40 +183,28 @@ export class ReflectionProbe extends Behaviour {
         }
     }
 
-    onSet(_rend: IRenderer) {
+    apply(object: Object3D) {
         if (disable) return;
         if (!this.enabled) return;
-        if (_rend.sharedMaterials?.length <= 0) return;
         if (!this.texture) return;
-
-        const object = _rend.gameObject as unknown as Object3D;
-
-        for (let i = 0; i < _rend.sharedMaterials.length; i++) {
-            const material = _rend.sharedMaterials[i];
-            if (!material) {
-                continue;
-            }
-            if (material["envMap"] === undefined) {
-                continue;
-            }
-
-            if (debug) console.log("Setting reflection probe on material", material.name, "for renderer", _rend.name);
-
-            const propertyBlock = MaterialPropertyBlock.get(object);
-            propertyBlock.setOverride("envMap", this.texture);
-            // propertyBlock.setOverride("color", new Color(0xff0000));
-
-            (material as any)[$reflectionProbeKey] = true;
+        const propertyBlock = MaterialPropertyBlock.get(object);
+        propertyBlock.setOverride("envMap", this.texture);
+        propertyBlock.setOverride("envMapRotation", this.gameObject.rotation);
+
+        let intensity = this.intensity;
+        if (this.__lightmapIntensityScale && propertyBlock.getOverride("lightMap")) {
+            // @TODO: Remove this here and in Renderer https://linear.app/needle/issue/NE-6922
+            intensity /= Math.PI;
         }
+        propertyBlock.setOverride("envMapIntensity", intensity);
     }
 
-    onUnset(_rend: IRenderer) {
-        // const object = _rend.gameObject as unknown as Object3D;
-
-        for (let i = 0; i < _rend.sharedMaterials.length; i++) {
-            const material = _rend.sharedMaterials[i];
-            if (material) {
-                delete (material as any)[$reflectionProbeKey];
+    unapply(obj: Object3D) {
+        const block = MaterialPropertyBlock.get(obj);
+        if (block) {
+            const current = block.getOverride("envMap")?.value;
+            if (current === this.texture) {
+                block.removeOveride("envMap");
             }
         }
     }

package/src/engine-components/Renderer.ts

@@ -638,12 +638,16 @@ export class Renderer extends Behaviour implements IRenderer {
 
         this.updateReflectionProbe();
 
-        // this.testIfLODLevelsAreAvailable();
+        ReflectionProbe.onEnabled.addEventListener(this.onReflectionProbeEnabled);
+        ReflectionProbe.onDisabled.addEventListener(this.onReflectionProbeDisabled);
     }
 
     onDisable() {
         this.setVisibility(false);
 
+        ReflectionProbe.onEnabled.removeEventListener(this.onReflectionProbeEnabled);
+        ReflectionProbe.onDisabled.removeEventListener(this.onReflectionProbeDisabled);
+
         if (this._handles && this._handles.length > 0) {
             this.setInstancingEnabled(false);
         }
@@ -662,14 +666,24 @@ export class Renderer extends Behaviour implements IRenderer {
         }
     }
 
+    private readonly onReflectionProbeEnabled = () => {
+        this.updateReflectionProbe();
+    }
+    private onReflectionProbeDisabled = (probe: ReflectionProbe) => {
+        if (this._reflectionProbe === probe) {
+            this._reflectionProbe.unapply(this.gameObject);
+            this._reflectionProbe = null;
+        }
+    }
+
 
     onBeforeRender() {
         if (!this.gameObject) {
             return;
         }
 
-        if (this._probeAnchorLastFrame !== this.probeAnchor) {
-            this._reflectionProbe?.onUnset(this);
+        if (this._probeAnchorLastFrame !== this.probeAnchor || this._reflectionProbe?.activeAndEnabled === false) {
+            this._reflectionProbe?.unapply(this.gameObject);
             this.updateReflectionProbe();
         }
 
@@ -726,8 +740,21 @@ export class Renderer extends Behaviour implements IRenderer {
         }
 
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-                this._reflectionProbe.onSet(this);
+            // @TODO: when reflection probes are applied via bounding box we currently NEVER update it again
+            // if(this.probeAnchor === this._reflectionProbe.gameObject)
+            this._reflectionProbe.apply(this.gameObject);
+            // else {
+            //     const probe = this._reflectionProbe;
+            //     this._updateReflectionProbe();
+            //     console.log(this.name, "Reflection probe updated on before render. Probe anchor changed:", this.probeAnchor !== this._probeAnchorLastFrame, "Probe active:", probe.activeAndEnabled, "New probe anchor:", this._reflectionProbe?.gameObject.name);
+            //     if(!this._reflectionProbe) probe?.unapply(this.gameObject);
+            //     else this._reflectionProbe?.apply(this.gameObject);
+            // }
+        }
+        else if (this.reflectionProbeUsage === ReflectionProbeUsage.Off && this._reflectionProbe) {
+            this._reflectionProbe.unapply(this.gameObject);
         }
+
         // since three 163 we need to set the envMap to the scene envMap if it is not set
         // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
         // internal issue: https://linear.app/needle/issue/NE-6363
@@ -766,8 +793,8 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
-        if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
-            this._reflectionProbe.onUnset(this);
+        if (this._reflectionProbe?.activeAndEnabled === false) {
+            this._reflectionProbe.unapply(this.gameObject);
         }
 
         if (this.static && this.gameObject.matrixAutoUpdate) {
@@ -798,6 +825,7 @@ export class Renderer extends Behaviour implements IRenderer {
     private updateReflectionProbe() {
         // handle reflection probe
         this._reflectionProbe = null;
+
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
             // update the reflection probe right before rendering
             // if we do it immediately the reflection probe might not be enabled yet 

package/src/engine-components/RendererLightmap.ts

@@ -1,9 +1,9 @@
 import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
 import { Group, Mesh, Object3D, ShaderMaterial, Texture, Vector2, Vector4 } from "three";
 
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import type { Context } from "../engine/engine_setup.js";
 import { getParam } from "../engine/engine_utils.js";
-import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import { type Renderer } from "./Renderer.js";
 
 const debug = getParam("debuglightmaps");
@@ -146,8 +146,7 @@ export class RendererLightmap {
         }
         const block = MaterialPropertyBlock.get(this.gameObject);
         if (block) {
-            block.clearOverride("lightMap");
-            block.clearOverride("lightMapIntensity");
+            block.removeOveride("lightMap");
         }
     }
 

package/src/engine-components/SeeThrough.ts

@@ -1,11 +1,11 @@
 import { Material, Object3D, Object3DEventMap, Vector3 } from "three";
 
 import { Gizmos } from "../engine/engine_gizmos.js";
+import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js";
-import { USDObject, USDZExporterContext } from "./api.js";
 import type { Camera } from "./Camera.js";
 import { Behaviour } from "./Component.js";
 import { IUSDExporterExtension } from "./export/usdz/Extension.js";
@@ -15,20 +15,20 @@ import { Renderer } from "./Renderer.js";
 
 const debugSeeThrough = getParam("debugseethrough");
 
-type MaterialState = {
-    opacity: number,
-    transparent: boolean,
-    alphaHash: boolean
-}
-
-type MaterialWithState = Material & {
-    /** Original values */
-    userData: {
-        seeThrough: {
-            initial: MaterialState,
-        }
-    }
-};
+// type MaterialState = {
+//     opacity: number,
+//     transparent: boolean,
+//     alphaHash: boolean
+// }
+
+// type MaterialWithState = Material & {
+//     /** Original values */
+//     userData: {
+//         seeThrough: {
+//             initial: MaterialState,
+//         }
+//     }
+// };
 
 let i = 0;
 
@@ -176,26 +176,26 @@ export class SeeThrough extends Behaviour {
     onEnable() {
         this._needsUpdate = true;
         this._renderer = null;
-        SeeThroughUsdzExporterPlugin.components.push(this);
+        // SeeThroughUsdzExporterPlugin.components.push(this);
     }
 
     /**  @internal */
     onDisable() {
-        this._renderer?.forEach(r => {
-            const original = this.rendererMaterialsOriginal.get(r);
-            for (let i = 0; i < r.sharedMaterials.length; i++) {
-                const mat = r.sharedMaterials[i];
-                if (!mat) continue;
-                if (original && original[i]) {
-                    r.sharedMaterials[i] = original[i];
-                }
-            }
-            this.rendererMaterials.delete(r);
-            this.rendererMaterialsOriginal.delete(r);
-        });
-
-        const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
-        if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
+        // this._renderer?.forEach(r => {
+        //     const original = this.rendererMaterialsOriginal.get(r);
+        //     for (let i = 0; i < r.sharedMaterials.length; i++) {
+        //         const mat = r.sharedMaterials[i];
+        //         if (!mat) continue;
+        //         if (original && original[i]) {
+        //             r.sharedMaterials[i] = original[i];
+        //         }
+        //     }
+        //     this.rendererMaterials.delete(r);
+        //     this.rendererMaterialsOriginal.delete(r);
+        // });
+
+        // const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
+        // if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
     }
 
     /**
@@ -239,8 +239,8 @@ export class SeeThrough extends Behaviour {
         }
     }
 
-    private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
-    private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
+    // private readonly rendererMaterials = new WeakMap<Renderer, Array<MaterialWithState>>();
+    // private readonly rendererMaterialsOriginal = new WeakMap<Renderer, Array<Material>>();
 
     private updateDirection() {
         this.referencePoint ??= this.context.scene;
@@ -272,66 +272,81 @@ export class SeeThrough extends Behaviour {
                 renderer.gameObject.raycastAllowed = true;
             }
 
-            if (!this.rendererMaterials.has(renderer)) {
-                const originalMaterials = new Array<Material>();
-                const clonedMaterials = new Array<MaterialWithState>();
-
-                // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
-                for (let i = 0; i < renderer.sharedMaterials.length; i++) {
-                    const mat = renderer.sharedMaterials[i];
-                    if (!mat) continue;
-                    originalMaterials.push(mat);
-                    const matClone = mat.clone() as MaterialWithState;
-                    // @ts-ignore
-                    matClone.userData = mat.userData || {};
-                    matClone.userData.seeThrough = {
-                        initial: {
-                            opacity: matClone.opacity,
-                            transparent: matClone.transparent,
-                            alphaHash: matClone.alphaHash
-                        }
-                    }
-                    clonedMaterials.push(matClone);
-                    renderer.sharedMaterials[i] = matClone;
-                }
-
-                this.rendererMaterials.set(renderer, clonedMaterials);
-                this.rendererMaterialsOriginal.set(renderer, originalMaterials);
-            }
-
-            const materials = renderer.hasLightmap ? renderer.sharedMaterials : this.rendererMaterials.get(renderer);
+            // if (!this.rendererMaterials.has(renderer)) {
+            //     const originalMaterials = new Array<Material>();
+            //     const clonedMaterials = new Array<MaterialWithState>();
+
+            //     // We clone the materials once and store them, so we can modify the opacity without affecting other objects using the same material. This could potentially be optimized further to re-use materials between renderers if multiple renderers use the same material.
+            //     for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+            //         const mat = renderer.sharedMaterials[i];
+            //         if (!mat) continue;
+            //         originalMaterials.push(mat);
+            //         const matClone = mat.clone() as MaterialWithState;
+            //         // @ts-ignore
+            //         matClone.userData = mat.userData || {};
+            //         matClone.userData.seeThrough = {
+            //             initial: {
+            //                 opacity: matClone.opacity,
+            //                 transparent: matClone.transparent,
+            //                 alphaHash: matClone.alphaHash
+            //             }
+            //         }
+            //         clonedMaterials.push(matClone);
+            //         // renderer.sharedMaterials[i] = matClone;
+            //     }
+
+            //     this.rendererMaterials.set(renderer, clonedMaterials);
+            //     this.rendererMaterialsOriginal.set(renderer, originalMaterials);
+            // }
+
+            const materials = renderer.sharedMaterials;// : this.rendererMaterials.get(renderer);
             if (!materials) return;
 
-            for (const mat of materials) {
-                if (!mat) continue;
+            const block = MaterialPropertyBlock.get(renderer.gameObject);
 
-                let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
-                if (newAlpha >= 0.99) newAlpha = 1;
-                else if (newAlpha <= 0.01) newAlpha = 0;
+            const currentOpacity = (block.getOverride("opacity")?.value ?? materials[0].opacity ?? 1);
 
+            let newAlpha = Mathf.lerp(currentOpacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            if (newAlpha >= 0.99) newAlpha = 1;
+            else if (newAlpha <= 0.01) newAlpha = 0;
 
-                const wasTransparent = mat.transparent;
-                const wasAlphaHash = mat.alphaHash;
-                const previousOpacity = mat.opacity;
+            // const currentTransparent = (block.getOverride("transparent")?.value ?? materials[0].transparent ?? false) as boolean;
 
-                mat.alphaHash = this.useAlphaHash;
+            block.setOverride("alphaHash", this.useAlphaHash);
+            block.setOverride("opacity", newAlpha);
+            block.setOverride("transparent", newAlpha >= 0.99999 ? false : !this.useAlphaHash);
 
-                if (mat.userData && "seeThrough" in mat.userData) {
-                    const initial = mat.userData.seeThrough.initial as MaterialState;
-                    mat.opacity = initial.opacity * newAlpha;
-                    mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
-                }
-                else {
-                    mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
-                }
 
-                if (wasTransparent !== mat.transparent 
-                    || wasAlphaHash !== mat.alphaHash 
-                    || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
-                ) {
-                    mat.needsUpdate = true;
-                }
-            }
+            // for (const mat of materials) {
+            //     if (!mat) continue;
+
+            //     let newAlpha = Mathf.lerp(mat.opacity, targetAlpha, duration <= 0 ? 1 : this.context.time.deltaTime / duration);;
+            //     if (newAlpha >= 0.99) newAlpha = 1;
+            //     else if (newAlpha <= 0.01) newAlpha = 0;
+
+
+            //     const wasTransparent = mat.transparent;
+            //     const wasAlphaHash = mat.alphaHash;
+            //     const previousOpacity = mat.opacity;
+
+            //     mat.alphaHash = this.useAlphaHash;
+
+            //     if (mat.userData && "seeThrough" in mat.userData) {
+            //         const initial = mat.userData.seeThrough.initial as MaterialState;
+            //         mat.opacity = initial.opacity * newAlpha;
+            //         mat.transparent = mat.opacity >= 1 ? initial.transparent : !this.useAlphaHash;
+            //     }
+            //     else {
+            //         mat.transparent = mat.opacity >= 1 ? false : !this.useAlphaHash;
+            //     }
+
+            //     if (wasTransparent !== mat.transparent 
+            //         || wasAlphaHash !== mat.alphaHash 
+            //         || mat.opacity !== previousOpacity // MeshPhysicsMaterial needs that and maybe other materials too...
+            //     ) {
+            //         mat.needsUpdate = true;
+            //     }
+            // }
         });
     }
 
@@ -339,33 +354,33 @@ export class SeeThrough extends Behaviour {
 
 
 ;
-class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
+// class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
 
-    static readonly components: SeeThrough[] = [];
+//     static readonly components: SeeThrough[] = [];
 
-    get extensionName() {
-        return "SeeThrough";
-    }
+//     get extensionName() {
+//         return "SeeThrough";
+//     }
 
-    // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
-    //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
-    //     if(!component) return;
-    //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
+//     // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
+//     //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
+//     //     if(!component) return;
+//     //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
 
-    //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
+//     //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
 
-    //     model.addEventListener("serialize", (writer, context) => {
-    //         writer.appendLine(`# SeeThrough component on ${object.name}`);
-    //     });
-    // }
+//     //     model.addEventListener("serialize", (writer, context) => {
+//     //         writer.appendLine(`# SeeThrough component on ${object.name}`);
+//     //     });
+//     // }
 
-}
+// }
 
-const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
+// const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
 
-USDZExporter.beforeExport.addEventListener(args => {
-    if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
-    if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
-        args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
-    }
-});
+// USDZExporter.beforeExport.addEventListener(args => {
+//     if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
+//     if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
+//         args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
+//     }
+// });

package/src/engine-components/SmoothFollow.ts

@@ -73,7 +73,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    followFactor = .1;
+    followFactor: number = .1;
 
     /**
      * Speed factor for rotation following.
@@ -83,7 +83,7 @@ export class SmoothFollow extends Behaviour {
      * @default 0.1
      */
     @serializable()
-    rotateFactor = .1;
+    rotateFactor: number = .1;
 
     /**
      * Which position axes to follow. Use bitwise OR to combine:

package/src/engine-components/ui/Button.ts

@@ -204,7 +204,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
     // image? : Image;
 
     @serializable()
-    set interactable(value) {
+    set interactable(value: boolean) {
         this._interactable = value;
         if (this._image) {
             this._image.setInteractable(value);

package/src/engine-components/ui/Raycaster.ts

@@ -63,7 +63,7 @@ export class ObjectRaycaster extends Raycaster {
     private raycastHits: Intersection[] = [];
 
     @serializable()
-    ignoreSkinnedMeshes = false;
+    ignoreSkinnedMeshes: boolean = false;
 
     start(): void {
         this.targets = [this.gameObject];

package/src/engine-components/web/ViewBox.ts

@@ -1,13 +1,20 @@
 import { Camera, Matrix4, PerspectiveCamera, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
+// Type-only imports for TSDoc @see links
+import type { Context } from "../../engine/engine_context.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../../engine/engine_three_utils.js";
 import { registerType } from "../../engine/engine_typestore.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { RGBAColor } from "../../engine/js-extensions/RGBAColor.js";
+import type { Camera as CameraComponent } from "../Camera.js";
 import { Behaviour } from "../Component.js";
+import type { DragControls } from "../DragControls.js";
+import type { LookAtConstraint } from "../LookAtConstraint.js";
+import type { OrbitControls } from "../OrbitControls.js";
+import type { SceneSwitcher } from "../SceneSwitcher.js";
 
 
 const debugParam = getParam("debugviewbox");
@@ -83,7 +90,7 @@ export type ViewBoxMode = "continuous" | "once";
  * scene.add(viewBox);
  * ```
  *
- * @see {@link Camera} - The camera component that ViewBox controls
+ * @see {@link CameraComponent} - The camera component that ViewBox controls
  * @see {@link OrbitControls} - Camera controls that work alongside ViewBox
  * @see {@link DragControls} - Alternative camera controls compatible with ViewBox
  * @see {@link LookAtConstraint} - Another way to control camera targeting
@@ -121,7 +128,7 @@ export class ViewBox extends Behaviour {
      * as they would appear with that field of view. Setting it to a wider FOV (e.g., 90) makes objects appear
      * smaller, while a narrower FOV (e.g., 30) makes them appear larger.
      *
-     * @see {@link Camera} for the camera component and its FOV property
+     * @see {@link CameraComponent} for the camera component and its FOV property
      * @default -1 (automatically uses the camera's FOV on the first frame)
      */
     @serializable()