feat(SDK & Editor): 为3D Tiles添加侧边配置栏

packages/sdk/lib/core/objects/Tile.ts

@@ -3,25 +3,34 @@ import {GLTFExtensionsPlugin,GLTFMeshFeaturesExtension,GLTFStructuralMetadataExt
 import Loader from "@/core/loader/Loader.ts";
 import {PerspectiveCamera, WebGLRenderer, Group, JSONMeta} from "three";
 import {deepAssign} from "@/utils";
+import {TILES_DEBUG_COLOR_MODE} from "@/constant";
+import {useDispatchSignal} from "@/hooks";
+
+export const getDefault3DTilesOptions = ():ITiles.options => ({
+    url:"",
+    reset2origin:true,
+    debug: {
+        enabled:false,
+        colorMode: TILES_DEBUG_COLOR_MODE["Screen error"],
+        displayBoxBounds: true,
+        displaySphereBounds: false,
+    },
+    name:"Tiles",
+    errorTarget: 6,
+    LRUCache:{
+        maxSize: 4000,
+        minSize: 3000,
+        maxBytesSize: 0.4 * 2**30,
+        minBytesSize: 0.3 * 2**30,
+    }
+})
 
 export default class Tiles extends Group{
     type = "TilesGroup";
     isTilesGroup = true;
 
     // 默认配置
-    options: ITiles.options = {
-        url:"",
-        reset2origin:true,
-        debug:false,
-        name:"Tiles",
-        errorTarget: 6,
-        LRUCache:{
-            maxSize: 4000,
-            minSize: 3000,
-            maxBytesSize: 0.4 * 2**30,
-            minBytesSize: 0.3 * 2**30,
-        }
-    };
+    options: ITiles.options = getDefault3DTilesOptions();
 
     renderer: TilesRenderer;
 
@@ -37,6 +46,14 @@ export default class Tiles extends Group{
         this.name = this.options.name as string;
 
         this.renderer = this.initRenderer();
+
+        // 设置debug插件
+        this.setDebug(this.options.debug,false);
+        // 瓦片渐显隐
+        this.renderer.registerPlugin(new TilesFadePlugin());
+        // 从gpu卸载不可见瓦片数据，cpu上仍然存在
+        this.renderer.registerPlugin(new UnloadTilesPlugin());
+
         this.add(this.renderer.group);
     }
 
@@ -76,19 +93,6 @@ export default class Tiles extends Group{
         //     tilesRenderer.manager.addHandler( /\.(gltf|glb)$/g, loader );
         // })
 
-        // 瓦片渐显隐
-        tilesRenderer.registerPlugin(new TilesFadePlugin());
-        // 从gpu卸载不可见瓦片数据，cpu上仍然存在
-        tilesRenderer.registerPlugin(new UnloadTilesPlugin());
-        if(this.options.debug){
-            // 注册调试插件
-            tilesRenderer.registerPlugin(new DebugTilesPlugin());
-            // 获取调试插件
-            const debugTilesPlugin = tilesRenderer.getPluginByName('DEBUG_TILES_PLUGIN') as DebugTilesPlugin;
-            // 显示包围盒的线框
-            debugTilesPlugin.displayBoxBounds = true;
-        }
-
         // 子级瓦片加载
         tilesRenderer.addEventListener('load-model', (e) => {
             e.scene.traverse(c => {
@@ -119,6 +123,39 @@ export default class Tiles extends Group{
         this.renderer.setResolutionFromRenderer(camera, renderer);
     }
 
+    /**
+     * 设置debug插件
+     */
+    setDebug(debugOptions:ITiles.options["debug"], needCreate:boolean = true){
+        deepAssign(this.options.debug, debugOptions);
+
+        if(!this.options.debug) return;
+
+        // 获取调试插件
+        let debugTilesPlugin:DebugTilesPlugin | null = this.renderer.getPluginByName('DEBUG_TILES_PLUGIN') as DebugTilesPlugin | null;
+
+        if(!debugTilesPlugin){
+            if(!needCreate) return;
+
+            // 注册调试插件
+            this.renderer.registerPlugin(new DebugTilesPlugin());
+
+            // 获取debug插件
+            debugTilesPlugin = this.renderer.getPluginByName('DEBUG_TILES_PLUGIN') as DebugTilesPlugin;
+        }
+
+        debugTilesPlugin.enabled = this.options.debug.enabled;
+        debugTilesPlugin.colorMode = this.options.debug.colorMode;
+        debugTilesPlugin.displayBoxBounds = this.options.debug.displayBoxBounds;
+        debugTilesPlugin.displaySphereBounds = this.options.debug.displaySphereBounds;
+
+        if(!needCreate) return;
+
+        // 发起渲染
+        this.update();
+        useDispatchSignal("sceneGraphChanged");
+    }
+
     /**
      * 重写clone方法，因为要接收参数
      */

packages/sdk/lib/core/objects/index.ts

@@ -1,4 +1,4 @@
 export {default as Billboard, getDefaultBillboardOptions} from "./Billboard";
 export {HtmlPanelConverter, HtmlPanel, HtmlSprite} from "./HtmlPanel";
 export {default as ParticleEmitter, getDefaultParticleConfig} from "./ParticleEmitter";
-export {default as Tiles} from "./Tile.ts";
+export {default as Tiles, getDefault3DTilesOptions} from "./Tile.ts";