lythreeframe 1.0.33 → 1.0.34

package/dist/bundle.esm.js

@@ -1,4 +1,4 @@
-import { MathUtils, Group, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, BufferGeometry, Material, Texture, LoadingManager, FileLoader, Scene, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry, Object3D } from 'three/webgpu';
+import { MathUtils, Group, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, Scene, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry, Object3D } from 'three/webgpu';
 import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
 import { pass, mrt, output, uniform, velocity, metalness, transformedNormalView, blendColor, time, oscSine } from 'three/tsl';
 import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
@@ -17,21 +17,6 @@ import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 
-class LYLoadTask {
-    constructor(paths, onLoaded) {
-        this.paths = paths;
-        this.onLoaded = onLoaded;
-    }
-    get Paths() {
-        return this.paths;
-    }
-    onLoadingFinished(loaded) {
-        if (this.onLoaded) {
-            this.onLoaded(loaded);
-        }
-    }
-}
-
 /*
  * virtual class of 3D Object, should not be use directly.
  */
@@ -122,11 +107,14 @@ class SceneComponent extends Component {
         // 通过 _parentActor 私有字段访问父级 Actor
         return this._parentActor;
     }
-    constructor(newThreeObject) {
+    get world() {
+        return this.app.world;
+    }
+    constructor(app, newThreeObject) {
         super(newThreeObject);
         this.bCanHover = false;
         this.bCanClick = false;
-        this.world = null;
+        this.app = app;
         this._name = "SceneComponent";
     }
     createDefaultThreeObject() {
@@ -221,10 +209,9 @@ class SceneComponent extends Component {
         return childrens;
     }
     onAddedToWorld(world) {
-        this.world = world;
         let childrens = this.childrenComponents;
         for (let i = 0; i < childrens.length; ++i) {
-            childrens[i].onAddedToWorld(this.world);
+            childrens[i].onAddedToWorld(world);
         }
     }
     destroy() {
@@ -676,6 +663,8 @@ class SceneComponent extends Component {
     }
 }
 
+// import {BufferGeometry, Material, Mesh, Texture} from "three/webgpu";
+// import {Vector3} from "three/webgpu";
 class MeshComponent extends SceneComponent {
     get threeObject() {
         return this.obj;
@@ -687,43 +676,86 @@ class MeshComponent extends SceneComponent {
         }
     }
     get geometry() {
-        return this.threeObject ? this.threeObject.geometry : null;
+        if (!this._geometryPtr) {
+            throw new Error("geometryPtr is null");
+        }
+        return this._geometryPtr.getValue();
     }
     set geometry(geo) {
-        if (!this.threeObject) {
-            return;
+        let geoPtr = this.app.assetManager.addGeometryAsset(geo);
+        this.geometryPtr = geoPtr;
+    }
+    get geometryPtr() {
+        if (!this._geometryPtr) {
+            throw new Error("geometryPtr is null");
+        }
+        return this._geometryPtr;
+    }
+    set geometryPtr(geo) {
+        if (this._geometryPtr) {
+            this._geometryPtr.release();
+            this._geometryPtr = null;
+        }
+        this._geometryPtr = geo;
+        if (this.threeObject) {
+            this.threeObject.geometry = geo.getValue();
         }
-        this.threeObject.geometry = geo;
     }
     get material() {
-        return this.threeObject ? this.threeObject.material : null;
+        let mats = [];
+        this._materialPtr.forEach((elem) => {
+            mats.push(elem.getValue());
+        });
+        return mats;
+    }
+    get materialPtr() {
+        return this.materialPtr;
     }
     set material(newMat) {
-        if (!this.threeObject) {
-            return;
-        }
-        this.threeObject.material = newMat;
-        if (this.world) {
-            this.world.viewport.markRenderStateDirty();
-        }
+        let mats = Array.isArray(newMat) ? newMat : [newMat];
+        let matPtrs = [];
+        mats.forEach((elem) => {
+            let ptr = this.app.assetManager.addMaterialAsset(elem);
+            if (ptr)
+                matPtrs.push(ptr);
+        });
+        this.materialPtr = matPtrs;
     }
-    constructor(...args) {
-        let newMesh = null;
-        if (args[0] instanceof Mesh) {
-            newMesh = args[0];
+    set materialPtr(newMat) {
+        if (this._materialPtr) {
+            this._materialPtr.forEach((elem) => {
+                elem.release();
+            });
+            this._materialPtr = [];
         }
-        else {
-            if (args[0] instanceof BufferGeometry && (args[1] instanceof Material || Array.isArray(args[1]))) {
-                newMesh = new Mesh(args[0], args[1]);
-            }
-            else {
-                throw new Error('Invalid arguments for A constructor');
-            }
+        let matPtrs = Array.isArray(newMat) ? newMat : [newMat];
+        let mats = Array.isArray(newMat) ? newMat : [newMat];
+        matPtrs.forEach((elem) => {
+            mats.push(elem.getValue());
+            elem.addRef();
+        });
+        if (this.threeObject) {
+            this.threeObject.material = mats;
         }
-        super(newMesh);
+        this._materialPtr = matPtrs;
+    }
+    constructor(app, geometry, material) {
+        let matPtrs = [];
+        let mats = Array.isArray(material) ? material : [material];
+        mats.forEach((elem) => {
+            let ptr = app.assetManager.addMaterialAsset(elem);
+            if (ptr)
+                matPtrs.push(ptr);
+        });
+        let newMesh = new Mesh(geometry, mats);
+        super(app, newMesh);
         this.obj = null;
+        this._geometryPtr = app.assetManager.addGeometryAsset(geometry);
+        this._materialPtr = matPtrs;
+        matPtrs.forEach((elem) => {
+            elem.addRef();
+        });
         this.threeObject = newMesh;
-        LYAssetManager.Get().checkMeshResource(newMesh);
     }
     set castShadow(bCast) {
         if (this.threeObject)
@@ -761,27 +793,15 @@ class MeshComponent extends SceneComponent {
         return ret;
     }
     destroyObject() {
-        if (this.world && this.world.scene && this.threeObject) {
-            this.world.scene.remove(this.threeObject);
-        }
-        let assetManager = LYAssetManager.Get();
-        const mats = Array.isArray(this.material) ? this.material : [this.material];
-        mats.forEach((material) => {
-            if (material instanceof Material) {
-                Object.entries(material).forEach(([key, value]) => {
-                    if (value instanceof Texture) {
-                        assetManager.releaseAsset(value);
-                        value = null;
-                    }
-                });
-                assetManager.releaseAsset(material);
-            }
-        });
-        this.material = [];
-        if (this.geometry instanceof BufferGeometry) {
-            assetManager.releaseAsset(this.geometry);
-            this.geometry = null;
+        if (this.threeObject) {
+            this.threeObject.removeFromParent();
         }
+        this._geometryPtr.release();
+        let matPtrs = Array.isArray(this._materialPtr) ? this._materialPtr : [this._materialPtr];
+        matPtrs.forEach((elem) => {
+            elem.release();
+        });
+        super.destroyObject();
     }
 }
 
@@ -847,29 +867,30 @@ class TAssetPointer extends TSmartPointer {
     }
 }
 
-// this class should be a singleton
-class LYAssetManager {
-    constructor() {
-        this.assetPointer = new Map();
+class AssetManager {
+    constructor(app) {
+        this.geometryAssets = new Map();
+        this.textureAssets = new Map();
+        this.materialAssets = new Map();
         this.dracoLoader = null;
         this.loadingManager = new LoadingManager();
         this.gltfLoader = new GLTFLoader(this.loadingManager);
+        this.app = app;
     }
     get LoadingManager() {
         return this.loadingManager;
     }
-    static Get() {
-        return assetManager;
-    }
-    static ClearAssets() {
-        assetManager.clearAssets();
-    }
     setupDracoLoader(dracoPath) {
-        this.dracoLoader = new DRACOLoader(this.loadingManager);
-        this.dracoLoader.setDecoderPath(dracoPath);
-        this.dracoLoader.setDecoderConfig({ type: "js" });
-        this.dracoLoader.preload();
-        this.gltfLoader.setDRACOLoader(this.dracoLoader);
+        if (!this.dracoLoader) {
+            this.dracoLoader = new DRACOLoader(this.loadingManager);
+            this.dracoLoader.setDecoderPath(dracoPath);
+            this.dracoLoader.setDecoderConfig({ type: "js" });
+            this.dracoLoader.preload();
+            this.gltfLoader.setDRACOLoader(this.dracoLoader);
+        }
+        else {
+            console.error("DracoLoader already setup");
+        }
     }
     convertThreeObjectToLYObject(parentLYComponent, threejsObject) {
         let location = threejsObject.position.clone();
@@ -905,7 +926,7 @@ class LYAssetManager {
         }
         return threejsObject.userData.LYObject;
     }
-    collectResourcesAndReferences(gltf) {
+    collectResourcesAndReferences(object) {
         function countResource(map, resource) {
             if (!map.has(resource)) {
                 map.set(resource, 1);
@@ -919,7 +940,7 @@ class LYAssetManager {
             materials: new Map(),
             textures: new Map()
         };
-        gltf.scene.traverse((child) => {
+        object.traverse((child) => {
             if (child.geometry && child.geometry instanceof BufferGeometry) {
                 countResource(resources.geometries, child.geometry);
             }
@@ -965,7 +986,7 @@ class LYAssetManager {
                     }
                     Object.entries(material).forEach(([key, value]) => {
                         if (value instanceof Texture) {
-                            if (!value.userData["assetPointer"]) {
+                            if (!(value.userData["assetPointer"])) {
                                 this.addAsset(value);
                             }
                         }
@@ -974,36 +995,51 @@ class LYAssetManager {
             });
         }
     }
-    loadMultiGLTFAsGroup(tasks, onProgress = null, onAllFinished = null) {
-        this.loadingManager.onLoad = onAllFinished ? () => {
-            this.loadingManager.onLoad = () => {
-            };
-            onAllFinished();
-        } : () => {
-            this.loadingManager.onLoad = () => {
-            };
-        };
-        this.loadingManager.onProgress = onProgress ? (url, loaded, total) => {
-            onProgress(url, loaded, total);
-        } : () => {
-        };
-        tasks.forEach((task) => {
-            task.Paths.forEach((path) => {
-                const onGlbLoaded = (glb) => {
-                    task.onLoadingFinished(glb);
-                    this.collectResourcesAndReferences(glb);
-                };
-                try {
-                    this.gltfLoader.load(path, (glb) => {
-                        onGlbLoaded(glb);
-                    });
-                }
-                catch (e) {
-                    console.error(e, path);
-                }
-            });
-        });
-    }
+    // loadMultiGLTFAsGroup(tasks:LoadTask[], onProgress:((url:string, loaded:number, total:number) => void) | null = null, onAllFinished:(() => void) | null = null)
+    // {
+    //     this.loadingManager.onLoad     = onAllFinished ? () =>
+    //         {
+    //             this.loadingManager.onLoad = () =>
+    //                 {
+    //                 };
+    //             onAllFinished();
+    //         } : () =>
+    //         {
+    //             this.loadingManager.onLoad = () =>
+    //                 {
+    //                 };
+    //         };
+    //     this.loadingManager.onProgress = onProgress ? (url, loaded, total) =>
+    //         {
+    //             onProgress(url, loaded, total);
+    //         } : () =>
+    //         {
+    //         };
+    //     tasks.forEach(
+    //         (task) =>
+    //         {
+    //             task.Paths.forEach(
+    //                 (path) =>
+    //                 {
+    //                     const onGlbLoaded = (glb:GLTF) =>
+    //                         {
+    //                             task.onLoadingFinished(glb);
+    //                             this.collectResourcesAndReferences(glb.scene);
+    //                         };
+    //                     try
+    //                     {
+    //                         this.gltfLoader.load(path, (glb:GLTF) =>
+    //                         {
+    //                             onGlbLoaded(glb);
+    //                         });
+    //                     } catch (e)
+    //                     {
+    //                         console.error(e, path);
+    //                     }
+    //                 });
+    //         }
+    //     );
+    // }
     loadGltfFromBuffer(data, path, onLoadFinished) {
         this.gltfLoader.parse(data, path, onLoadFinished);
     }
@@ -1014,18 +1050,49 @@ class LYAssetManager {
         });
     }
     addAsset(asset, referenceCount = 1) {
-        let pointer = null;
-        if (!asset.userData["assetPointer"]) {
+        if (asset instanceof BufferGeometry) {
+            return this.addGeometryAsset(asset, referenceCount);
+        }
+        else if (asset instanceof Material) {
+            return this.addMaterialAsset(asset, referenceCount);
+        }
+        else if (asset instanceof Texture) {
+            return this.addTextureAsset(asset, referenceCount);
+        }
+        return undefined;
+    }
+    addMaterialAsset(asset, referenceCount = 1) {
+        let pointer = (asset.userData["assetPointer"]);
+        if (!pointer) {
+            pointer = new TAssetPointer(asset, referenceCount);
+        }
+        else {
+            pointer = asset.userData["assetPointer"];
+            pointer.addRef(referenceCount);
+        }
+        return pointer;
+    }
+    addTextureAsset(asset, referenceCount = 1) {
+        let pointer = (asset.userData["assetPointer"]);
+        if (!pointer) {
             pointer = new TAssetPointer(asset, referenceCount);
-            asset.userData["assetPointer"] = pointer;
         }
         else {
             pointer = asset.userData["assetPointer"];
             pointer.addRef(referenceCount);
         }
-        if (pointer) {
-            this.assetPointer.set(pointer.uuid, pointer);
+        return pointer;
+    }
+    addGeometryAsset(asset, referenceCount = 1) {
+        let pointer = (asset.userData["assetPointer"]);
+        if (!pointer) {
+            pointer = new TAssetPointer(asset, referenceCount);
+        }
+        else {
+            pointer = asset.userData["assetPointer"];
+            pointer.addRef(referenceCount);
         }
+        return pointer;
     }
     releaseAsset(asset) {
         // let uuid = asset.uuid
@@ -1038,14 +1105,26 @@ class LYAssetManager {
         }
     }
     clearAssets() {
-        let pointers = Array.from(this.assetPointer.values());
-        pointers.forEach((p) => {
+        this.geometryAssets.forEach((p) => {
             p.forceRelease();
         });
-        this.assetPointer.clear();
+        this.geometryAssets.clear();
+        this.materialAssets.forEach((p) => {
+            p.forceRelease();
+        });
+        this.materialAssets.clear();
+        this.textureAssets.forEach((p) => {
+            p.forceRelease();
+        });
+        this.textureAssets.clear();
+        // let pointers = Array.from(this.assetPointer.values());
+        // pointers.forEach((p) =>
+        // {
+        //     p.forceRelease();
+        // });
+        // this.assetPointer.clear();
     }
 }
-const assetManager = new LYAssetManager();
 
 class Delegate {
     constructor() {
@@ -2090,6 +2169,12 @@ const DefaultAppParam = {
     renderParam: DefaultRenderParam,
     cameraParam: DefaultCameraParam,
     postProcessParam: DefaultPostProcessParam,
+    classes: {
+        assetManagerClass: AssetManager,
+        controllerClass: Controller,
+        worldClass: World,
+        viewportClass: Viewport,
+    }
 };
 
 class ThreeJsApp {
@@ -2108,14 +2193,8 @@ class ThreeJsApp {
     get controller() {
         return this._controller;
     }
-    get worldClass() {
-        return World;
-    }
-    get viewportClass() {
-        return Viewport;
-    }
-    get controllerClass() {
-        return Controller;
+    get assetManager() {
+        return this._assetManager;
     }
     get appParam() {
         return this._appParam;
@@ -2129,11 +2208,18 @@ class ThreeJsApp {
         this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
         this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRenderParam;
         this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
+        this._appParam.classes = appParam.classes ? appParam.classes : {
+            assetManagerClass: AssetManager,
+            controllerClass: Controller,
+            worldClass: World,
+            viewportClass: Viewport,
+        };
         this._clock = new Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
-        this._world = new this.worldClass(this);
-        this._viewport = new this.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
-        this._controller = new this.controllerClass(this);
+        this._world = new this._appParam.classes.worldClass(this);
+        this._viewport = new this._appParam.classes.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
+        this._controller = new this._appParam.classes.controllerClass(this);
+        this._assetManager = new this._appParam.classes.assetManagerClass(this);
         this.viewport.renderer.setAnimationLoop(() => {
             this.tick();
         });
@@ -2155,6 +2241,7 @@ class ThreeJsApp {
         this.world.destroy();
         this.controller.destroy();
         this.viewport.destroy();
+        this._assetManager.clearAssets();
     }
     updateCamera(param) {
         const previousCam = this.camera;
@@ -2232,7 +2319,7 @@ class Actor extends BaseObject {
     get isVisible() {
         return this.rootComponent ? this.rootComponent.isVisible : false;
     }
-    constructor(myThreeObject = null) {
+    constructor(app, myThreeObject = null) {
         super();
         this._name = "Actor";
         this._rootComponent = null;
@@ -2241,17 +2328,18 @@ class Actor extends BaseObject {
         this.onDoubleClickedEvent = [];
         this.onHoverBeginEvent = [];
         this.onHoverEndEvent = [];
+        this.app = app;
         this.constructRootComponent(myThreeObject);
     }
     constructRootComponent(myThreeObject = null) {
         let tObject = myThreeObject ? myThreeObject : new Group();
         if (tObject.isMesh) {
             let mesh = tObject;
-            this._rootComponent = new MeshComponent(mesh);
+            this._rootComponent = new MeshComponent(this.app, mesh.geometry, mesh.material);
             this.rootComponent.parentActor = this;
         }
         else {
-            this._rootComponent = new SceneComponent(tObject);
+            this._rootComponent = new SceneComponent(this.app, tObject);
             this.rootComponent.parentActor = this;
         }
     }
@@ -2584,8 +2672,8 @@ class LightComponent extends SceneComponent {
     set intensity(intensity) {
         this.threeObject.intensity = intensity;
     }
-    constructor(light) {
-        super(light);
+    constructor(app, light) {
+        super(app, light);
         this.obj = light;
     }
 }
@@ -2609,9 +2697,9 @@ class DirectionalLightComponent extends LightComponent {
     set castShadow(value) {
         this.threeObject.castShadow = value;
     }
-    constructor(color = 0xffffff, intensity = 10) {
+    constructor(app, color = 0xffffff, intensity = 10) {
         let obj = new DirectionalLight(color, intensity);
-        super(obj);
+        super(app, obj);
         this.obj = obj;
         obj.castShadow = true;
     }
@@ -2640,8 +2728,8 @@ class DirectionalLightComponent extends LightComponent {
 }
 
 class DirectionalLightActor extends Actor {
-    constructor(color = 0xffffff, intensity = 1) {
-        super();
+    constructor(app, color = 0xffffff, intensity = 1) {
+        super(app);
         this.lightComponent = null;
         this.lightComponent = this.rootComponent;
         if (this.lightComponent) {
@@ -2651,7 +2739,7 @@ class DirectionalLightActor extends Actor {
         this.lightComponent.castShadow = true;
     }
     constructRootComponent() {
-        this.lightComponent = new DirectionalLightComponent();
+        this.lightComponent = new DirectionalLightComponent(this.app);
         this.rootComponent = this.lightComponent;
         this.lightComponent.castShadow = true;
         this.rootComponent.parentActor = this;
@@ -2659,15 +2747,15 @@ class DirectionalLightActor extends Actor {
 }
 
 class BoxComponent extends MeshComponent {
-    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial()) {
-        super(new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
+    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial()) {
+        super(app, new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
     }
 }
 
 class BoxActor extends Actor {
-    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshBasicMaterial()) {
-        super();
-        this.addComponent(new BoxComponent(width, height, depth, widthSegments, heightSegments, depthSegments, material));
+    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshBasicMaterial()) {
+        super(app);
+        this.addComponent(new BoxComponent(this.app, width, height, depth, widthSegments, heightSegments, depthSegments, material));
     }
 }
 
@@ -2692,9 +2780,9 @@ class SkyComponent extends SceneComponent {
             this.obj.userData["LYObject"] = this;
         }
     }
-    constructor(skyparam) {
+    constructor(app, skyparam) {
         let obj = new SkyMesh();
-        super(obj);
+        super(app, obj);
         this.skyParam = DefaultSkyParam;
         this.sunPosition = new Vector3();
         this.obj = obj;
@@ -2716,11 +2804,14 @@ class SkyComponent extends SceneComponent {
         this.threeObject.sunPosition.value.copy(this.sunPosition);
         (_b = (_a = this.world) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.markRenderStateDirty();
     }
+    destroyObject() {
+        ThreeObjectLibrary.disposeMeshResource(this.obj);
+    }
 }
 
 class SkyActor extends Actor {
-    constructor() {
-        super();
+    constructor(app) {
+        super(app);
         this._name = "SkyActor";
         this.skyComponent = null;
         this.name = "DirectionalLightActor";
@@ -2729,15 +2820,15 @@ class SkyActor extends Actor {
         this.setScale(45000, 45000, 45000);
     }
     constructRootComponent() {
-        this.skyComponent = new SkyComponent();
+        this.skyComponent = new SkyComponent(this.app);
         this.rootComponent = this.skyComponent;
         this.rootComponent.parentActor = this;
     }
 }
 
 class PlaneComponent extends MeshComponent {
-    constructor(width, height, material, widthSegments = 1, heightSegments = 1) {
-        super(new PlaneGeometry(width, height, widthSegments, heightSegments), material);
+    constructor(app, width, height, material, widthSegments = 1, heightSegments = 1) {
+        super(app, new PlaneGeometry(width, height, widthSegments, heightSegments), material);
     }
 }
 
@@ -2745,9 +2836,9 @@ class PlaneActor extends Actor {
     get planeComponent() {
         return this._planeComponent;
     }
-    constructor(width, height, material = new MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
-        super();
-        this._planeComponent = new PlaneComponent(width, height, material, widthSegments, heightSegments);
+    constructor(app, width, height, material = new MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
+        super(app);
+        this._planeComponent = new PlaneComponent(this.app, width, height, material, widthSegments, heightSegments);
         this._planeComponent.setRotation(Math.PI * 0.5 * -1, 0, 0);
         this.addComponent(this._planeComponent);
         this._planeComponent.receiveShadow = true;
@@ -2761,8 +2852,8 @@ class PlaneActor extends Actor {
 }
 
 class SphereComponent extends MeshComponent {
-    constructor(radius, material = new MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
-        super(new SphereGeometry(radius, widthSegments, heightSegments), material);
+    constructor(app, radius, material = new MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
+        super(app, new SphereGeometry(radius, widthSegments, heightSegments), material);
     }
 }
 
@@ -2776,9 +2867,9 @@ class LabelComponent extends SceneComponent {
             this.obj.userData["LYObject"] = this;
         }
     }
-    constructor(domElement, center = new Vector2(0.5, 1)) {
+    constructor(app, domElement, center = new Vector2(0.5, 1)) {
         let obj = new CSS2DObject(domElement);
-        super(obj);
+        super(app, obj);
         this.obj = obj;
         obj.center = center;
     }
@@ -3005,4 +3096,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, LYAssetManager, LYLoadTask, LabelComponent, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, ThreeJsApp, ThreeObjectLibrary, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
+export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, LabelComponent, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, ThreeJsApp, ThreeObjectLibrary, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };