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

packages/sdk/lib/constant/enum.ts

@@ -39,4 +39,20 @@ export const ROAMING_CHARACTERS = {
     WORK_MAN: "Workman",
     X_BOT: "X_Bot",
     Y_BOT: "Y_Bot",
+}
+
+/**
+ * 3DTiles DebugTilesPlugin ColorMode enum
+ */
+export const TILES_DEBUG_COLOR_MODE = {
+    "None": 0,
+    "Screen error": 1,
+    "Geometric error": 2,
+    "Distance": 3,
+    "Depth": 4,
+    "Relative depth": 5,
+    "Is leaf": 6,
+    "Random color": 7,
+    "Random node color": 8,
+    "Load order": 10,
 }

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";

packages/sdk/lib/core/preview/Preview.ts

@@ -330,7 +330,6 @@ export default class Preview extends THREE.EventDispatcher<PreviewerEventMap>  {
                         url: fileOrUrl,
                         name: "AstralPreviewTiles",
                         reset2origin:true,
-                        debug:false,
                     })
                     this.addTiles(tiles).then(() => {
                         this.modules.controls.fitToBox(tiles,true);

packages/sdk/lib/utils/scene/index.ts

@@ -104,6 +104,13 @@ export function isHtmlPanelObject(object:Object3D | null){
     return object && (object.isHtmlPanel || object.isHtmlSprite) && object.element;
 }
 
+/**
+ * 判断是否是3DTiles对象
+ */
+export function is3DTilesObject(object:Object3D | null){
+    return object && (object.isTilesGroup || object.type === "TilesGroup") && object.options;
+}
+
 /**
  * 获取场景/物体中的所有动画
  */

packages/sdk/types/objects/Tile.d.ts

@@ -6,8 +6,17 @@ declare namespace ITiles{
         name?:string;
         // 加载的3d tiles由于坐标原因，一般不在原点。此配置项为true则重置回原点
         reset2origin?:boolean;
-        // 是否开启tiles的debug模式
-        debug?:boolean;
+        // debug模式
+        debug?: {
+            // 是否启用
+            enabled:boolean;
+            // 渲染tile set时使用的颜色模式
+            colorMode: number;
+            // 显示包围盒的线框
+            displayBoxBounds: boolean;
+            // 显示包围球的线框
+            displaySphereBounds: boolean;
+        };
         // 目标屏幕空间误差（以像素为单位）
         errorTarget?: number;
         // LRU缓存:TilesRenderer 的实用程序类，用于跟踪当前使用的项目，以便渲染的项目不会被卸载