diff --git a/src/designer/Viewport.ts b/src/designer/Viewport.ts index fbecc70..95a956a 100644 --- a/src/designer/Viewport.ts +++ b/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) } // 修改网格材质透明度 diff --git a/src/model/ModelUtils.ts b/src/model/ModelUtils.ts index c73e089..6a1fd48 100644 --- a/src/model/ModelUtils.ts +++ b/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 => { diff --git a/src/model/WorldModel.ts b/src/model/WorldModel.ts index f860a91..c8b1b85 100644 --- a/src/model/WorldModel.ts +++ b/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' /** * 世界模型 diff --git a/src/model/itemTypeDefine/ItemTypeBase.ts b/src/model/itemType/ItemTypeBase.ts similarity index 95% rename from src/model/itemTypeDefine/ItemTypeBase.ts rename to src/model/itemType/ItemTypeBase.ts index a825ca9..c042687 100644 --- a/src/model/itemTypeDefine/ItemTypeBase.ts +++ b/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 { diff --git a/src/model/itemTypeDefine/ItemTypeDefine.ts b/src/model/itemType/ItemTypeDefine.ts similarity index 97% rename from src/model/itemTypeDefine/ItemTypeDefine.ts rename to src/model/itemType/ItemTypeDefine.ts index 8fd5fd3..399d7bf 100644 --- a/src/model/itemTypeDefine/ItemTypeDefine.ts +++ b/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 = /** diff --git a/src/model/itemTypeDefine/ItemTypeLineBase.ts b/src/model/itemType/ItemTypeLineBase.ts similarity index 95% rename from src/model/itemTypeDefine/ItemTypeLineBase.ts rename to src/model/itemType/ItemTypeLineBase.ts index b1a8618..d3d9e1c 100644 --- a/src/model/itemTypeDefine/ItemTypeLineBase.ts +++ b/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) diff --git a/src/model/itemTypeDefine/line/LineMeta.ts b/src/model/itemType/line/LineMeta.ts similarity index 100% rename from src/model/itemTypeDefine/line/LineMeta.ts rename to src/model/itemType/line/LineMeta.ts diff --git a/src/model/itemTypeDefine/measure/Measure.ts b/src/model/itemType/measure/Measure.ts similarity index 69% rename from src/model/itemTypeDefine/measure/Measure.ts rename to src/model/itemType/measure/Measure.ts index 7997496..5119f50 100644 --- a/src/model/itemTypeDefine/measure/Measure.ts +++ b/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] + } + /** * 创建测量点 */ diff --git a/src/model/itemTypeDefine/measure/MeasureMeta.ts b/src/model/itemType/measure/MeasureMeta.ts similarity index 73% rename from src/model/itemTypeDefine/measure/MeasureMeta.ts rename to src/model/itemType/measure/MeasureMeta.ts index 3b7d409..42220ec 100644 --- a/src/model/itemTypeDefine/measure/MeasureMeta.ts +++ b/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', diff --git a/src/model/itemTypeDefine/point/PointMeta.ts b/src/model/itemType/point/PointMeta.ts similarity index 100% rename from src/model/itemTypeDefine/point/PointMeta.ts rename to src/model/itemType/point/PointMeta.ts diff --git a/src/model/itemTypeDefine/store/QueueMeta.ts b/src/model/itemType/store/QueueMeta.ts similarity index 100% rename from src/model/itemTypeDefine/store/QueueMeta.ts rename to src/model/itemType/store/QueueMeta.ts