diff --git a/package.json b/package.json index c8325eb..257ab97 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@vitejs/plugin-vue": "^5.2.3", "@vitejs/plugin-vue-jsx": "^4.2.0", "@vue/tsconfig": "^0.7.0", + "mitt": "^3.0.1", "tslib": "2.8.1", "npm-run-all2": "^7.0.2", "prettier": "3.5.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 26bc966..8a14463 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -114,6 +114,9 @@ importers: camera-controls: specifier: 2.10.1 version: 2.10.1(three@0.176.0) + mitt: + specifier: ^3.0.0 + version: 3.0.1 npm-run-all2: specifier: ^7.0.2 version: 7.0.2 diff --git a/src/designer/Viewport.ts b/src/designer/Viewport.ts index cf8c274..9fcbb0b 100644 --- a/src/designer/Viewport.ts +++ b/src/designer/Viewport.ts @@ -9,8 +9,9 @@ import { reactive, watch } from 'vue' 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 '@/model/itemType/ItemTypeDefine.ts' +import { getAllItemTypes, type ItemTypeMeta } from '@/model/itemType/ItemTypeDefine.ts' import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts' +import EventBus from '@/runtime/EventBus' import type Toolbox from '@/model/itemType/Toolbox.ts' import { calcPositionUseSnap } from '@/model/ModelUtils.ts' @@ -77,10 +78,6 @@ export default class Viewport { this.worldModel = worldModel } - dispatchSignal(signal: string, data?: any) { - // console.log('signal', signal, data) - } - /** * 初始化 THREE 渲染器 */ @@ -473,6 +470,11 @@ export interface ViewportState { selectedObject: THREE.Object3D | null /** + * 选中的对象的元数据 + */ + selectedObjectMeta: ItemTypeMeta | null + + /** * 相机状态 */ camera: { diff --git a/src/designer/metaComponents/ColorItem.vue b/src/designer/metaComponents/ColorItem.vue new file mode 100644 index 0000000..1423a26 --- /dev/null +++ b/src/designer/metaComponents/ColorItem.vue @@ -0,0 +1,34 @@ + + \ No newline at end of file diff --git a/src/designer/metaComponents/IMetaProp.ts b/src/designer/metaComponents/IMetaProp.ts new file mode 100644 index 0000000..5edb9c0 --- /dev/null +++ b/src/designer/metaComponents/IMetaProp.ts @@ -0,0 +1,26 @@ +import * as THREE from 'three' +import { type ItemTypeMetaItem } from '@/model/itemType/ItemTypeDefine.ts' +import { defineComponent, type PropType } from 'vue' +import type Viewport from '@/designer/Viewport.ts' +import EventBus from '@/runtime/EventBus' + +export default defineComponent({ + props: { + prop: Object as PropType, + viewport: Object as PropType + }, + mounted() { + EventBus.$on('objectChanged', (data) => { + //@ts-ignore + if (typeof this.refreshValue === 'function') { + //@ts-ignore + this.refreshValue() + } + }) + }, + computed: { + object3D(): THREE.Object3D { + return this.viewport.state.selectedObject + } + } +}) \ No newline at end of file diff --git a/src/designer/metaComponents/NumberInput.vue b/src/designer/metaComponents/NumberInput.vue new file mode 100644 index 0000000..6c86fa8 --- /dev/null +++ b/src/designer/metaComponents/NumberInput.vue @@ -0,0 +1,32 @@ + + \ No newline at end of file diff --git a/src/designer/metaComponents/SwitchItem.vue b/src/designer/metaComponents/SwitchItem.vue new file mode 100644 index 0000000..f492386 --- /dev/null +++ b/src/designer/metaComponents/SwitchItem.vue @@ -0,0 +1,32 @@ + + \ No newline at end of file diff --git a/src/designer/metaComponents/TextInput.vue b/src/designer/metaComponents/TextInput.vue new file mode 100644 index 0000000..a0859ad --- /dev/null +++ b/src/designer/metaComponents/TextInput.vue @@ -0,0 +1,32 @@ + + \ No newline at end of file diff --git a/src/designer/metaComponents/Transform.vue b/src/designer/metaComponents/Transform.vue new file mode 100644 index 0000000..48ada00 --- /dev/null +++ b/src/designer/metaComponents/Transform.vue @@ -0,0 +1,210 @@ + + + \ No newline at end of file diff --git a/src/designer/metaComponents/UUIDItem.vue b/src/designer/metaComponents/UUIDItem.vue new file mode 100644 index 0000000..a0859ad --- /dev/null +++ b/src/designer/metaComponents/UUIDItem.vue @@ -0,0 +1,32 @@ + + \ No newline at end of file diff --git a/src/designer/model2DEditor/EsDragControls.ts b/src/designer/model2DEditor/EsDragControls.ts index a51fd69..fda5b80 100644 --- a/src/designer/model2DEditor/EsDragControls.ts +++ b/src/designer/model2DEditor/EsDragControls.ts @@ -5,6 +5,7 @@ import Constract from '@/designer/Constract.ts' import { getItemTypeByName } from '@/model/itemType/ItemTypeDefine.ts' import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts' import { markRaw } from 'vue' +import EventBus from '@/runtime/EventBus' // dragControls 绑定函数 let dragStartFn, dragFn, dragEndFn, clickblankFn @@ -95,7 +96,10 @@ export default class EsDragControls { // 拖拽中 drag(e) { - this.viewport.dispatchSignal('objectChanged', e.object) + EventBus.$emit('objectChanged', { + viewport: this, + object: e.object + }) } // 拖拽结束 diff --git a/src/designer/model2DEditor/tools/SelectInspect.ts b/src/designer/model2DEditor/tools/SelectInspect.ts index 36c93ec..0d1785c 100644 --- a/src/designer/model2DEditor/tools/SelectInspect.ts +++ b/src/designer/model2DEditor/tools/SelectInspect.ts @@ -5,6 +5,7 @@ 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' +import { getItemTypeByName } from '@/model/itemType/ItemTypeDefine.ts' let pdFn, pmFn, puFn @@ -63,38 +64,49 @@ export default class SelectInspect implements ITool { this.viewport.watchList.push(watch(() => this.viewport.state.selectedObject, (selectedObject) => { this.disposeSelectionBox() + this.viewport.state.selectedObjectMeta = null // 清除之前的元数据 - const expandAmount = 0.2 // 扩展包围盒的大小 - if (selectedObject !== null) { - // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb) - selectedObject.updateWorldMatrix(false, true) + if (selectedObject?.userData?.type) { + const type = selectedObject.userData.type + const itemTypeDefine = getItemTypeByName(type) + if (itemTypeDefine) { + this.viewport.state.selectedObjectMeta = itemTypeDefine.getMeta(selectedObject) - const box = new THREE.Box3().setFromObject(selectedObject) - box.expandByScalar(expandAmount) + const expandAmount = 0.2 // 扩展包围盒的大小 - const size = new THREE.Vector3() - box.getSize(size) + // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb) + selectedObject.updateWorldMatrix(false, true) - const center = new THREE.Vector3() - box.getCenter(center) + const box = new THREE.Box3().setFromObject(selectedObject) + box.expandByScalar(expandAmount) - // 创建包围盒几何体 - const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z) - const edgesGeometry = new THREE.EdgesGeometry(helperGeometry) + const size = new THREE.Vector3() + box.getSize(size) - // 使用 LineGeometry 包装 edgesGeometry - const lineGeom = new LineGeometry() - //@ts-ignore - lineGeom.setPositions(edgesGeometry.attributes.position.array) + const center = new THREE.Vector3() + box.getCenter(center) - const selectionBox = new Line2(lineGeom, this.material) - selectionBox.computeLineDistances() - selectionBox.position.copy(center) - selectionBox.name = 'selectionBox' - this.selectionBox = selectionBox + // 创建包围盒几何体 + const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z) + const edgesGeometry = new THREE.EdgesGeometry(helperGeometry) - this.viewport.scene.add(selectionBox) + // 使用 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) + + } } + + })) } diff --git a/src/designer/viewWidgets/property/PropertyView.vue b/src/designer/viewWidgets/property/PropertyView.vue index 0f08fe5..acac075 100644 --- a/src/designer/viewWidgets/property/PropertyView.vue +++ b/src/designer/viewWidgets/property/PropertyView.vue @@ -6,71 +6,75 @@ - +
- PropertyView1
- PropertyView2
- PropertyView3
- PropertyView4
- PropertyView5
- PropertyView6
- PropertyView7
- PropertyView8
- PropertyView9
- PropertyView10
- PropertyView11
- PropertyView12
- PropertyView13
- PropertyView14
- PropertyView15
- PropertyView16
- PropertyView17
- PropertyView18
- PropertyView19
- PropertyView20
- PropertyView21
- PropertyView22
- PropertyView23
- PropertyView24
- PropertyView25
- PropertyView26
- PropertyView27
- PropertyView28
- PropertyView29
- PropertyView30
- PropertyView31
- PropertyView32
- PropertyView33
- PropertyView34
- PropertyView35
- PropertyView36
- PropertyView37
- PropertyView38
- PropertyView39
- PropertyView40
+ + + +