itemType define

src/designer/Viewport.ts

@@ -1,6 +1,16 @@
 import _ from 'lodash'
 import * as THREE from 'three'
-import { AxesHelper, GridHelper, OrthographicCamera, Raycaster, Scene, Vector3, WebGLRenderer } from 'three'
+import {
+  AxesHelper,
+  GridHelper,
+  Mesh,
+  type Object3D,
+  OrthographicCamera,
+  Raycaster,
+  Scene,
+  Vector3,
+  WebGLRenderer
+} from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import EsDragControls from './model2DEditor/EsDragControls'
 import Stats from 'three/examples/jsm/libs/stats.module'
@@ -23,7 +33,7 @@ export default class Viewport {
   scene: Scene
   camera: OrthographicCamera
   renderer: WebGLRenderer
-  axesHelper: AxesHelper
+  axesHelper: GridHelper
   gridHelper: GridHelper
   statsControls: Stats
   controls: OrbitControls
@@ -139,30 +149,35 @@ export default class Viewport {
     this.initMode2DCamera()
 
     // 辅助线
-    this.axesHelper = new THREE.AxesHelper(3)
+    const axesHelper = new THREE.GridHelper(1000, 2)
+    axesHelper.material.color.setHex(0x000000)
+    axesHelper.material.linewidth = 2
+    // @ts-ignore
+    axesHelper.material.vertexColors = false
+    this.axesHelper = axesHelper
     this.scene.add(this.axesHelper)
 
-    this.gridHelper = new THREE.GridHelper(500, 500)
-    const gridHelper = this.gridHelper
-    gridHelper.material = new THREE.LineBasicMaterial({
-      color: 0x888888,
-      opacity: 0.8,
-      transparent: true
-    })
+    const gridHelper = new THREE.GridHelper(1000, 1000)
+    gridHelper.material.color.setHex(0x999999)
+    gridHelper.material.opacity = 0.8
+    gridHelper.material.transparent = true
+    // @ts-ignore
+    gridHelper.material.vertexColors = false
 
-    scene.add(gridHelper)
+    this.gridHelper = gridHelper
+    this.scene.add(this.gridHelper)
 
     // 光照
-    const ambientLight = new THREE.AmbientLight(0xffffff, 1.5)
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
     scene.add(ambientLight)
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
-    directionalLight.position.set(5, 5, 5).multiplyScalar(3)
-    directionalLight.castShadow = true
-    scene.add(directionalLight)
-
-    const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
-    scene.add(hemisphereLight)
+    // const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5)
+    // directionalLight.position.set(5, 5, 5).multiplyScalar(3)
+    // directionalLight.castShadow = true
+    // scene.add(directionalLight)
+    //
+    // const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1)
+    // scene.add(hemisphereLight)
 
     // 性能监控
     const statsControls = new Stats()
@@ -174,16 +189,6 @@ export default class Viewport {
     viewerDom.appendChild(statsControls.dom)
     $(statsControls.dom).children().css('height', '28px')
 
-    // 创建几何体和材质
-    const geometry = new THREE.BoxGeometry(1, 1, 1)
-    const material = new THREE.MeshStandardMaterial({
-      color: 0xcccccc,
-      metalness: 0.9,
-      roughness: 0.1
-    })
-    const cube = new THREE.Mesh(geometry, material)
-    scene.add(cube)
-
     this.animate()
 
     // 监听事件
@@ -372,9 +377,9 @@ export default class Viewport {
     const fadeStartDistance = 15  // 开始淡出的距离
 
     // 计算透明度（0~1）
-    let opacity = 1
+    let opacity = 0.8
     if (cameraDistance > fadeStartDistance) {
-      opacity = 1 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance), 1)
+      opacity = 0.8 - Math.min((cameraDistance - fadeStartDistance) / (maxVisibleDistance - fadeStartDistance) * 0.8, 0.8)
     }
 
     // 修改网格材质透明度

src/model/ModelUtils.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import type { ItemJson } from '@/model/itemTypeDefine/ItemTypeDefine.ts'
+import type { ItemJson, ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
 import { getAllItemTypes, getItemTypeByName } from '@/runtime/DefineItemType.ts'
 
 export function loadSceneFromJson(scene: THREE.Scene, items: ItemJson[]) {
@@ -7,15 +7,15 @@ export function loadSceneFromJson(scene: THREE.Scene, items: ItemJson[]) {
   const object3ds = loadObject3DFromJson(items)
 
   // 通知所有加载的对象, 模型加载完成
-  getAllItemTypes().forEach(itemType => {
-    if (typeof itemType.clazz.afterLoadComplete === 'function') {
-      itemType.clazz.afterLoadComplete(object3ds)
+  getAllItemTypes().forEach((itemType: ItemTypeDefineOption) => {
+    const ret = itemType.clazz.afterLoadComplete(object3ds)
+    if (ret && Array.isArray(ret)) {
+      // 如果返回值是数组，则合并到 object3ds 中
+      object3ds.push(...ret)
     }
   })
 
-  object3ds.forEach(object3D => {
-    scene.add(object3D)
-  })
+  scene.add(...object3ds)
 
   // 通知所有加载的对象, 模型加载完成
   getAllItemTypes().forEach(itemType => {

src/model/WorldModel.ts

@@ -6,7 +6,7 @@ import { Scene } from 'three'
 import type Viewport from '@/designer/Viewport.ts'
 import { loadSceneFromJson } from '@/model/ModelUtils.ts'
 
-import MeasureMeta from './itemTypeDefine/measure/MeasureMeta'
+import MeasureMeta from './itemType/measure/MeasureMeta'
 
 /**
  * 世界模型

src/model/itemTypeDefine/ItemTypeBase.ts → src/model/itemType/ItemTypeBase.ts

@@ -1,6 +1,6 @@
 import { type Object3D } from 'three'
 import type WorldModel from '@/model/WorldModel.ts'
-import type { ItemJson, ItemTypeDefineOption } from '@/model/itemTypeDefine/ItemTypeDefine.ts'
+import type { ItemJson, ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
 import * as THREE from 'three'
 
 export default abstract class ItemTypeBase {

src/model/itemTypeDefine/ItemTypeDefine.ts → src/model/itemType/ItemTypeDefine.ts

@@ -1,4 +1,4 @@
-import type ItemTypeBase from '@/model/itemTypeDefine/ItemTypeBase.ts'
+import type ItemTypeBase from '@/model/itemType/ItemTypeBase.ts'
 
 export type ActionType =
 /**

src/model/itemTypeDefine/ItemTypeLineBase.ts → src/model/itemType/ItemTypeLineBase.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three'
-import ItemTypeBase from '@/model/itemTypeDefine/ItemTypeBase.ts'
-import type { ItemJson } from '@/model/itemTypeDefine/ItemTypeDefine.ts'
+import ItemTypeBase from '@/model/itemType/ItemTypeBase.ts'
+import type { ItemJson } from '@/model/itemType/ItemTypeDefine.ts'
 import type WorldModel from '@/model/WorldModel.ts'
 
 /**
@@ -36,7 +36,6 @@ export default abstract class ItemTypeLineBase extends ItemTypeBase {
   afterLoadPoint(point: THREE.Object3D): void {
   }
 
-
   afterAddScene(scene: THREE.Scene, objects: THREE.Object3D[]) {
     super.afterAddScene(scene, objects)
 

src/model/itemTypeDefine/measure/Measure.ts → src/model/itemType/measure/Measure.ts

@@ -1,9 +1,9 @@
 import * as THREE from 'three'
-import ItemTypeLineBase from '@/model/itemTypeDefine/ItemTypeLineBase.ts'
-import type WorldModel from '@/model/WorldModel.ts'
-import { Material } from 'three/src/materials/Material'
+import ItemTypeLineBase from '@/model/itemType/ItemTypeLineBase.ts'
+import { Material, Object3D, Scene } from 'three'
+import WorldModel from '@/model/WorldModel.ts'
 
-export const TYPE_NAME = 'measure'
+export const GROUP_NAME = 'measure-group'
 export const POINT_NAME = 'measure_point'
 export const LABEL_NAME = 'measure_label'
 export const LINE_NAME = 'measure_line'
@@ -32,6 +32,10 @@ export default class Measure extends ItemTypeLineBase {
     })
 
     this.pointMaterial = new THREE.MeshBasicMaterial({ color: 0x303133, transparent: true, opacity: 0.9 })
+
+    this.group = new THREE.Group()
+    this.group.name = GROUP_NAME
+
     return Promise.resolve()
   }
 
@@ -40,6 +44,26 @@ export default class Measure extends ItemTypeLineBase {
     super.afterLoadLine(line)
   }
 
+
+  afterLoadGroup(group: THREE.Group) {
+    super.afterLoadGroup(group)
+    if (this.group) {
+      // 如果已经有 group，则忽略
+      return
+    }
+    this.group = group
+  }
+
+  afterLoadComplete(objects: THREE.Object3D[]): THREE.Object3D[] {
+    // 如果没有 group，则创建一个新的 group
+    if (!this.group) {
+      this.group = new THREE.Group()
+      this.group.name = GROUP_NAME
+    }
+
+    return [this.group]
+  }
+
   /**
    * 创建测量点
    */

src/model/itemTypeDefine/measure/MeasureMeta.ts → src/model/itemType/measure/MeasureMeta.ts

@@ -1,5 +1,5 @@
 import { defineItemType } from '@/runtime/DefineItemType.ts'
-import Measure from '@/model/itemTypeDefine/measure/Measure.ts'
+import Measure from '@/model/itemType/measure/Measure.ts'
 
 export default defineItemType({
   name: 'measure',