import * as THREE from 'three' import type Viewport from '@/core/engine/Viewport.ts' import type IControls from '@/core/controls/IControls.ts' import { Curve } from 'three' import { getClosestObject } from '@/core/ModelUtils.ts' import EventBus from '@/runtime/EventBus.ts' /** * DragControl2 - ThreeJS 拖拽管理器(仅限 X/Z 平面) */ export default class DragControl2 implements IControls { private viewport: Viewport private _is_enabled: boolean = true private domElement: HTMLElement public isDragging: boolean = false private isPointerDown: boolean = false private dragStartMouse: THREE.Vector2 = new THREE.Vector2() private dragShadows: THREE.Group | null = null init(viewport: Viewport): void { this.viewport = viewport const domElement = this.viewport.renderer.domElement domElement.addEventListener('pointermove', this.onPointerMove) domElement.addEventListener('pointerdown', this.onPointerDown) domElement.addEventListener('pointerup', this.onPointerUp) domElement.addEventListener('pointerleave', this.onPointerLeave) domElement.style.cursor = 'auto' this.domElement = domElement } /** * 设置启用/禁用 */ public set enabled(value: boolean) { this._is_enabled = value if (!value) { this.cleanupDrag() } } public get enabled(): boolean { return this._is_enabled } /** * 卸载资源 */ 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.domElement.style.cursor = 'auto' this.viewport = null } } /** * 清理拖拽状态 */ private cleanupDrag(): void { this.viewport.renderer.domElement.style.cursor = 'auto' this.isDragging = false this.isPointerDown = false this.dragStartMouse.set(NaN, NaN) this.removeShadows() } /** * 获取当前鼠标坐标(归一化设备坐标) */ private getMousePosition(clientX: number, clientY: number): THREE.Vector2 { const rect = this.viewport.renderer.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): THREE.Object3D | null { 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(intersects[0].object) } } /** * 创建拖拽阴影 */ private createShadows(objects: THREE.Object3D[]): void { this.removeShadows() console.log('createShadows', objects.map(obj => obj.name)) this.dragShadows = new THREE.Group() for (const obj of objects) { if (!obj.userData.entityId) { console.error('Object does not have entityId:', obj.name) continue // 跳过没有 entityId 的对象 } const shadow = obj.clone() shadow.userData = { isShadow: true, entityId: obj.userData.entityId, originPosition: obj.position.clone() // 保存原始位置 } this.dragShadows.add(shadow) } this.viewport.scene.add(this.dragShadows) } /** * 移除阴影 */ private removeShadows(): void { if (this.dragShadows) { this.viewport.scene.remove(this.dragShadows) 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 this.dragShadows.children.forEach((shadow, index) => { 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(`Updated shadow position for ${shadow.name}:`, shadow.position) }) } private dragComplete = (startPos: THREE.Vector2, targetPos: THREE.Vector2): void => { // console.log(`Drag completed from ${startPos.toArray()} to ${targetPos.toArray()}`) this.viewport.stateManager.beginStateUpdate() for (const object of this.dragShadows.children) { const entityId = object.userData.entityId if (entityId) { const entity = this.viewport.stateManager.findItemById(entityId) if (entity) { // 更新实体位置 entity.tf[0][0] = object.position.x entity.tf[0][2] = object.position.z } else { system.showErrorDialog('not found entityId:' + entityId) } } else { system.showErrorDialog('not found entity') } } this.viewport.stateManager.endStateUpdate() EventBus.dispatch('multiselectedObjectChanged', { multiSelectedObjects: this.viewport.state.multiSelectedObjects }) EventBus.dispatch('selectedObjectPropertyChanged', {}) this.cleanupDrag() } /** * pointermove 事件处理 */ private onPointerMove = (event: PointerEvent): void => { if (!this.enabled) return if (!isNaN(this.dragStartMouse.x) && !isNaN(this.dragStartMouse.y) && this.dragShadows) { this.isDragging = true // 更新鼠标样式 this.viewport.renderer.domElement.style.cursor = 'grabbing' // 更新阴影位置(锁定 Y 轴) this.updateShadows(new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z)) } else { const mouse = this.getMousePosition(event.clientX, event.clientY) const intersected = this.getIntersectedDraggableObject(mouse) if (intersected) { this.viewport.renderer.domElement.style.cursor = 'grab' } else { this.viewport.renderer.domElement.style.cursor = 'auto' } } } /** * 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.isPointerDown = true this.dragStartMouse.set(intersected.position.x, intersected.position.z) this.viewport.controls.enabled = false let selectedObjects = [intersected] if (this.viewport.state.multiSelectedObjects.length > 0) { if (this.viewport.state.multiSelectedObjects.includes(intersected)) { // drag multi-selected objects selectedObjects = this.viewport.state.multiSelectedObjects } } this.createShadows(selectedObjects) } /** * pointerup 事件处理 */ private onPointerUp = (event: PointerEvent): void => { if (!this.enabled) return this.dragStartMouse.set(NaN, NaN) this.isPointerDown = false // console.log('enable controls') this.viewport.controls.enabled = true if (this.isDragging) { const startPos = this.dragStartMouse const targetPos = new THREE.Vector2(CurrentMouseInfo.x, CurrentMouseInfo.z) if (startPos && targetPos) { this.dragComplete(startPos, targetPos) } } } /** * pointerleave 事件处理 */ private onPointerLeave = (_event: PointerEvent): void => { if (!this.enabled) return this.cleanupDrag() } /** * 取消当前拖拽状态 */ cancelDrag(): void { if (this.isDragging || this.isPointerDown) { this.cleanupDrag() this.viewport.renderer.domElement.style.cursor = 'auto' this.viewport.controls.enabled = true } } }