8 changed files with 306 additions and 32 deletions
@ -0,0 +1,265 @@ |
|||
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 enabled: boolean = true |
|||
|
|||
private 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' |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 设置启用/禁用 |
|||
*/ |
|||
set enable(value: boolean) { |
|||
this.enabled = value |
|||
if (!value) { |
|||
this.cleanupDrag() |
|||
} |
|||
} |
|||
|
|||
get enable(): boolean { |
|||
return this.enabled |
|||
} |
|||
|
|||
/** |
|||
* 卸载资源 |
|||
*/ |
|||
dispose(): void { |
|||
const domElement = this.viewport.renderer.domElement |
|||
domElement.removeEventListener('pointermove', this.onPointerMove) |
|||
domElement.removeEventListener('pointerdown', this.onPointerDown) |
|||
domElement.removeEventListener('pointerup', this.onPointerUp) |
|||
domElement.removeEventListener('pointerleave', this.onPointerLeave) |
|||
|
|||
this.cleanupDrag() |
|||
domElement.style.cursor = 'auto' |
|||
} |
|||
|
|||
/** |
|||
* 清理拖拽状态 |
|||
*/ |
|||
private cleanupDrag(): void { |
|||
if (this.isDragging || this.isPointerDown) { |
|||
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() |
|||
} |
|||
} |
|||
Loading…
Reference in new issue