diff --git a/packages/editor/src/language/zh-CN-en-US.ts b/packages/editor/src/language/zh-CN-en-US.ts
index f2527b0..2063112 100644
--- a/packages/editor/src/language/zh-CN-en-US.ts
+++ b/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: {
diff --git a/packages/editor/src/views/editor/components/extraPane/resource/builtin/Tiles.vue b/packages/editor/src/views/editor/components/extraPane/resource/builtin/Tiles.vue
index d841061..6f17b04 100644
--- a/packages/editor/src/views/editor/components/extraPane/resource/builtin/Tiles.vue
+++ b/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) {
diff --git a/packages/editor/src/views/editor/components/extraPane/resource/public/AssetsList.vue b/packages/editor/src/views/editor/components/extraPane/resource/public/AssetsList.vue
index b9e39ae..0afd67d 100644
--- a/packages/editor/src/views/editor/components/extraPane/resource/public/AssetsList.vue
+++ b/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){
diff --git a/packages/editor/src/views/editor/index.vue b/packages/editor/src/views/editor/index.vue
index ff83870..c6f2afd 100644
--- a/packages/editor/src/views/editor/index.vue
+++ b/packages/editor/src/views/editor/index.vue
@@ -125,7 +125,7 @@ function getScene(sceneInfo) {
-
+
diff --git a/packages/editor/src/views/editor/layouts/Sider.vue b/packages/editor/src/views/editor/layouts/Sidebar.vue
similarity index 91%
rename from packages/editor/src/views/editor/layouts/Sider.vue
rename to packages/editor/src/views/editor/layouts/Sidebar.vue
index cbc51c6..866ba26 100644
--- a/packages/editor/src/views/editor/layouts/Sider.vue
+++ b/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(null);
const tabs = ref>([]);
@@ -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(()=>{
diff --git a/packages/editor/src/views/editor/layouts/index.ts b/packages/editor/src/views/editor/layouts/index.ts
index 53949e5..c84f141 100644
--- a/packages/editor/src/views/editor/layouts/index.ts
+++ b/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 };
diff --git a/packages/editor/src/views/editor/layouts/sidebar/Sidebar3DTiles.vue b/packages/editor/src/views/editor/layouts/sidebar/Sidebar3DTiles.vue
new file mode 100644
index 0000000..b6e9ecf
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/Sidebar3DTiles.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/editor/src/views/editor/layouts/sidebar/tiles/Sidebar.3DTiles.Debug.vue b/packages/editor/src/views/editor/layouts/sidebar/tiles/Sidebar.3DTiles.Debug.vue
new file mode 100644
index 0000000..91dffc8
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/tiles/Sidebar.3DTiles.Debug.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/editor/types/three.d.ts b/packages/editor/types/three.d.ts
new file mode 100644
index 0000000..907f67d
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/sdk/lib/constant/enum.ts b/packages/sdk/lib/constant/enum.ts
index c7f89a4..b91b541 100644
--- a/packages/sdk/lib/constant/enum.ts
+++ b/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,
}
\ No newline at end of file
diff --git a/packages/sdk/lib/core/objects/Tile.ts b/packages/sdk/lib/core/objects/Tile.ts
index bfd2623..d71071a 100644
--- a/packages/sdk/lib/core/objects/Tile.ts
+++ b/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方法，因为要接收参数
*/
diff --git a/packages/sdk/lib/core/objects/index.ts b/packages/sdk/lib/core/objects/index.ts
index 2acfb08..145e8e1 100644
--- a/packages/sdk/lib/core/objects/index.ts
+++ b/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";
\ No newline at end of file
+export {default as Tiles, getDefault3DTilesOptions} from "./Tile.ts";
\ No newline at end of file
diff --git a/packages/sdk/lib/core/preview/Preview.ts b/packages/sdk/lib/core/preview/Preview.ts
index 60e9b67..4cb5530 100644
--- a/packages/sdk/lib/core/preview/Preview.ts
+++ b/packages/sdk/lib/core/preview/Preview.ts
@@ -330,7 +330,6 @@ export default class Preview extends THREE.EventDispatcher {
url: fileOrUrl,
name: "AstralPreviewTiles",
reset2origin:true,
- debug:false,
})
this.addTiles(tiles).then(() => {
this.modules.controls.fitToBox(tiles,true);
diff --git a/packages/sdk/lib/utils/scene/index.ts b/packages/sdk/lib/utils/scene/index.ts
index eee9d3f..1528bc9 100644
--- a/packages/sdk/lib/utils/scene/index.ts
+++ b/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;
+}
+
/**
* 获取场景/物体中的所有动画
*/
diff --git a/packages/sdk/types/objects/Tile.d.ts b/packages/sdk/types/objects/Tile.d.ts
index eaa67c8..6eeb54c 100644
--- a/packages/sdk/types/objects/Tile.d.ts
+++ b/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 的实用程序类，用于跟踪当前使用的项目，以便渲染的项目不会被卸载