diff --git a/src/core/Constract.ts b/src/core/Constract.ts index 37c09ca..e691545 100644 --- a/src/core/Constract.ts +++ b/src/core/Constract.ts @@ -22,6 +22,10 @@ const Constract = Object.freeze({ // 选择模式 CursorModeSelectByRec: 'selectByRec', + // 黄选扩展包围盒的大小 + RED_EXPAND_AMOUNT: 0.02, + YELLOW_EXPAND_AMOUNT: 0.1, + HEIGHT_GSTORE: 0.03, HEIGHT_MEASURE: 0.02, HEIGHT_RACK: 0, diff --git a/src/core/controls/SelectInspect.ts b/src/core/controls/SelectInspect.ts index d78e97a..b8c7bf4 100644 --- a/src/core/controls/SelectInspect.ts +++ b/src/core/controls/SelectInspect.ts @@ -8,6 +8,7 @@ import EventBus from '@/runtime/EventBus' import { markRaw } from 'vue' import { getMeta } from '@/core/manager/ModuleManager.ts' import MouseMoveInspect from '@/core/controls/MouseMoveInspect.ts' +import Constract from '@/core/Constract.ts' let pdFn, pmFn, puFn @@ -19,12 +20,12 @@ export default class SelectInspect implements IControls { /** * 线框材质，用于显示选中对象的包围盒 */ - yellowMaterial: LineMaterial = new LineMaterial({ color: 0xffff00, linewidth: 2 }) + yellowMaterial: LineMaterial = new LineMaterial({ color: 0xffff00, linewidth: 3 }) /** * 线框材质，用于显示选中对象的包围盒 */ - redMaterial: LineMaterial = new LineMaterial({ color: 0xff0000, linewidth: 2 }) + redMaterial: LineMaterial = new LineMaterial({ color: 0xff0000, linewidth: 3 }) /** * 矩形材质，用于显示鼠标拖拽选择的矩形区域 @@ -132,36 +133,43 @@ export default class SelectInspect implements IControls { this.viewport.scene.add(this.redSelectionGroup) } + /** + * 创建红选包围盒 + */ createRedSelectionBox(object: THREE.Object3D) { // 如果对象没有 entityId，则不创建包围盒线框 if (!object.userData.entityId) { return } - - // 如果选中的对象小于 0.5，要扩展包围盒 - const RED_EXPAND_AMOUNT = 0.01 // 扩展包围盒的大小 - // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb) - object.updateWorldMatrix(false, true) - const box = new THREE.Box3().setFromObject(object) - box.expandByScalar(RED_EXPAND_AMOUNT) - - const size = new THREE.Vector3() - box.getSize(size) - - const center = new THREE.Vector3() - box.getCenter(center) + box.expandByScalar(Constract.RED_EXPAND_AMOUNT) // 假设 Constract.RED_EXPAND_AMOUNT 已定义 + + const min = box.min + const max = box.max + + const corners = [ + new THREE.Vector3(min.x - Constract.RED_EXPAND_AMOUNT, max.y + Constract.RED_EXPAND_AMOUNT, min.z - Constract.RED_EXPAND_AMOUNT), + new THREE.Vector3(max.x + Constract.RED_EXPAND_AMOUNT, max.y + Constract.RED_EXPAND_AMOUNT, min.z - Constract.RED_EXPAND_AMOUNT), + new THREE.Vector3(max.x + Constract.RED_EXPAND_AMOUNT, max.y + Constract.RED_EXPAND_AMOUNT, max.z + Constract.RED_EXPAND_AMOUNT), + new THREE.Vector3(min.x - Constract.RED_EXPAND_AMOUNT, max.y + Constract.RED_EXPAND_AMOUNT, max.z + Constract.RED_EXPAND_AMOUNT) + ] + + // 构建矩形边框（4 条边） + const positions = [] + for (let i = 0; i < 4; i++) { + const p1 = corners[i] + const p2 = corners[(i + 1) % 4] + positions.push(p1.x, p1.y, p1.z) + positions.push(p2.x, p2.y, p2.z) + } - // 创建包围盒几何体 - const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z) - const edgesGeometry = new THREE.EdgesGeometry(helperGeometry) + // 创建几何体 const lineGeom = new LineGeometry() - // @ts-ignore - lineGeom.setPositions(edgesGeometry.attributes.position.array) + const vertices = new Float32Array(positions) + lineGeom.setPositions(vertices) const selectionBox = new Line2(lineGeom, this.redMaterial) selectionBox.computeLineDistances() - selectionBox.position.copy(center) this.redSelectionGroup.add(selectionBox) } @@ -177,30 +185,43 @@ export default class SelectInspect implements IControls { } this.selectionId = selectedObject.userData?.entityId - // 如果选中的对象小于 0.5，要扩展包围盒 - const YELLOW_EXPAND_AMOUNT = 0.03 // 扩展包围盒的大小 // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb) selectedObject.updateWorldMatrix(false, true) - const box = new THREE.Box3().setFromObject(selectedObject) - box.expandByScalar(YELLOW_EXPAND_AMOUNT) - - const size = new THREE.Vector3() - box.getSize(size) - const center = new THREE.Vector3() - box.getCenter(center) + const min = box.min + const max = box.max + + const corners = [ + new THREE.Vector3(min.x - Constract.YELLOW_EXPAND_AMOUNT, max.y + Constract.YELLOW_EXPAND_AMOUNT, min.z - Constract.YELLOW_EXPAND_AMOUNT), + new THREE.Vector3(max.x + Constract.YELLOW_EXPAND_AMOUNT, max.y + Constract.YELLOW_EXPAND_AMOUNT, min.z - Constract.YELLOW_EXPAND_AMOUNT), + new THREE.Vector3(max.x + Constract.YELLOW_EXPAND_AMOUNT, max.y + Constract.YELLOW_EXPAND_AMOUNT, max.z + Constract.YELLOW_EXPAND_AMOUNT), + new THREE.Vector3(min.x - Constract.YELLOW_EXPAND_AMOUNT, max.y + Constract.YELLOW_EXPAND_AMOUNT, max.z + Constract.YELLOW_EXPAND_AMOUNT) + ] + + // 构建矩形边框（4 条边） + const positions = [] + for (let i = 0; i < 4; i++) { + const p1 = corners[i] + const p2 = corners[(i + 1) % 4] + positions.push(p1.x, p1.y, p1.z) + positions.push(p2.x, p2.y, p2.z) + } - // 创建包围盒几何体 - const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z) - const edgesGeometry = new THREE.EdgesGeometry(helperGeometry) + // 创建几何体 const lineGeom = new LineGeometry() - // @ts-ignore - lineGeom.setPositions(edgesGeometry.attributes.position.array) + const vertices = new Float32Array(positions) + lineGeom.setPositions(vertices) const selectionBox = new Line2(lineGeom, this.yellowMaterial) selectionBox.computeLineDistances() - selectionBox.position.copy(center) + + // 获取包围盒中心并设置位置 + const center = new THREE.Vector3() + box.getCenter(center) + // selectionBox.position.copy(center) + selectionBox.computeLineDistances() + this.selectionBox = selectionBox console.log('selectedItem', this.viewport.state.selectedItem) diff --git a/src/editor/Model2DEditor.vue b/src/editor/Model2DEditor.vue index e30834e..12519c8 100644 --- a/src/editor/Model2DEditor.vue +++ b/src/editor/Model2DEditor.vue @@ -11,10 +11,12 @@ 2D + @click="state.view3DMode = Constract.Mode2D">2D + 3D + @click="state.view3DMode = Constract.Mode3D">3D +
@@ -69,18 +71,25 @@ - 00001 + + {{ state?.selectedEntityId }} + - 00011 + + {{ state?.multiSelectedEntityIds?.length }} + + -
+ {{ toFixed(state?.camera.position.x) }}, {{ toFixed(state?.camera.position.y) }}, {{ toFixed(state?.camera.position.z) }} -
+
- {{ toFixed(state?.mouse.x) }},{{ toFixed(state?.mouse.z) }} + + {{ toFixed(state?.mouse.x) }},{{ toFixed(state?.mouse.z) }} +
diff --git a/vite.config.ts b/vite.config.ts index c62df2a..786d83c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,13 +3,13 @@ import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // import vueJsx from '@vitejs/plugin-vue-jsx' -import vueDevTools from 'vite-plugin-vue-devtools' +// import vueDevTools from 'vite-plugin-vue-devtools' export default defineConfig({ plugins: [ vue(), // vueJsx(), - vueDevTools(), + // vueDevTools(), ], resolve: { alias: {