@needle-tools/engine 4.4.0-ci.1 → 4.4.2

package/src/engine/xr/NeedleXRSession.ts

@@ -444,7 +444,7 @@ export class NeedleXRSession implements INeedleXRSession {
         if (!context) context = ContextRegistry.All[0] as Context;
         if (!context) throw new Error("No Needle Engine Context found");
 
-        performance.mark('NeedleXRSession start');
+        //performance.mark('NeedleXRSession start');
 
         // setup session init args, make sure we have default values
         if (!init) init = {};
@@ -534,8 +534,8 @@ export class NeedleXRSession implements INeedleXRSession {
             return null;
         }
         const session = this.setSession(mode, newSession, init, context);
-        performance.mark('NeedleXRSession end');
-        performance.measure('NeedleXRSession Startup', 'NeedleXRSession start', 'NeedleXRSession end');
+        //performance.mark('NeedleXRSession end');
+        //performance.measure('NeedleXRSession Startup', 'NeedleXRSession start', 'NeedleXRSession end');
         return session;
     }
 
@@ -884,7 +884,7 @@ export class NeedleXRSession implements INeedleXRSession {
         /** the initialization arguments */
         init: XRSessionInit,
     }) {
-        performance.mark(measure_SessionStartedMarker);
+        //performance.mark(measure_SessionStartedMarker);
 
         saveSessionInfo(mode, extra.init);
         this.session = session;
@@ -1128,8 +1128,8 @@ export class NeedleXRSession implements INeedleXRSession {
 
         enableSpatialConsole(false);
 
-        performance.mark(measure_SessionEndedMarker);
-        performance.measure('NeedleXRSession', measure_SessionStartedMarker, measure_SessionEndedMarker);
+        //performance.mark(measure_SessionEndedMarker);
+        //performance.measure('NeedleXRSession', measure_SessionStartedMarker, measure_SessionEndedMarker);
     };
 
     private _didStart: boolean = false;
@@ -1139,7 +1139,7 @@ export class NeedleXRSession implements INeedleXRSession {
         const frame = context.xrFrame;
         if (!frame) return;
 
-        performance.mark('NeedleXRSession onBefore start');
+        //performance.mark('NeedleXRSession onBefore start');
 
         // ensure that XR is always set to a running session
         this.context.xr = this;
@@ -1291,7 +1291,7 @@ export class NeedleXRSession implements INeedleXRSession {
             console.error("XRControllers are not added but inputSources are present");
         }
 
-        performance.mark('NeedleXRSession update scripts start');
+        //performance.mark('NeedleXRSession update scripts start');
         // invoke update on all scripts
         for (const script of this._xr_update_scripts) {
             if (script.destroyed === true) {
@@ -1304,8 +1304,8 @@ export class NeedleXRSession implements INeedleXRSession {
             }
             if (script.onUpdateXR) script.onUpdateXR(args);
         }
-        performance.mark('NeedleXRSession update scripts end');
-        performance.measure('NeedleXRSession update scripts', 'NeedleXRSession update scripts start', 'NeedleXRSession update scripts end');
+        //performance.mark('NeedleXRSession update scripts end');
+        //performance.measure('NeedleXRSession update scripts', 'NeedleXRSession update scripts start', 'NeedleXRSession update scripts end');
 
         // handle inactive scripts
         this.handleInactiveScripts();
@@ -1326,8 +1326,8 @@ export class NeedleXRSession implements INeedleXRSession {
         this.sync?.onUpdate(this);
 
         this.onRenderDebug();
-        performance.mark('NeedleXRSession onBefore end');
-        performance.measure('NE XR frame', 'NeedleXRSession onBefore start', 'NeedleXRSession onBefore end');
+        //performance.mark('NeedleXRSession onBefore end');
+        //performance.measure('NE XR frame', 'NeedleXRSession onBefore start', 'NeedleXRSession onBefore end');
     }
 
     private onRenderDebug() {

package/src/engine-components/AudioSource.ts

@@ -409,7 +409,12 @@ export class AudioSource extends Behaviour {
             this.sound?.setVolume(this.volume);
     }
 
-    private createAudio = (buffer?: AudioBuffer) => {
+    private createAudio = (buffer?: AudioBuffer) => {                
+        if(this.destroyed) {
+            if(debug) console.warn("AudioSource destroyed, not creating audio", this.name);
+            return;
+        }
+
         if (debug) console.log("AudioBuffer finished loading", buffer);
 
         const sound = this.Sound;
@@ -503,9 +508,9 @@ export class AudioSource extends Behaviour {
                 if (debug)
                     console.log("load audio", clip);
                 const buffer = await this.audioLoader.loadAsync(clip).catch(console.error);
+                if(this.destroyed) return;
                 this._lastClipStartedLoading = null;
-                if (buffer)
-                    this.createAudio(buffer);
+                if (buffer) this.createAudio(buffer);
             }
             else console.warn("Unsupported audio clip type", clip)
         }

package/src/engine-components/Camera.ts

@@ -66,7 +66,7 @@ export class Camera extends Behaviour implements ICamera {
             }
         }
     }
-    
+
     /**
      * Gets or sets the camera's field of view in degrees for perspective cameras.
      * When set, automatically updates the projection matrix.
@@ -167,13 +167,13 @@ export class Camera extends Behaviour implements ICamera {
         this._clearFlags = val;
         this.applyClearFlagsIfIsActiveCamera();
     }
-    
+
     /**
      * Determines if the camera should use orthographic projection instead of perspective.
      */
     @serializable()
     public orthographic: boolean = false;
-    
+
     /**
      * The size of the orthographic camera's view volume when in orthographic mode.
      * Larger values show more of the scene.
@@ -331,7 +331,7 @@ export class Camera extends Behaviour implements ICamera {
     public get cam(): PerspectiveCamera | OrthographicCamera {
         return this.threeCamera;
     }
-    
+
     /**
      * Gets the three.js camera object. Creates one if it doesn't exist yet.
      * @returns {PerspectiveCamera | OrthographicCamera} The three.js camera object
@@ -344,7 +344,7 @@ export class Camera extends Behaviour implements ICamera {
 
     private static _origin: Vector3 = new Vector3();
     private static _direction: Vector3 = new Vector3();
-    
+
     /**
      * Converts screen coordinates to a ray in world space.
      * Useful for implementing picking or raycasting from screen to world.
@@ -376,7 +376,7 @@ export class Camera extends Behaviour implements ICamera {
     }
 
     private _frustum?: Frustum;
-    
+
     /**
      * Gets the camera's view frustum for culling and visibility checks.
      * Creates the frustum if it doesn't exist and returns it.
@@ -390,7 +390,7 @@ export class Camera extends Behaviour implements ICamera {
         }
         return this._frustum;
     }
-    
+
     /**
      * Forces an update of the camera's frustum.
      * This is automatically called every frame in onBeforeRender.
@@ -399,7 +399,7 @@ export class Camera extends Behaviour implements ICamera {
         if (!this._frustum) this._frustum = new Frustum();
         this._frustum.setFromProjectionMatrix(this.getProjectionScreenMatrix(this._projScreenMatrix, true), this.context.renderer.coordinateSystem);
     }
-    
+
     /**
      * Gets this camera's projection-screen matrix.
      * 
@@ -556,13 +556,16 @@ export class Camera extends Behaviour implements ICamera {
         this.fieldOfView = this._fov;
 
         if (debug) {
-            const msg = `Camera \"${this.name}\" clear flags: ${ClearFlags[this._clearFlags]}`;
+            const msg = `[Camera] Apply ClearFlags: ${ClearFlags[this._clearFlags]} - \"${this.name}\"`;
             console.debug(msg);
         }
+
+        const hasBackgroundImageOrColorAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color") || this.context.domElement.getAttribute("skybox-image");
+
         switch (this._clearFlags) {
             case ClearFlags.None:
                 return;
-                
+
             case ClearFlags.Skybox:
                 if (Camera.backgroundShouldBeTransparent(this.context)) {
                     if (!this.ARBackgroundAlpha || this.ARBackgroundAlpha < 0.001) {
@@ -577,18 +580,21 @@ export class Camera extends Behaviour implements ICamera {
                     this.applySceneSkybox();
 
                 // set background blurriness and intensity
-                if (this._backgroundBlurriness !== undefined)
+                if (this._backgroundBlurriness !== undefined && !this.context.domElement.getAttribute("background-blurriness"))
                     this.context.scene.backgroundBlurriness = this._backgroundBlurriness;
                 else if (debug) console.warn(`Camera \"${this.name}\" has no background blurriness`)
-                if (this._backgroundIntensity !== undefined)
+
+                if (this._backgroundIntensity !== undefined && !this.context.domElement.getAttribute("background-intensity"))
                     this.context.scene.backgroundIntensity = this._backgroundIntensity;
-                if (this._backgroundRotation !== undefined)
+
+                if (this._backgroundRotation !== undefined && !this.context.domElement.getAttribute("background-rotation"))
                     this.context.scene.backgroundRotation = this._backgroundRotation;
+
                 else if (debug) console.warn(`Camera \"${this.name}\" has no background intensity`)
 
                 break;
             case ClearFlags.SolidColor:
-                if (this._backgroundColor) {
+                if (this._backgroundColor && !hasBackgroundImageOrColorAttribute) {
                     let alpha = this._backgroundColor.alpha;
                     // when in WebXR use ar background alpha override or set to 0
                     if (Camera.backgroundShouldBeTransparent(this.context)) {
@@ -602,13 +608,15 @@ export class Camera extends Behaviour implements ICamera {
                         this.context.renderer.setClearColor(this._backgroundColor, alpha);
                     }
                 }
-                else {
-                    if (debug) console.warn(`Camera \"${this.name}\" has no background color`, this)
+                else if (!this._backgroundColor) {
+                    if (debug) console.warn(`[Camera] has no background color \"${this.name}\" `)
                 }
                 break;
             case ClearFlags.Uninitialized:
-                this.context.scene.background = null
-                this.context.renderer.setClearColor(0x000000, 0);
+                if (!hasBackgroundImageOrColorAttribute) {
+                    this.context.scene.background = null
+                    this.context.renderer.setClearColor(0x000000, 0);
+                }
                 break;
         }
     }
@@ -685,10 +693,14 @@ class CameraSkybox {
             }
         }
         else if (this.context.scene.background !== this._skybox) {
-            if (debug)
-                console.log(`Camera \"${this._camera.name}\" set skybox`, this._camera, this._skybox);
-            this._skybox.mapping = EquirectangularReflectionMapping;
-            this.context.scene.background = this._skybox;
+
+            const hasBackgroundAttribute = this.context.domElement.getAttribute("background-image") || this.context.domElement.getAttribute("background-color") || this.context.domElement.getAttribute("skybox-image");
+
+            if (debug) console.debug(`[Camera] Apply Skybox ${this._skybox?.name} ${hasBackgroundAttribute} - \"${this._camera.name}\"`);
+            if (!hasBackgroundAttribute?.length) {
+                this._skybox.mapping = EquirectangularReflectionMapping;
+                this.context.scene.background = this._skybox;
+            }
         }
     }
 }

package/src/engine-components/CameraUtils.ts

@@ -5,13 +5,11 @@ import { addNewComponent, getOrAddComponent } from "../engine/engine_components.
 import { Context } from "../engine/engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { NeedleEngineHTMLElement } from "../engine/engine_element.js";
-import { createFlatTexture, createTrilightTexture } from "../engine/engine_shaders.js";
 import type { ICamera, IContext } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
-import { RGBAColor } from "../engine/js-extensions/index.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { OrbitControls } from "./OrbitControls.js";
-import EnvironmentScene from "./utils/EnvironmentScene.js";
+import { EnvironmentScene } from "./utils/EnvironmentScene.js";
 
 const debug = getParam("debugmissingcamera");
 
@@ -48,26 +46,20 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
     else {
         camInstance.clearFlags = ClearFlags.SolidColor;
 
-        let backgroundColor = "#efefef";
-        if(typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            backgroundColor = "#1f1f1f";
+        // Don't set the background color if the user set a background color in the <needle-engine> element
+        if (!evt.context.domElement.getAttribute("background-color")) {
+            let backgroundColor = "#efefef";
+            if (typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                backgroundColor = "#1f1f1f";
+            }
+            scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
         }
-        scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
 
         // Generate a default environment map if none is set
         if (!scene.environment) {
-            // const backgroundColorAttribute = evt.context.domElement.getAttribute("background-color") ?? "#fff";
-            // const backgroundColor = new Color(backgroundColorAttribute);
             const pmremGenerator = new PMREMGenerator(evt.context.renderer);
             const env = new EnvironmentScene("neutral");
-            // const background = scene.background;
-            // const col0 = new Color(.1, .1, .1);
-            // const col1 = new Color(.3, .3, .3);
-            // const col2 = new Color(1, 1, 1);
-            // const envmap = createTrilightTexture(col0, col1, col2, 32, 32);
-            // scene.background = envmap;
             scene.environment = pmremGenerator.fromScene(env, .025).texture;
-            // scene.background = background;
         }
     }
 

package/src/engine-components/GroundProjection.ts

@@ -249,7 +249,7 @@ export class GroundProjectedEnv extends Behaviour {
         });
         this._blurrynessShader.depthWrite = false;
         this._blurrynessShader.uniforms.map.value = texture;
-        this._blurrynessShader.uniforms.blurriness.value = 1;//blurriness;
+        this._blurrynessShader.uniforms.blurriness.value = blurriness;
         this._lastBlurriness = blurriness;
         texture.needsUpdate = true;
 

package/src/engine-components/NeedleMenu.ts

@@ -24,7 +24,7 @@ export class NeedleMenu extends Behaviour {
      * Controls the visibility of the Needle logo in the menu (requires PRO license)
      */
     @serializable()
-    showNeedleLogo: boolean = true;
+    showNeedleLogo: boolean = false;
 
     /** 
      * When enabled, displays the menu in VR/AR mode when the user looks up

package/src/engine-components/OrbitControls.ts

@@ -506,6 +506,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
                     // if the look at target is set to the camera position we can't move at all anymore
                     const distanceToCenter = Math.max(.01, worldPosition.length());
                     const forward = new Vector3(0, 0, -distanceToCenter).applyMatrix4(camGo.threeCamera.matrixWorld);
+                    if(debug) Gizmos.DrawLine(worldPosition, forward, 0x5555ff, 10)
                     this.setLookTargetPosition(forward, true);
                 }
                 if (!this.setLookTargetFromConstraint()) {
@@ -682,7 +683,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         }
         const worldPosition = source.worldPosition;
         const forward = source.worldForward;
-        const ray = new Ray(worldPosition, forward.multiplyScalar(-1));
+        const ray = new Ray(worldPosition, forward);
 
         if (debug) Gizmos.DrawRay(ray.origin, ray.direction, 0xff0000, 10);
 

package/src/engine-components/ReflectionProbe.ts

@@ -1,5 +1,6 @@
-import { EquirectangularReflectionMapping, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
+import { EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
 
+import { isDevEnvironment, showBalloonWarning } from "../engine/debug/index.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { Context } from "../engine/engine_setup.js";
 import type { IRenderer } from "../engine/engine_types.js";
@@ -35,13 +36,11 @@ export class ReflectionProbe extends Behaviour {
                             return probe;
                         }
                     }
-                    /*
                     // TODO not supported right now, as we'd have to pass the ReflectionProbe scale through as well.
                     else if (probe.isInBox(object)) {
                         if (debug) console.log("Found reflection probe", object.name, probe.name);
                         return probe;
                     }
-                    */
                 }
             }
         }
@@ -53,6 +52,8 @@ export class ReflectionProbe extends Behaviour {
 
 
     private _texture!: Texture;
+
+    // @serializable(Texture)
     set texture(tex: Texture) {
         if (tex && !(tex instanceof Texture)) {
             console.error("ReflectionProbe.texture must be a Texture", tex);
@@ -61,7 +62,7 @@ export class ReflectionProbe extends Behaviour {
         this._texture = tex;
         if (tex) {
             tex.mapping = EquirectangularReflectionMapping;
-            tex.colorSpace = SRGBColorSpace;
+            tex.colorSpace = LinearSRGBColorSpace;
             tex.needsUpdate = true;
         }
     }
@@ -94,10 +95,16 @@ export class ReflectionProbe extends Behaviour {
         if (debug)
             this._boxHelper.showHelper(0x555500, true);
 
-        if (this.texture) {
-            this.texture.mapping = EquirectangularReflectionMapping;
-            this.texture.colorSpace = SRGBColorSpace;
-            this.texture.needsUpdate = true;
+        if (this._texture) {
+            this._texture.mapping = EquirectangularReflectionMapping;
+            this._texture.colorSpace = LinearSRGBColorSpace;
+            this._texture.needsUpdate = true;
+        }
+    }
+    start(): void {
+        if (!this._texture && isDevEnvironment()) {
+            console.warn(`[ReflectionProbe] Missing texture. Please assign a custom cubemap texture. To use reflection probes assign them to your renderer's "anchor" property.`);
+            showBalloonWarning("ReflectionProbe configuration hint: See browser console for details")
         }
     }
 

package/src/engine-components/SceneSwitcher.ts

@@ -258,7 +258,10 @@ export class SceneSwitcher extends Behaviour {
         // remove all scenes from the url that are in the scenes array at startup
         for (const scene of this.scenes) {
             if (scene && !scene.hasUrl && scene.asset instanceof Object3D) {
-                scene.asset.removeFromParent();
+                GameObject.remove(scene.asset);
+            }
+            else if(scene instanceof Object3D) {
+                GameObject.remove(scene);
             }
         }
 
@@ -560,14 +563,20 @@ export class SceneSwitcher extends Behaviour {
             else if (type === "number") {
                 return this.select(scene);
             }
+            // If we're switching an Object3D
+            else if (scene && (scene as Object3D) instanceof Object3D) {
+                const i = this.scenes?.indexOf(scene);
+                scene = new AssetReference((scene as Object3D).name, undefined, scene);
+                if (i >= 0) this.scenes[i] = scene; // update the asset in the list to the new asset reference
+            }
             else {
-                console.warn("SceneSwitcher: Can't switch to scene", scene, "of type", type);
+                console.warn(`[SceneSwitcher] Can't switch to scene of type ${type}`);
                 return false;
             }
         }
 
         if (scene.url === this.sourceId) {
-            console.warn("SceneSwitcher: can't load own scene - prevent recursive loading", this.sourceId);
+            console.warn("[SceneSwitcher] Can't load own scene - prevent recursive loading", this.sourceId);
             return false;
         }
 
@@ -597,7 +606,7 @@ export class SceneSwitcher extends Behaviour {
                 current.unload();
             // otherwise if it's a regular Object3D we just remove it from the scene
             else if (current.asset instanceof Object3D) {
-                current.asset.removeFromParent();
+                GameObject.remove(current.asset as any as Object3D);
             }
         }
     }
@@ -619,6 +628,11 @@ export class SceneSwitcher extends Behaviour {
             await this.onStartLoading();
             // start loading and wait for the scene to be loaded
             await scene.loadAssetAsync((_, prog) => {
+                if (debug) {
+                    const t01 = prog.loaded / prog.total;
+                    const progressBarString = "[" + "=".repeat(Math.floor(t01 * 20)) + "-".repeat(20 - Math.floor(t01 * 20)) + "]";
+                    console.debug(`[SceneSwitcher] Download ${(t01 * 100).toFixed(1)} % ${progressBarString}`, scene.url);
+                }
                 this._currentLoadingProgress = prog;
                 this.dispatchEvent(prog);
                 this.sceneLoadingProgress?.invoke(prog);
@@ -678,7 +692,8 @@ export class SceneSwitcher extends Behaviour {
                     let queryParameterValue = index.toString();
                     // unless the user defines that he wants to use the scene name
                     if (this.useSceneName) {
-                        queryParameterValue = sceneUriToName(scene.url);
+                        if (scene instanceof Object3D) queryParameterValue = scene.name;
+                        else if (scene.url) queryParameterValue = sceneUriToName(scene.url);
                     }
                     // save the loaded scene as an url parameter
                     if (this.queryParameterName?.length)
@@ -743,7 +758,8 @@ export class SceneSwitcher extends Behaviour {
                 for (let i = 0; i < this.scenes.length; i++) {
                     const scene = this.scenes[i];
                     if (!scene) continue;
-                    if (sceneUriToName(scene.url).toLowerCase().includes(lowerCaseValue)) {
+                    const name = scene instanceof Object3D ? scene.name : sceneUriToName(scene.url);
+                    if (name.toLowerCase().includes(lowerCaseValue)) {
                         return this.select(i);;
                     }
                 }
@@ -864,10 +880,10 @@ function sceneUriToName(uri: string): string {
 class PreLoadScheduler {
     /** Maximum number of scenes to preload ahead of the current scene */
     maxLoadAhead: number;
-    
+
     /** Maximum number of scenes to preload behind the current scene */
     maxLoadBehind: number;
-    
+
     /** Maximum number of scenes that can be preloaded concurrently */
     maxConcurrent: number;
 
@@ -961,7 +977,8 @@ class PreLoadScheduler {
     allLoaded(): boolean {
         if (this._switcher.scenes) {
             for (const scene of this._switcher.scenes) {
-                if (scene?.isLoaded() === false) return false;
+                if (!scene?.isLoaded) continue;
+                if (scene.isLoaded() === false) return false;
             }
         }
         return true;
@@ -974,10 +991,10 @@ class PreLoadScheduler {
 class LoadTask {
     /** The index of the scene in the scenes array */
     index: number;
-    
+
     /** The AssetReference to be loaded */
     asset: AssetReference;
-    
+
     /** The collection of active load tasks this task belongs to */
     tasks: LoadTask[];
 

package/src/engine-components/SyncedTransform.ts

@@ -107,6 +107,15 @@ export class SyncedTransform extends Behaviour {
             this._model.requestOwnership();
     }
 
+    /**
+     * Free ownership of this object on the network.  
+     * You need to be connected to a room for this to work.  
+     * This will also be called automatically when the component is disabled.
+     */
+    public freeOwnership() {
+        this._model?.freeOwnership();
+    }
+
     /**
      * Checks if this client has ownership of the object
      * @returns true if this client has ownership, false if not, undefined if ownership state is unknown
@@ -312,8 +321,7 @@ export class SyncedTransform extends Behaviour {
 
         if (this._model && !this._model.hasOwnership && this._model.isOwned) {
             if (this._receivedDataBefore) {
-                const factor = this._receivedFastUpdate || this.fastMode ? .5 : .3;
-                const t = factor;//Mathf.clamp01(this.context.time.deltaTime * factor);
+                const t = this._receivedFastUpdate || this.fastMode ? .05 : .3;
                 let requireMarkDirty = false;
                 if (this.interpolatePosition && this._targetPosition) {
                     const pos = this.worldPosition;
@@ -366,13 +374,10 @@ export class SyncedTransform extends Behaviour {
             FAST_ACTIVE_SYNCTRANSFORMS++;
             if (fastUpdate && FAST_INTERVAL > 0 && this.context.time.frameCount % FAST_INTERVAL !== 0) return;
 
-            if (debug)
-                console.log("send update", this.context.connection.connectionId, this.guid, this.gameObject.name, this.gameObject.guid);
+            if (debug) console.debug("[SyncedTransform] Send update", this.context.connection.connectionId, this.guid, this.gameObject.name, this.gameObject.guid);
 
             this._needsUpdate = false;
             const st = createTransformModel(this.guid, this, fastUpdate ? true : false);
-            // this._state.update(this, this.rb);
-            // this._state.fast = fastUpdate ? true : false;
             this.context.connection.sendBinary(st);
         }
     }

package/src/engine-components/codegen/components.ts

@@ -194,6 +194,7 @@ export { Rect } from "../ui/RectTransform.js";
 export { RectTransform } from "../ui/RectTransform.js";
 export { SpatialHtml } from "../ui/SpatialHtml.js";
 export { Text } from "../ui/Text.js";
+export { EnvironmentScene } from "../utils/EnvironmentScene.js";
 export { LookAt } from "../utils/LookAt.js";
 export { OpenURL } from "../utils/OpenURL.js";
 export { VideoPlayer } from "../VideoPlayer.js";

package/src/engine-components/export/usdz/extensions/USDZUI.ts

@@ -1,12 +1,12 @@
 import { Color, Mesh, MeshBasicMaterial, Object3D } from "three";
 
 import { GameObject } from "../../../Component.js";
-import { SpriteRenderer } from "../../../SpriteRenderer.js";
-import { $shadowDomOwner, BaseUIComponent } from "../../../ui/BaseUIComponent.js";
+import { BaseUIComponent } from "../../../ui/BaseUIComponent.js";
 import { Canvas } from "../../../ui/Canvas.js";
 import { RenderMode } from "../../../ui/Canvas.js";
 import { CanvasGroup } from "../../../ui/CanvasGroup.js";
 import { RectTransform } from "../../../ui/RectTransform.js";
+import { $shadowDomOwner } from "../../../ui/Symbols.js";
 import { Text } from "../../../ui/Text.js";
 import type { IUSDExporterExtension } from "../Extension.js";
 import { USDObject, USDZExporterContext } from "../ThreeUSDZExporter.js";

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

@@ -8,6 +8,7 @@ import { getParam } from '../../engine/engine_utils.js';
 import { Behaviour, GameObject } from "../Component.js";
 import { EventSystem } from "./EventSystem.js";
 import type { ICanvas } from './Interfaces.js';
+import { $shadowDomOwner } from './Symbols.js';
 export const includesDir = "./include";
 
 const debug = getParam("debugshadowcomponents");
@@ -24,7 +25,6 @@ ThreeMeshUI.Block.prototype["interactable"] = {
     }
 }
 
-export const $shadowDomOwner = Symbol("shadowDomOwner");
 
 /**
  * Derive from this class if you want to implement your own UI components.   

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

@@ -9,11 +9,11 @@ import { Context } from "../../engine/engine_setup.js";
 import { HideFlags, type IComponent } from "../../engine/engine_types.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Behaviour, GameObject } from "../Component.js";
-import { $shadowDomOwner } from "./BaseUIComponent.js";
 import type { ICanvasGroup } from "./Interfaces.js";
 import { hasPointerEventComponent, type IPointerEventHandler, type IPointerUpHandler, PointerEventData } from "./PointerEvents.js";
 import { ObjectRaycaster, Raycaster } from "./Raycaster.js";
 import { UIRaycastUtils } from "./RaycastUtils.js";
+import { $shadowDomOwner } from "./Symbols.js";
 import { isUIObject } from "./Utils.js";
 
 const debug = getParam("debugeventsystem");

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

@@ -98,6 +98,7 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
         super.__internalNewInstanceCreated(init);
         this._rect = null;
         this.uiObject = null;
+        this._stateManager = null;
         if (this._color) this._color = this._color.clone();
         return this;
     }
@@ -114,7 +115,6 @@ export class Graphic extends BaseUIComponent implements IGraphic, IRectTransform
     setupState(state: object) {
         this.makePanel();
         if (this.uiObject) {
-
             // @marwie : v7.x now have a concurrent state management in core mimicking html/css
             // ie : (::firstChild::hover::disabled) where firstchild, hover and disabled are all on different channels
             // In order to keep needle Raycaster and EventSystem intact, I added in v7 a SimpleStateBehavior, which acts as previously

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

@@ -2,8 +2,8 @@ import { Object3D } from "three";
 
 import { foreachComponent } from "../../engine/engine_gameobject.js";
 import { type IComponent } from "../../engine/engine_types.js";
-import { $shadowDomOwner } from "./BaseUIComponent.js";
 import { type ICanvasGroup, type IGraphic } from "./Interfaces.js";
+import { $shadowDomOwner } from "./Symbols.js";
 
 
 export class UIRaycastUtils {