import * as THREE from 'three' import type Viewport from '@/core/engine/Viewport.ts' import { drawShadowBox, getClosestObject } from '@/core/ModelUtils.ts' import type { Object3DLike } from '@/types/ModelTypes.ts' import Constract from '@/core/Constract.ts' import InstanceMeshManager, { MeshWrap } from '@/core/manager/InstanceMeshManager.ts' /** * ThreeJS 拖拽管理器(仅限 X/Z 平面) */ export default class DragManager { private viewport: Viewport private _is_enabled: boolean = true private domElement: HTMLElement private isPointerDown: boolean = false private dragStartMouse: THREE.Vector2 = new THREE.Vector2() private dragShadows: MeshWrap[] = [] private checkStateInterval: number | null = null private dragDelayTimeout: number | null = null private readonly SHADOW_GEOMETRY = new THREE.BoxGeometry(1, 1, 1) private 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 if (event.button !== 0) 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毫秒检查一次状态, 鼠标移出要主动清理 }, Constract.MOUSE_CLICK_DELAY) // 0.1秒延迟抓取 } /** * pointermove 事件处理 */ private onPointerMove = (event: PointerEvent): void => { if (!this.enabled || !this.domElement) return if (!isNaN(this.dragStartMouse.x) && !isNaN(this.dragStartMouse.y)) { 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 ? 'pointer' : 'auto' } } /** * pointerup 事件处理 */ private onPointerUp = (event: PointerEvent): void => { if (!this.enabled || !this.domElement) return if (event.button !== 0) return 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() const dragShadows = [] for (const obj of objects) { const entityId = _.get(obj, 'userData.entityId') if (_.isNil(entityId)) { console.error(`Object ${obj.name} missing entityId`) continue } const item = this.viewport.stateManager.findItemById(entityId) if (!item) { console.error(`Item with entityId ${entityId} not found in stateManager`) continue } const wrap = drawShadowBox(item.id, this.shadowBoxManager, item, { isShadow: true, entityId: obj.userData.entityId, originPosition: obj.position.clone() // 保存原始位置 }) dragShadows.push(wrap) // 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, DragManager.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.dragShadows = dragShadows } get shadowBoxManager(): InstanceMeshManager { const name = 'shadowBoxManager' return this.viewport.getOrCreateMeshManager(name, () => new InstanceMeshManager(name, this.viewport, this.SHADOW_GEOMETRY, this.SHADOW_MATERIAL, false, false, 50) ) } /** * 移除阴影 */ private removeShadows(): void { this.shadowBoxManager.clear() this.dragShadows = null } /** * 更新阴影位置(仅 X/Z 平面) */ private updateShadows(newPosition: THREE.Vector2): void { if (!this.dragShadows) return // 计算新位置与拖拽开始位置的偏移量 const offsetX = newPosition.x - this.dragStartMouse.x const offsetZ = newPosition.y - this.dragStartMouse.y for (let i = 0; i < this.dragShadows.length; i++) { const shadow = this.dragShadows[i] if (!shadow.userData.originPosition) { console.error(`Shadow ${shadow.name} does not have originPosition`) continue } const newPosX = shadow.userData.originPosition.x + offsetX const newPosY = shadow.userData.originPosition.y const newPosZ = shadow.userData.originPosition.z + offsetZ shadow.applyMatrix4(new THREE.Matrix4().makeTranslation(newPosX, newPosY, newPosZ)) } } private dragComplete = (startPos: THREE.Vector2, targetPos: THREE.Vector2): void => { this.viewport.stateManager.update(({ getEntity, putEntity, deleteEntity, addEntity }) => { for (const object of this.dragShadows) { 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 } }