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

packages/editor/src/language/zh-CN-en-US.ts

@@ -395,10 +395,6 @@ export default {
                 'Depth Write': '深度缓冲',
                 Wireframe: '线框',
             },
-            "Scene theme": "场景主题",
-            sceneTheme: {
-                'Blue tone': '蓝田日暖玉生烟',
-            },
             Animations: '动画',
             animation: {
                 Play: '播放',
@@ -542,6 +538,12 @@ export default {
             "Html panel":"Html面板",
             htmlPanel: {
                 Content: "内容"
+            },
+            "3D Tiles": "3D Tiles",
+            tiles: {
+                "Color mode": "颜色模式",
+                "Box bounds": "盒边界",
+                "Sphere bounds": "球形边界",
             }
         },
         assets: {
@@ -606,7 +608,8 @@ export default {
         Copy: "复制",
         Focus: '聚焦',
         Support: '支持',
-        Upload: '上传'
+        Upload: '上传',
+        Debug:"调试",
     },
     /* 提示 */
     prompt: {

packages/editor/src/views/editor/components/extraPane/resource/builtin/Tiles.vue

@@ -88,7 +88,6 @@ async function handlePreview(item){
   //     url:import.meta.env.VITE_GLOB_ORIGIN + item.tileset,
   //     name:previewInfo.name,
   //     reset2origin:true,
-  //     debug:false,
   //   })
   //
   //   previewer.addTiles(tiles).then(() => {
@@ -109,7 +108,6 @@ function addToScene(item, position?: Vector3) {
     url: url,
     name:item.name.value || item.name,
     reset2origin:true,
-    debug:false,
   })
 
   if (position && tiles.options.reset2origin) {

packages/editor/src/views/editor/components/extraPane/resource/public/AssetsList.vue

@@ -246,7 +246,6 @@ function addToScene(asset: IAssets.Item,positionOrObject?: Vector3 | Object3D) {
         url: url,
         name: asset.name,
         reset2origin:true,
-        debug:false,
       })
 
       if(positionOrObject && (positionOrObject as Vector3).isVector3 && tiles.options.reset2origin){

packages/editor/src/views/editor/index.vue

@@ -125,7 +125,7 @@ function getScene(sceneInfo) {
 
         <n-layout-sider collapse-mode="transform" :collapsed-width="0" :width="siderWidth"
                         :native-scrollbar="false" show-trigger="bar" bordered>
-          <Layout.Sider/>
+          <Layout.Sidebar/>
         </n-layout-sider>
       </n-layout>
 

packages/editor/src/views/editor/layouts/Sidebar.vue

@@ -17,7 +17,8 @@ import {
   Opacity,
   ImageReference,
   LocationHeart,
-  LocationCompany
+  LocationCompany,
+  ChoroplethMap
 } from "@vicons/carbon";
 
 import { t } from "@/language";
@@ -30,13 +31,13 @@ import SidebarHistory from "./sidebar/SidebarHistory.vue";
 import SidebarObject from "./sidebar/SidebarObject.vue";
 import SidebarGeometry from "./sidebar/SidebarGeometry.vue";
 import SidebarMaterial from "./sidebar/SidebarMaterial.vue";
-// import SidebarSceneTheme from "./sidebar/SidebarSceneTheme.vue";
 import SidebarAnimations from "./sidebar/SidebarAnimations.vue";
 import SidebarScript from "./sidebar/SidebarScript.vue";
 import SidebarDrawing from "./sidebar/SidebarDrawing.vue";
 import SidebarParticle from "./sidebar/SidebarParticle.vue";
 import SidebarBillboard from "./sidebar/SidebarBillboard.vue";
 import SidebarHtmlPanel from "./sidebar/SidebarHtmlPanel.vue";
+import Sidebar3DTiles from "./sidebar/Sidebar3DTiles.vue";
 
 const tabsInstRef = ref<TabsInst | null>(null);
 const tabs = ref<Array<any>>([]);
@@ -58,7 +59,6 @@ function setTabs(object){
       { name: "renderer", icon: { text: 'Renderer config',color:"#A9A9A9", component: markRaw(ImageReference) }, component: markRaw(SidebarRenderer) },
       { name: "effect", icon: { text: 'Post processing',color:"#A9A9A9", component: markRaw(MagicWandFilled) }, component: markRaw(SidebarEffect) },
       { name: "weather", icon: { text: 'Weather',color:"#A9A9A9", component: markRaw(CloudSnow) }, component: markRaw(SidebarWeather) },
-    // {name:"styles",icon:{text:'Scene theme',color:"#A9A9A9",component:markRaw(JoinOuter)},component:markRaw(SidebarSceneTheme)},
       { name: "history", icon: { text: 'History',color:"#A9A9A9", component: markRaw(ResultOld) }, component: markRaw(SidebarHistory) },
       { name: "drawing", icon: { text: 'Scene drawing',color:"#A9A9A9", component: markRaw(Image) }, component: markRaw(SidebarDrawing) },
   ];
@@ -91,6 +91,11 @@ function setTabs(object){
 
         current.value = 'htmlPanel';
         break;
+      case "TilesGroup":
+        object3DTabs.push({ name: '3DTiles', icon: { text: '3D Tiles',color:"#A9575F", component: markRaw(ChoroplethMap) }, component: markRaw(Sidebar3DTiles) })
+
+        current.value = '3DTiles';
+        break;
     }
   }
 
@@ -118,6 +123,13 @@ function setTabs(object){
       current.value = 'object';
     }
   }
+
+  // 如果当前选中的对象不是3DTiles，但是侧边栏是3DTiles，则切换到对象侧边栏
+  if (current.value === '3DTiles') {
+    if (!Utils.is3DTilesObject(object)){
+      current.value = 'object';
+    }
+  }
 }
 
 onMounted(()=>{

packages/editor/src/views/editor/layouts/index.ts

@@ -2,7 +2,7 @@ import Header from "./Header.vue";
 import Footer from "./Footer.vue";
 import Scene from "./Scene.vue";
 // import Cesium from "./Cesium.vue";
-import Sider from "./Sider.vue";
+import Sidebar from "./Sidebar.vue";
 import Assets from "./Assets.vue";
 
-export { Header, Footer, Scene,Sider,Assets };
+export { Header, Footer, Scene,Sidebar,Assets };

packages/editor/src/views/editor/layouts/sidebar/Sidebar3DTiles.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {onBeforeUnmount, onMounted, reactive} from "vue";
+import {CaretForwardOutline} from "@vicons/ionicons5";
+import {App,Utils,Hooks,getDefault3DTilesOptions} from "@astral3d/engine";
+import {t} from "@/language";
+import Debug from "@/views/editor/layouts/sidebar/tiles/Sidebar.3DTiles.Debug.vue";
+
+const tilesData = reactive(getDefault3DTilesOptions());
+
+function updateUI() {
+  const object = App.selected;
+  if(!object) return;
+
+  if (!Utils.is3DTilesObject(object)) return;
+
+  Utils.deepAssign(tilesData, object.options);
+}
+
+function update(key:string): void {
+  const object = App.selected;
+  if(!object) return;
+
+  if (!Utils.is3DTilesObject(object)) return;
+
+  switch (key) {
+    case "debug":
+      object.setDebug(tilesData.debug);
+      break;
+  }
+}
+
+onMounted(() => {
+  Hooks.useAddSignal("objectSelected", updateUI);
+
+  updateUI();
+})
+onBeforeUnmount(() => {
+  Hooks.useRemoveSignal("objectSelected", updateUI);
+})
+
+</script>
+
+<template>
+  <n-collapse display-directive="show" :default-expanded-names="['debug']">
+    <template #arrow>
+      <n-icon>
+        <CaretForwardOutline />
+      </n-icon>
+    </template>
+
+    <!--  Debug  -->
+    <n-collapse-item :title="t('other.Debug')" name="debug">
+      <Debug :data="tilesData.debug" @update="update" />
+    </n-collapse-item>
+  </n-collapse>
+</template>
+
+<style scoped lang="less">
+
+</style>

packages/editor/src/views/editor/layouts/sidebar/tiles/Sidebar.3DTiles.Debug.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import {t} from "@/language";
+import {getDefault3DTilesOptions,TILES_DEBUG_COLOR_MODE} from "@astral3d/engine";
+
+withDefaults(defineProps<{
+  data: {
+    enabled: boolean,
+    colorMode: string,
+    displayBoxBounds:boolean,
+    displaySphereBounds:boolean,
+  }
+}>(), {
+  data: () => getDefault3DTilesOptions().debug
+})
+
+const emits = defineEmits(['update']);
+
+function update(){
+  emits('update', "debug");
+}
+</script>
+
+<template>
+  <div class="sidebar-config-item">
+    <span>{{ t(`other.Enable`) }}</span>
+    <div>
+      <n-checkbox size="small" v-model:checked="data.enabled" @update:checked="update()"/>
+    </div>
+  </div>
+
+  <!-- 颜色模式 -->
+  <div class="sidebar-config-item">
+    <span>{{ t(`layout.sider.tiles.Color mode`) }}</span>
+    <n-select v-model:value="data.colorMode" size="small" :options="[
+        {label: 'None', value: TILES_DEBUG_COLOR_MODE.None },
+        {label: 'Screen error', value: TILES_DEBUG_COLOR_MODE['Screen error']},
+        {label: 'Geometric error', value: TILES_DEBUG_COLOR_MODE['Geometric error']},
+        {label: 'Distance', value: TILES_DEBUG_COLOR_MODE.Distance},
+        {label: 'Depth', value: TILES_DEBUG_COLOR_MODE.Depth},
+        {label: 'Relative depth', value: TILES_DEBUG_COLOR_MODE['Relative depth']},
+        {label: 'Is leaf', value: TILES_DEBUG_COLOR_MODE['Is leaf']},
+        {label: 'Random color', value: TILES_DEBUG_COLOR_MODE['Random color']},
+        {label: 'Random node color', value: TILES_DEBUG_COLOR_MODE['Random node color']},
+        {label: 'Load order', value: TILES_DEBUG_COLOR_MODE['Load order']},
+    ]" :disabled="!data.enabled" @update:value="update()" />
+  </div>
+
+  <div class="sidebar-config-item">
+    <span>{{ t(`layout.sider.tiles.Box bounds`) }}</span>
+    <div>
+      <n-checkbox size="small" v-model:checked="data.displayBoxBounds" @update:checked="update()" :disabled="!data.enabled"/>
+    </div>
+  </div>
+
+  <div class="sidebar-config-item">
+    <span>{{ t(`layout.sider.tiles.Sphere bounds`) }}</span>
+    <div>
+      <n-checkbox size="small" v-model:checked="data.displaySphereBounds" @update:checked="update()" :disabled="!data.enabled"/>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+</style>

packages/editor/types/three.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 扩展three.js类型声明
+ */
+import * as THREE from 'three';
+
+declare module 'three' {
+    interface Object3D extends THREE.Object3D{
+        /* 强制解决three本身类型声明产生的各种问题 */
+        [key:string]:any;
+    }
+}