SelectInspect 选择工具

src/designer/Viewport.ts

@@ -6,18 +6,16 @@ import Stats from 'three/examples/jsm/libs/stats.module'
 import type WorldModel from '@/model/WorldModel.ts'
 import $ from 'jquery'
 import { reactive, watch } from 'vue'
-import MouseMoveInspect from '@/designer/model2DEditor/tools/MouseMoveInspect.ts'
 import type { ITool } from '@/designer/model2DEditor/tools/ITool.ts'
 import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
 import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
 import { getAllItemTypes } from '@/runtime/DefineItemType.ts'
 import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
+
 import type Toolbox from '@/model/itemType/Toolbox.ts'
 import { calcPositionUseSnap } from '@/model/ModelUtils.ts'
-import textureUrl from '@/assets/images/conveyor/shapes/Belt1.png'
+import SelectInspect from '@/designer/model2DEditor/tools/SelectInspect.ts'
-import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+import MouseMoveInspect from '@/designer/model2DEditor/tools/MouseMoveInspect.ts'
-import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
-import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
 
 /**
  * 编辑器对象
@@ -41,7 +39,8 @@ export default class Viewport {
   toolStartObject: THREE.Object3D | null = null
   currentTool: Toolbox | null = null
   tools: ITool[] = [
-    new MouseMoveInspect()
+    new MouseMoveInspect(),
+    new SelectInspect()
   ]
   toolbox: Record<string, Toolbox> = {}
 
@@ -63,6 +62,7 @@ export default class Viewport {
     currentFloor: '',
     isReady: false,
     cursorMode: 'normal',
+    selectedObject: null,
     camera: {
       position: { x: 0, y: 0, z: 0 },
       rotation: { x: 0, y: 0, z: 0 }
@@ -209,35 +209,8 @@ export default class Viewport {
       }
       this.updateGridVisibility()
     }))
-    this.watchList.push(watch(() => this.state.cursorMode, (newVal: CursorMode) => {
-      if (!this.state.isReady) {
-        return
-      }
-      if (this.currentTool) {
-        this.currentTool.stop()
-        this.currentTool = null
-      }
-      if (newVal === 'normal' || !newVal) {
-        this.dragControl.dragControls.enabled = true
-        return
-      }
-
-      const currentTool = this.toolbox[newVal]
-      if (currentTool) {
-        // 选择标尺工具
-        this.currentTool = currentTool
-        this.dragControl.dragControls.enabled = false
-
-      } else {
-        system.showErrorDialog(`当前鼠标模式 ${newVal} 不支持`)
-      }
-
-      if (this.currentTool) {
-        this.currentTool.start(this.toolStartObject)
-        this.toolStartObject = null
-      }
-    }))
 
+    // 监听窗口大小变化
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.viewerDom)
     }
@@ -252,7 +225,7 @@ export default class Viewport {
       tool.init(this)
     }
 
-
+    // 触发所有物品类型的 afterAddViewport 方法
     _.forEach(getAllItemTypes(), (itemType: ItemTypeDefineOption) => {
       itemType.clazz.afterAddViewport(this)
     })
@@ -495,6 +468,11 @@ export interface ViewportState {
   cursorMode: CursorMode,
 
   /**
+   * 选中的对象
+   */
+  selectedObject: THREE.Object3D | null
+
+  /**
    * 相机状态
    */
   camera: {

src/designer/model2DEditor/EsDragControls.ts

@@ -4,6 +4,7 @@ import type Viewport from '@/designer/Viewport.ts'
 import Constract from '@/designer/Constract.ts'
 import { getItemTypeByName } from '@/runtime/DefineItemType.ts'
 import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
+import { markRaw } from 'vue'
 
 // dragControls 绑定函数
 let dragStartFn, dragFn, dragEndFn, clickblankFn
@@ -114,6 +115,9 @@ export default class EsDragControls {
       if (e.object.userData.onClick) {
         e.object.userData.onClick(e)
       }
+      if (e.object.userData.selectable) {
+        this.viewport.state.selectedObject = markRaw(e.object)
+      }
     }
 
     if (e.object.userData?.type) {

src/designer/model2DEditor/tools/ITool.ts

@@ -2,4 +2,6 @@ export  interface ITool {
   init(viewport: any): void
 
   destory(): void
+
+  animate?: () => void;
 }

src/designer/model2DEditor/tools/MouseMoveInspect.ts

@@ -70,4 +70,7 @@ export default class MouseMoveInspect implements ITool {
     }
 
   }, 1)
+
+  animate(): void {
+  }
 }

src/designer/model2DEditor/tools/SelectInspect.ts

@@ -0,0 +1,76 @@
+import * as THREE from 'three'
+import type { ITool } from './ITool.ts'
+import { watch } from 'vue'
+import type Viewport from '@/designer/Viewport.ts'
+import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+/**
+ * 选择工具，用于在设计器中显示选中对象的包围盒
+ */
+export default class SelectInspect implements ITool {
+  viewport: any
+  material: LineMaterial
+  selectionBox: Line2
+
+  constructor() {
+    // 颜色变成黄
+    const color = 0xffff00  // 0xff0000
+    const lineWidth = 2
+    this.material = new LineMaterial({ color, linewidth: lineWidth })
+  }
+
+  init(viewport: Viewport) {
+    this.viewport = viewport
+
+    this.viewport.watchList.push(watch(() => this.viewport.state.selectedObject, (selectedObject) => {
+      if (this.selectionBox) {
+        viewport.scene.remove(this.selectionBox)
+        this.selectionBox.geometry.dispose()
+        this.selectionBox = null
+      }
+
+      const expandAmount = 0.2 // 扩展包围盒的大小
+      if (selectedObject !== null) {
+        // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb)
+        selectedObject.updateWorldMatrix(false, true)
+
+        const box = new THREE.Box3().setFromObject(selectedObject)
+        box.expandByScalar(expandAmount)
+
+        const size = new THREE.Vector3()
+        box.getSize(size)
+
+        const center = new THREE.Vector3()
+        box.getCenter(center)
+
+        // 创建包围盒几何体
+        const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z)
+        const edgesGeometry = new THREE.EdgesGeometry(helperGeometry)
+
+        // 使用 LineGeometry 包装 edgesGeometry
+        const lineGeom = new LineGeometry()
+        //@ts-ignore
+        lineGeom.setPositions(edgesGeometry.attributes.position.array)
+
+        const selectionBox = new Line2(lineGeom, this.material)
+        selectionBox.computeLineDistances()
+        selectionBox.position.copy(center)
+        selectionBox.name = 'selectionBox'
+        this.selectionBox = selectionBox
+
+        this.viewport.scene.add(selectionBox)
+      }
+    }))
+  }
+
+  destory() {
+    // 销毁选择工具
+    if (this.selectionBox) {
+      this.viewport.scene.remove(this.selectionBox)
+      this.selectionBox.geometry.dispose()
+      this.selectionBox = null
+    }
+  }
+}

src/model/itemType/ItemTypeLine.ts

@@ -105,10 +105,13 @@ export default abstract class ItemTypeLine extends ItemType {
     point.name = item.name
     point.uuid = item.id || THREE.MathUtils.generateUUID()
     point.userData = _.cloneDeep(item.dt) || {}
-    point.userData.type = item.t
+    _.extend(point.userData, {
-    point.userData.actionType = item.a
+      type: item.t,
-    point.userData.label = item.l
+      actionType: item.a,
-    point.userData.color = item.c
+      label: item.l,
+      color: item.c,
+      selectable: true
+    })
 
     point.rotation.set(
       THREE.MathUtils.degToRad(item.tf[1][0]),