18 changed files with 318 additions and 984 deletions
@ -1,319 +0,0 @@ |
|||||
import * as THREE from 'three' |
|
||||
import type Viewport from '@/core/engine/Viewport.ts' |
|
||||
import { getClosestObject } from '@/core/ModelUtils.ts' |
|
||||
import EventBus from '@/runtime/EventBus.ts' |
|
||||
import type { Object3DLike } from '@/types/ModelTypes.ts' |
|
||||
import InstancePointManager, { PointManageWrap } from '@/core/manager/InstancePointManager.ts' |
|
||||
import { LineManageWrap } from '@/core/manager/LineSegmentManager.ts' |
|
||||
|
|
||||
/** |
|
||||
* ThreeJS 拖拽管理器（仅限 X/Z 平面） |
|
||||
*/ |
|
||||
export default class DragControl { |
|
||||
private viewport: Viewport |
|
||||
private _is_enabled: boolean = true |
|
||||
private domElement: HTMLElement |
|
||||
private isPointerDown: boolean = false |
|
||||
private dragStartMouse: THREE.Vector2 = new THREE.Vector2() |
|
||||
private checkStateInterval: number | null = null |
|
||||
private dragShadowsGroup: THREE.Group | null = null |
|
||||
private dragDelayTimeout: number | null = null |
|
||||
|
|
||||
|
|
||||
private static readonly SHADOW_MATERIAL = new THREE.MeshBasicMaterial({ |
|
||||
color: 0x222222, |
|
||||
transparent: true, |
|
||||
opacity: 0.5, |
|
||||
depthWrite: false, |
|
||||
side: THREE.DoubleSide |
|
||||
}) |
|
||||
|
|
||||
public isDragging: boolean = false |
|
||||
|
|
||||
init(viewport: Viewport): void { |
|
||||
this.viewport = viewport |
|
||||
const domElement = this.viewport.renderer.domElement |
|
||||
this.domElement = domElement |
|
||||
|
|
||||
domElement.addEventListener('pointerdown', this.onPointerDown) |
|
||||
domElement.addEventListener('pointermove', this.onPointerMove) |
|
||||
domElement.addEventListener('pointerup', this.onPointerUp) |
|
||||
domElement.addEventListener('pointerleave', this.onPointerLeave) |
|
||||
|
|
||||
domElement.style.cursor = 'auto' |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 卸载资源 |
|
||||
*/ |
|
||||
dispose(): void { |
|
||||
if (this.domElement) { |
|
||||
this.domElement.removeEventListener('pointermove', this.onPointerMove) |
|
||||
this.domElement.removeEventListener('pointerdown', this.onPointerDown) |
|
||||
this.domElement.removeEventListener('pointerup', this.onPointerUp) |
|
||||
this.domElement.removeEventListener('pointerleave', this.onPointerLeave) |
|
||||
} |
|
||||
|
|
||||
this.cleanupDrag() |
|
||||
this.viewport = null |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* pointerdown 事件处理 |
|
||||
*/ |
|
||||
private onPointerDown = (event: PointerEvent): void => { |
|
||||
if (!this.enabled) return |
|
||||
|
|
||||
const mouse = this.getMousePosition(event.clientX, event.clientY) |
|
||||
const intersected = this.getIntersectedDraggableObject(mouse) |
|
||||
|
|
||||
if (!intersected) return |
|
||||
|
|
||||
this.viewport.controls.enabled = false |
|
||||
|
|
||||
// 设置定时器：0.1秒后才抓取拖拽
|
|
||||
this.dragDelayTimeout = window.setTimeout(() => { |
|
||||
this.isPointerDown = true |
|
||||
this.dragStartMouse.set(intersected.position.x, intersected.position.z) |
|
||||
|
|
||||
let selectedObjects = [intersected] |
|
||||
const multiSelected = this.viewport.state.multiSelectedObjects |
|
||||
if (multiSelected.length > 0 && multiSelected.includes(intersected)) { |
|
||||
selectedObjects = multiSelected |
|
||||
} |
|
||||
|
|
||||
this.createShadows(selectedObjects) |
|
||||
this.domElement.style.cursor = 'grabbing' |
|
||||
this.checkStateInterval = setInterval(() => { |
|
||||
if (isNaN(CurrentMouseInfo.x) || isNaN(CurrentMouseInfo.z) || !this.isPointerDown) { |
|
||||
this.cancelDrag() |
|
||||
} |
|
||||
}, 100) // 每100毫秒检查一次状态, 鼠标移出要主动清理
|
|
||||
|
|
||||
}, 100) // 0.1秒延迟抓取
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* pointermove 事件处理 |
|
||||
*/ |
|
||||
private onPointerMove = (event: PointerEvent): void => { |
|
||||
if (!this.enabled || !this.domElement) return |
|
||||
|
|
||||
if (!isNaN(this.dragStartMouse.x) && !isNaN(this.dragStartMouse.y) && this.dragShadowsGroup) { |
|
||||
this.isDragging = true |
|
||||
this.domElement.style.cursor = 'grabbing' |
|
||||
this.updateShadows(new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z)) |
|
||||
|
|
||||
} else { |
|
||||
// 射线方法修改 ==========================
|
|
||||
const mouse = this.getMousePosition(event.clientX, event.clientY) |
|
||||
const intersected = this.getIntersectedDraggableObject(mouse) |
|
||||
// =====================================
|
|
||||
// const ids = this.viewport.itemFindManager.getItemsByPosition(CurrentMouseInfo.x, CurrentMouseInfo.z)
|
|
||||
this.domElement.style.cursor = intersected ? 'grab' : 'auto' |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* pointerup 事件处理 |
|
||||
*/ |
|
||||
private onPointerUp = (event: PointerEvent): void => { |
|
||||
if (this.isDragging) { |
|
||||
const startPos = this.dragStartMouse.clone() |
|
||||
const targetPos = new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z) |
|
||||
|
|
||||
if (startPos && targetPos && !_.isNaN(startPos.x) && !_.isNaN(startPos.y)) { |
|
||||
this.dragComplete(startPos, targetPos) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
this.cleanupDrag() |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 清理拖拽状态 |
|
||||
*/ |
|
||||
private cleanupDrag(): void { |
|
||||
if (this.domElement) { |
|
||||
this.domElement.style.cursor = 'auto' |
|
||||
} |
|
||||
|
|
||||
this.isDragging = false |
|
||||
this.isPointerDown = false |
|
||||
this.dragStartMouse.set(NaN, NaN) |
|
||||
|
|
||||
this.removeShadows() |
|
||||
|
|
||||
if (this.viewport) { |
|
||||
this.viewport.controls.enabled = true |
|
||||
} |
|
||||
|
|
||||
if (this.dragDelayTimeout !== null) { |
|
||||
clearTimeout(this.dragDelayTimeout) |
|
||||
this.dragDelayTimeout = null |
|
||||
} |
|
||||
|
|
||||
if (this.checkStateInterval) { |
|
||||
clearInterval(this.checkStateInterval) |
|
||||
this.checkStateInterval = null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 获取当前鼠标坐标（归一化设备坐标） |
|
||||
*/ |
|
||||
private getMousePosition(clientX: number, clientY: number): THREE.Vector2 { |
|
||||
const rect = this.domElement.getBoundingClientRect() |
|
||||
return new THREE.Vector2( |
|
||||
((clientX - rect.left) / rect.width) * 2 - 1, |
|
||||
((clientY - rect.top) / rect.height) * -2 + 1 |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 射线检测，返回第一个可拖拽对象 |
|
||||
*/ |
|
||||
private getIntersectedDraggableObject(mouse: THREE.Vector2): Object3DLike | undefined { |
|
||||
const raycaster = new THREE.Raycaster() |
|
||||
raycaster.setFromCamera(mouse, this.viewport.camera) |
|
||||
|
|
||||
const draggableObjects = this.viewport.entityManager._draggableObjects || [] |
|
||||
const intersects = raycaster.intersectObjects(draggableObjects, true) |
|
||||
|
|
||||
if (intersects.length > 0) { |
|
||||
return getClosestObject(this.viewport, intersects[0].object, intersects[0].instanceId) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 创建拖拽阴影 |
|
||||
*/ |
|
||||
private createShadows(objects: Object3DLike[]): void { |
|
||||
this.removeShadows() |
|
||||
|
|
||||
this.dragShadowsGroup = new THREE.Group() |
|
||||
for (const obj of objects) { |
|
||||
if (_.isNil(_.get(obj, 'userData.entityId'))) { |
|
||||
console.error(`Object ${obj.name} missing entityId`) |
|
||||
continue |
|
||||
} |
|
||||
|
|
||||
// 克隆对象的几何体和材质
|
|
||||
// const shadowBox = obj.clone()
|
|
||||
let box: THREE.Box3 |
|
||||
if (obj instanceof THREE.Object3D) { |
|
||||
box = new THREE.Box3().setFromObject(obj) |
|
||||
} else if (obj instanceof PointManageWrap) { |
|
||||
box = obj.createBox3() |
|
||||
} |
|
||||
const size = new THREE.Vector3() |
|
||||
box.getSize(size) |
|
||||
const geometry = new THREE.PlaneGeometry(size.x, size.z) |
|
||||
const shadowBox = new THREE.Mesh(geometry, DragControl.SHADOW_MATERIAL) |
|
||||
shadowBox.position.copy(obj.position) |
|
||||
shadowBox.rotation.x = -Math.PI / 2 |
|
||||
|
|
||||
shadowBox.userData = { |
|
||||
isShadow: true, |
|
||||
entityId: obj.userData.entityId, |
|
||||
originPosition: obj.position.clone() // 保存原始位置
|
|
||||
} |
|
||||
this.dragShadowsGroup.add(shadowBox) |
|
||||
} |
|
||||
this.viewport.scene.add(this.dragShadowsGroup) |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 移除阴影 |
|
||||
*/ |
|
||||
private removeShadows(): void { |
|
||||
if (this.dragShadowsGroup) { |
|
||||
console.log('removeShadows') |
|
||||
this.viewport.scene.remove(this.dragShadowsGroup) |
|
||||
this.dragShadowsGroup = null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 更新阴影位置（仅 X/Z 平面） |
|
||||
*/ |
|
||||
private updateShadows(newPosition: THREE.Vector2): void { |
|
||||
if (!this.dragShadowsGroup) return |
|
||||
|
|
||||
// 计算新位置与拖拽开始位置的偏移量
|
|
||||
const offsetX = newPosition.x - this.dragStartMouse.x |
|
||||
const offsetZ = newPosition.y - this.dragStartMouse.y |
|
||||
|
|
||||
for (let i = 0; i < this.dragShadowsGroup.children.length; i++) { |
|
||||
const shadow = this.dragShadowsGroup.children[i] as THREE.Mesh |
|
||||
if (!shadow.userData.originPosition) { |
|
||||
console.error(`Shadow ${shadow.name} does not have originPosition`) |
|
||||
continue |
|
||||
} |
|
||||
|
|
||||
const newPosX = shadow.userData.originPosition.x + offsetX |
|
||||
const newPosZ = shadow.userData.originPosition.z + offsetZ |
|
||||
shadow.position.set(newPosX, shadow.userData.originPosition.y, newPosZ) // 锁定 Y 轴高度
|
|
||||
// console.log(`Updating shadow ${shadow.name} position with offset:`, offsetX, offsetZ)
|
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private dragComplete = (startPos: THREE.Vector2, targetPos: THREE.Vector2): void => { |
|
||||
// console.log(`Drag completed from ${startPos.toArray()} to ${targetPos.toArray()}`)
|
|
||||
|
|
||||
this.viewport.stateManager.update(({ getEntity, putEntity, deleteEntity, addEntity }) => { |
|
||||
for (const object of this.dragShadowsGroup.children) { |
|
||||
const entityId = object.userData.entityId |
|
||||
if (entityId) { |
|
||||
const entity = getEntity(entityId) |
|
||||
// 更新实体位置
|
|
||||
entity.tf[0][0] = object.position.x |
|
||||
entity.tf[0][2] = object.position.z |
|
||||
putEntity(entity) |
|
||||
|
|
||||
} else { |
|
||||
system.showErrorDialog('not found entity') |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// EventBus.dispatch('multiSelectedObjectsChanged', {
|
|
||||
// multiSelectedObjects: this.viewport.state.multiSelectedObjects
|
|
||||
// })
|
|
||||
// EventBus.dispatch('selectedObjectPropertyChanged', {})
|
|
||||
|
|
||||
this.cleanupDrag() |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* pointerleave 事件处理 |
|
||||
*/ |
|
||||
private onPointerLeave = (_event: PointerEvent): void => { |
|
||||
this.cancelDrag() |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* 取消当前拖拽状态 |
|
||||
*/ |
|
||||
cancelDrag(): void { |
|
||||
this.cleanupDrag() |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/** |
|
||||
* 设置启用/禁用 |
|
||||
*/ |
|
||||
public set enabled(value: boolean) { |
|
||||
this._is_enabled = value |
|
||||
if (!value) { |
|
||||
this.cleanupDrag() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public get enabled(): boolean { |
|
||||
return this._is_enabled |
|
||||
} |
|
||||
} |
|
||||
@ -1,83 +0,0 @@ |
|||||
import type Viewport from '@/core/engine/Viewport' |
|
||||
import * as THREE from 'three' |
|
||||
|
|
||||
let pmFn, otFn, lvFn |
|
||||
|
|
||||
/** |
|
||||
* 鼠标移动时，将鼠标位置的坐标转换为设计图上的坐标，并设置到 designer.mousePos 属性中 |
|
||||
*/ |
|
||||
export default class MouseMoveInspect { |
|
||||
viewport: Viewport |
|
||||
canvas: HTMLCanvasElement |
|
||||
|
|
||||
constructor() { |
|
||||
} |
|
||||
|
|
||||
init(viewport: Viewport) { |
|
||||
this.viewport = viewport |
|
||||
this.canvas = this.viewport.renderer.domElement as HTMLCanvasElement |
|
||||
|
|
||||
pmFn = this.mouseMove.bind(this) |
|
||||
otFn = this.mouseLv.bind(this) |
|
||||
lvFn = this.mouseLv.bind(this) |
|
||||
this.canvas.addEventListener('pointermove', pmFn) |
|
||||
this.canvas.addEventListener('pointerout', otFn) |
|
||||
this.canvas.addEventListener('mouseleave', lvFn) |
|
||||
} |
|
||||
|
|
||||
dispose() { |
|
||||
this.canvas.removeEventListener('pointermove', pmFn) |
|
||||
pmFn = undefined |
|
||||
this.canvas.removeEventListener('pointerout', otFn) |
|
||||
otFn = undefined |
|
||||
this.canvas.removeEventListener('mouseleave', lvFn) |
|
||||
lvFn = undefined |
|
||||
} |
|
||||
|
|
||||
mouseLv(event: MouseEvent) { |
|
||||
this.viewport.state.mouse.x = NaN |
|
||||
this.viewport.state.mouse.z = NaN |
|
||||
window['CurrentMouseInfo'] = { |
|
||||
x: NaN, |
|
||||
z: NaN, |
|
||||
isShiftKey: false, |
|
||||
isCtrlKey: false, |
|
||||
isAltKey: false, |
|
||||
isMetaKey: false |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
mouseMove = _.throttle(function(this: MouseMoveInspect, event: MouseEvent) { |
|
||||
|
|
||||
const pointv = new THREE.Vector2() |
|
||||
pointv.x = event.offsetX / this.viewport.renderer.domElement.offsetWidth |
|
||||
pointv.y = event.offsetY / this.viewport.renderer.domElement.offsetHeight |
|
||||
|
|
||||
const mouse = new THREE.Vector2() |
|
||||
mouse.set((pointv.x * 2) - 1, -(pointv.y * 2) + 1) |
|
||||
|
|
||||
// 当前鼠标所在的点
|
|
||||
const point = this.viewport.getClosestIntersection(event) |
|
||||
if (!point) { |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
this.viewport.state.mouse.x = point.x |
|
||||
this.viewport.state.mouse.z = point.z |
|
||||
|
|
||||
window['CurrentMouseInfo'] = { |
|
||||
viewport: this.viewport, |
|
||||
x: point.x, |
|
||||
z: point.z, |
|
||||
isShiftKey: event.shiftKey, |
|
||||
isCtrlKey: event.ctrlKey, |
|
||||
isAltKey: event.altKey, |
|
||||
isMetaKey: event.metaKey, |
|
||||
mouse: mouse |
|
||||
} |
|
||||
|
|
||||
}, 1) |
|
||||
|
|
||||
animate(): void { |
|
||||
} |
|
||||
} |
|
||||
@ -1,441 +0,0 @@ |
|||||
import * as THREE from 'three' |
|
||||
import type Viewport from '@/core/engine/Viewport' |
|
||||
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 EventBus from '@/runtime/EventBus' |
|
||||
import { markRaw } from 'vue' |
|
||||
import { getSetter } from '@/core/manager/ModuleManager.ts' |
|
||||
import Constract from '@/core/Constract.ts' |
|
||||
import type { Object3DLike } from '@/types/ModelTypes.ts' |
|
||||
import { PointManageWrap } from '@/core/manager/InstancePointManager.ts' |
|
||||
import { getAABBox, getOBBox } from '@/core/ModelUtils.ts' |
|
||||
|
|
||||
/** |
|
||||
* 选择工具，用于在设计器中显示选中对象的包围盒 |
|
||||
*/ |
|
||||
export default class SelectInspect { |
|
||||
viewport: Viewport |
|
||||
/** |
|
||||
* 线框材质，用于显示选中对象的包围盒 |
|
||||
*/ |
|
||||
yellowMaterial: LineMaterial = new LineMaterial({ color: 0xffff00, linewidth: 3 }) |
|
||||
|
|
||||
/** |
|
||||
* 线框材质，用于显示选中对象的包围盒 |
|
||||
*/ |
|
||||
redMaterial: LineMaterial = new LineMaterial({ color: 0xff0000, linewidth: 3 }) |
|
||||
|
|
||||
/** |
|
||||
* 矩形材质，用于显示鼠标拖拽选择的矩形区域 |
|
||||
*/ |
|
||||
rectMaterial: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ |
|
||||
color: 0x000000, |
|
||||
opacity: 0.3, |
|
||||
transparent: true |
|
||||
}) |
|
||||
|
|
||||
/** |
|
||||
* 当前选中对象的矩形选择框 |
|
||||
*/ |
|
||||
rectangle: THREE.Mesh | null = null |
|
||||
|
|
||||
/** |
|
||||
* 当前选中对象的包围盒线框 |
|
||||
*/ |
|
||||
selectionBox: Line2 |
|
||||
|
|
||||
/** |
|
||||
* 当前鼠标所在的画布, 对应 viewport.renderer.domElement |
|
||||
*/ |
|
||||
canvas: HTMLCanvasElement |
|
||||
|
|
||||
/** |
|
||||
* 鼠标按下时记录的起始位置，用于绘制矩形选择框 |
|
||||
*/ |
|
||||
recStartPos: THREE.Vector3 | null |
|
||||
|
|
||||
/** |
|
||||
* 当前黄选的实体 ID |
|
||||
*/ |
|
||||
selectionId: string |
|
||||
|
|
||||
clickTime: number | null = null |
|
||||
|
|
||||
constructor() { |
|
||||
} |
|
||||
|
|
||||
init(viewport: Viewport) { |
|
||||
this.viewport = viewport |
|
||||
this.canvas = this.viewport.renderer.domElement as HTMLCanvasElement |
|
||||
|
|
||||
// 监听 shift 按住之后的矩形
|
|
||||
this.canvas.addEventListener('pointerdown', this.onMouseDown) |
|
||||
this.canvas.addEventListener('pointermove', this.onMouseMove) |
|
||||
this.canvas.addEventListener('pointerup', this.onMouseUp) |
|
||||
|
|
||||
EventBus.on('selectedObjectChanged', this.updateSelectionBox) |
|
||||
EventBus.on('multiSelectedObjectsChanged', this.updateMultiSelectionBoxes) |
|
||||
EventBus.on('selectedObjectPropertyChanged', this.updateSelectionBox) |
|
||||
// EventBus.on('multiselectedObjectChanged', this.updateMultiSelectionBoxes)
|
|
||||
} |
|
||||
|
|
||||
redSelectionGroup = new THREE.Group() |
|
||||
|
|
||||
updateMultiSelectionBoxes = () => { |
|
||||
const multiSelectedObjects = this.viewport.state.multiSelectedObjects |
|
||||
// 为所有多选对象创建包围盒线框
|
|
||||
this.clearRedSelectionBoxes() |
|
||||
|
|
||||
if (!multiSelectedObjects || multiSelectedObjects.length === 0) { |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
for (const object of multiSelectedObjects) { |
|
||||
if (object.userData.entityId) { |
|
||||
this.createRedSelectionBox(object) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 取消红选
|
|
||||
cancelMultiSelect() { |
|
||||
this.viewport.state.multiSelectedObjects = [] |
|
||||
this.viewport.state.multiSelectedItems = [] |
|
||||
this.viewport.state.multiSelectedEntityIds = [] |
|
||||
EventBus.dispatch('multiSelectedObjectsChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
multiSelectedObjects: [], |
|
||||
multiSelectedItems: [], |
|
||||
multiSelectedEntityIds: [] |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 取消黄选
|
|
||||
cancelSelect() { |
|
||||
this.viewport.state.selectedObject = null |
|
||||
this.viewport.state.selectedItem = null |
|
||||
this.viewport.state.selectedEntityId = null |
|
||||
this.viewport.state.selectedObjectSetter = null |
|
||||
EventBus.dispatch('selectedObjectChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
selectedObject: null, |
|
||||
selectedItem: null, |
|
||||
selectedEntityId: null, |
|
||||
selectedObjectSetter: null |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 根据 entityId 选择对象
|
|
||||
selectById(entityId: string | null) { |
|
||||
if (!entityId) { |
|
||||
this.viewport.state.selectedObject = null |
|
||||
this.viewport.state.selectedItem = null |
|
||||
this.viewport.state.selectedEntityId = null |
|
||||
this.viewport.state.selectedObjectSetter = null |
|
||||
EventBus.dispatch('selectedObjectChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
selectedObject: null, |
|
||||
selectedItem: null, |
|
||||
selectedEntityId: null, |
|
||||
selectedObjectSetter: null |
|
||||
}) |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
const item = this.viewport.entityManager.findItemById(entityId) |
|
||||
const object = this.viewport.entityManager.findObjectById(entityId) |
|
||||
const itemTypeName = item.t |
|
||||
if (item.dt.protected !== true) { |
|
||||
this.viewport.state.selectedObject = markRaw(object) |
|
||||
this.viewport.state.selectedItem = markRaw(item) |
|
||||
this.viewport.state.selectedEntityId = entityId |
|
||||
this.viewport.state.selectedObjectSetter = getSetter(itemTypeName) |
|
||||
EventBus.dispatch('selectedObjectChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
selectedObject: this.viewport.state.selectedObject, |
|
||||
selectedItem: this.viewport.state.selectedItem, |
|
||||
selectedEntityId: this.viewport.state.selectedEntityId, |
|
||||
selectedObjectSetter: this.viewport.state.selectedObjectSetter |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 多选对象
|
|
||||
multiSelectByIds(entityIds: string[]) { |
|
||||
// 遍历找到的对象，添加到多选对象中
|
|
||||
const multiSelectedObjects = [] |
|
||||
const multiSelectedItems = [] |
|
||||
const multiSelectedEntityIds = [] |
|
||||
for (const entityId of entityIds) { |
|
||||
const object = this.viewport.entityManager.findObjectById(entityId) |
|
||||
if (object.userData.entityId && object.userData.t) { |
|
||||
const item = this.viewport.entityManager.findItemById(object.userData.entityId) |
|
||||
if (item && item.dt.protected !== true) { |
|
||||
multiSelectedObjects.push(object) |
|
||||
multiSelectedItems.push(item) |
|
||||
multiSelectedEntityIds.push(object.userData.entityId) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
this.viewport.state.multiSelectedObjects = markRaw(multiSelectedObjects) |
|
||||
this.viewport.state.multiSelectedItems = markRaw(multiSelectedItems) |
|
||||
this.viewport.state.multiSelectedEntityIds = multiSelectedEntityIds |
|
||||
EventBus.dispatch('multiSelectedObjectsChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
multiSelectedObjects: this.viewport.state.multiSelectedObjects, |
|
||||
multiSelectedItems: this.viewport.state.multiSelectedItems, |
|
||||
multiSelectedEntityIds: this.viewport.state.multiSelectedEntityIds |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 清除之前的红色包围盒线框
|
|
||||
private clearRedSelectionBoxes() { |
|
||||
if (this.redSelectionGroup.children.length > 0) { |
|
||||
for (const child of this.redSelectionGroup.children) { |
|
||||
this.redSelectionGroup.remove(child) |
|
||||
} |
|
||||
} |
|
||||
this.viewport.scene.remove(this.redSelectionGroup) |
|
||||
this.redSelectionGroup = new THREE.Group() |
|
||||
this.viewport.scene.add(this.redSelectionGroup) |
|
||||
} |
|
||||
|
|
||||
// 创建红选包围盒
|
|
||||
private createRedSelectionBox(object: Object3DLike) { |
|
||||
// 如果对象没有 entityId，则不创建包围盒线框
|
|
||||
if (!object.userData.entityId) { |
|
||||
return |
|
||||
} |
|
||||
let box: THREE.Box3 |
|
||||
if (object instanceof PointManageWrap) { |
|
||||
box = object.createBox3() |
|
||||
|
|
||||
} else if (object instanceof THREE.Object3D) { |
|
||||
box = new THREE.Box3().setFromObject(object) |
|
||||
} |
|
||||
|
|
||||
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 lineGeom = new LineGeometry() |
|
||||
const vertices = new Float32Array(positions) |
|
||||
lineGeom.setPositions(vertices) |
|
||||
|
|
||||
const selectionBox = new Line2(lineGeom, this.redMaterial) |
|
||||
selectionBox.computeLineDistances() |
|
||||
|
|
||||
this.redSelectionGroup.add(selectionBox) |
|
||||
} |
|
||||
|
|
||||
// 更新选中对象的包围盒线框
|
|
||||
private updateSelectionBox = () => { |
|
||||
this.clearSelectionBox() |
|
||||
|
|
||||
const item = this.viewport.state.selectedItem |
|
||||
if (!item) { |
|
||||
return |
|
||||
} |
|
||||
|
|
||||
// 构造 positions 数组
|
|
||||
const edgePositions = getOBBox(item) // getOBBox(item) // getAABBox(item)
|
|
||||
const positions = [] |
|
||||
for (let i = 0; i < edgePositions.length; i += 2) { |
|
||||
const p1 = edgePositions[i] |
|
||||
const p2 = edgePositions[i + 1] |
|
||||
positions.push(p1.x, p1.y, p1.z) |
|
||||
positions.push(p2.x, p2.y, p2.z) |
|
||||
} |
|
||||
|
|
||||
const lineGeom = new LineGeometry().setPositions(new Float32Array(positions)) |
|
||||
const selectionBox = new Line2(lineGeom, this.yellowMaterial) |
|
||||
selectionBox.computeLineDistances() |
|
||||
selectionBox.scale.set(1, 1, 1) |
|
||||
this.selectionBox = selectionBox |
|
||||
|
|
||||
console.log('selectedItem', this.viewport.state.selectedItem) |
|
||||
|
|
||||
this.viewport.scene.add(selectionBox) |
|
||||
} |
|
||||
|
|
||||
dispose() { |
|
||||
this.canvas.removeEventListener('pointerdown', this.onMouseDown) |
|
||||
this.canvas.removeEventListener('pointermove', this.onMouseMove) |
|
||||
this.canvas.removeEventListener('pointerup', this.onMouseUp) |
|
||||
|
|
||||
// 销毁选择工具
|
|
||||
this.clearSelectionBox() |
|
||||
this.disposeRect() |
|
||||
this.clearRedSelectionBoxes() |
|
||||
} |
|
||||
|
|
||||
// 清除当前选中对象的包围盒线框
|
|
||||
private clearSelectionBox = () => { |
|
||||
if (this.selectionBox) { |
|
||||
this.viewport.scene.remove(this.selectionBox) |
|
||||
this.selectionBox.geometry.dispose() |
|
||||
this.selectionBox = null |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private createRectangle = () => { |
|
||||
if (this.rectangle !== null) { |
|
||||
this.disposeRect() |
|
||||
} |
|
||||
if (this.recStartPos) { |
|
||||
// 创建矩形
|
|
||||
this.rectangle = new THREE.Mesh( |
|
||||
new THREE.PlaneGeometry(0.001, 0.001), |
|
||||
this.rectMaterial |
|
||||
) |
|
||||
this.rectangle.name = 'selectRectangle' |
|
||||
this.rectangle.rotation.x = -Math.PI / 2 // 关键！让平面正对相机
|
|
||||
this.rectangle.position.set( |
|
||||
this.recStartPos.x, |
|
||||
this.recStartPos.y, |
|
||||
this.recStartPos.z |
|
||||
) |
|
||||
this.viewport.scene.add(this.rectangle) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private updateRectangle = (position: THREE.Vector3) => { |
|
||||
if (!this.rectangle || !this.recStartPos) return |
|
||||
// console.log('updateRectangle', this.recStartPos, position)
|
|
||||
|
|
||||
const width = position.x - this.recStartPos.x |
|
||||
const height = position.z - this.recStartPos.z |
|
||||
|
|
||||
const newWidth = Math.abs(width) |
|
||||
const newHeight = Math.abs(height) |
|
||||
|
|
||||
// 清理旧几何体
|
|
||||
this.rectangle.geometry.dispose() |
|
||||
this.rectangle.geometry = new THREE.PlaneGeometry(newWidth, newHeight) |
|
||||
this.rectangle.position.set( |
|
||||
this.recStartPos.x + width / 2, |
|
||||
this.recStartPos.y, |
|
||||
this.recStartPos.z + height / 2 |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
private onMouseDown = (event: MouseEvent) => { |
|
||||
if (event.shiftKey) { |
|
||||
// 记录鼠标按下位置
|
|
||||
this.recStartPos = this.viewport.getClosestIntersection(event) |
|
||||
this.createRectangle() |
|
||||
this.viewport.controls.enabled = false // 禁用控制器
|
|
||||
|
|
||||
} else { |
|
||||
// 为 click 事件添加处理逻辑
|
|
||||
this.clickTime = Date.now() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
private onMouseMove = (event: MouseEvent) => { |
|
||||
if (!this.recStartPos) { |
|
||||
this.disposeRect() |
|
||||
} |
|
||||
// 更新矩形大小或重新生成矩形
|
|
||||
const position = this.viewport.getClosestIntersection(event) |
|
||||
if (!position) return |
|
||||
this.updateRectangle(position) |
|
||||
} |
|
||||
|
|
||||
private onMouseUp = (event: MouseEvent) => { |
|
||||
this.disposeRect() |
|
||||
const clickTime = this.clickTime |
|
||||
this.clickTime = null |
|
||||
if (Date.now() - clickTime < 200) { |
|
||||
// 如果是点击事件，触发选中逻辑
|
|
||||
const objects: Object3DLike[] = this.viewport.entityManager.getObjectByCanvasMouse(event) |
|
||||
if (objects.length > 0 && objects[0]?.userData?.entityId && objects[0]?.userData?.createType !== 'line') { |
|
||||
console.log('mouseClick', objects) |
|
||||
const object = objects[0] |
|
||||
this.selectById(object.userData.entityId) |
|
||||
|
|
||||
} else { |
|
||||
// 如果没有选中任何对象，清除选中状态
|
|
||||
this.selectById(null) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
private disposeRect = () => { |
|
||||
if (this.rectangle !== null) { |
|
||||
// 查找在这个矩形内的所有有效业务对象，并将他们添加进 viewport.state.multiSelectedObjects
|
|
||||
this.calcRectangleObjectToState() |
|
||||
this.viewport.scene.remove(this.rectangle) |
|
||||
this.rectangle.geometry.dispose() |
|
||||
this.rectangle = null |
|
||||
} |
|
||||
this.recStartPos = null |
|
||||
this.viewport.controls.enabled = true // 启用控制器
|
|
||||
} |
|
||||
|
|
||||
private calcRectangleObjectToState = () => { |
|
||||
if (!this.rectangle || !this.recStartPos) return |
|
||||
|
|
||||
// 获取矩形的包围盒
|
|
||||
const box = new THREE.Box3().setFromObject(this.rectangle) |
|
||||
|
|
||||
// 获取盒子的 startX, startZ, endX, endZ
|
|
||||
const startX = box.min.x |
|
||||
const startZ = box.min.z |
|
||||
const endX = box.max.x |
|
||||
const endZ = box.max.z |
|
||||
|
|
||||
// 查找所有在矩形内的对象
|
|
||||
const ids = this.viewport.itemFindManager.getItemsByRect(startX, startZ, endX, endZ) |
|
||||
|
|
||||
// 清空之前的多选对象
|
|
||||
this.viewport.state.multiSelectedObjects = [] |
|
||||
|
|
||||
// 遍历找到的对象，添加到多选对象中
|
|
||||
const multiSelectedObjects = [] |
|
||||
const multiSelectedItems = [] |
|
||||
const multiSelectedEntityIds = [] |
|
||||
for (const id of ids) { |
|
||||
const object = this.viewport.entityManager.findObjectById(id) |
|
||||
if (object.userData.entityId && object.userData.t) { |
|
||||
const item = this.viewport.entityManager.findItemById(object.userData.entityId) |
|
||||
if (item && item.dt.protected !== true) { |
|
||||
multiSelectedObjects.push(object) |
|
||||
multiSelectedItems.push(item) |
|
||||
multiSelectedEntityIds.push(id) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 触发多选对象更新事件
|
|
||||
this.viewport.state.multiSelectedObjects = markRaw(multiSelectedObjects) |
|
||||
this.viewport.state.multiSelectedItems = markRaw(multiSelectedItems) |
|
||||
this.viewport.state.multiSelectedEntityIds = multiSelectedEntityIds |
|
||||
EventBus.dispatch('multiSelectedObjectsChanged', { |
|
||||
viewport: markRaw(this.viewport), |
|
||||
multiSelectedObjects: this.viewport.state.multiSelectedObjects, |
|
||||
multiSelectedItems: this.viewport.state.multiSelectedItems, |
|
||||
multiSelectedEntityIds: this.viewport.state.multiSelectedEntityIds |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,5 +1,26 @@ |
|||||
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
||||
|
import Constract from '@/core/Constract.ts' |
||||
|
import * as THREE from 'three' |
||||
|
|
||||
export default class PalletEntity extends BaseEntity { |
export default class CartonSetting extends BaseEntity { |
||||
|
/** |
||||
|
* 默认高度 |
||||
|
*/ |
||||
|
defulePositionY: number = Constract.HEIGHT_WAY |
||||
|
|
||||
|
/** |
||||
|
* 默认缩放 |
||||
|
*/ |
||||
|
defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1) |
||||
|
|
||||
|
/** |
||||
|
* 默认旋转角度 |
||||
|
*/ |
||||
|
defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0) |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 默认颜色 |
||||
|
*/ |
||||
|
defaultColor: THREE.Color = new THREE.Color(0xc29a70) |
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue