MES-FE/CADViewComponent
6
0
Fork 0
Code Issues Pull Requests Packages Releases 15 Wiki Activity

手机端移动与拖动优化，调试环境优化

Browse Source
This commit is contained in:
xief
2025-04-07 15:57:01 +08:00
parent f22f1acd52
commit 65bfc228b4
4 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/CameraControls.ts
View File

@@ -1,24 +1,24 @@
import * as THREE from 'three';
import { KeyBoard, MouseKey } from './KeyEnum';
import { Vector3 } from 'three';
import { equaln } from './GeUtils';
import { KeyBoard, MouseKey } from './KeyEnum';
import { Viewer } from './Viewer';
//相机控制状态
export enum CameraControlState
{
Null = 0, Pan = 1, Rotate = 2, Scale = 3
Null = 0, Pan = 1, Rotate = 2, Scale = 4
}
export class CameraControls
{
m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale, CameraControlState.Pan];
m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale | CameraControlState.Pan, CameraControlState.Pan];
m_domElement: HTMLElement;//HTMLDocument
//起始点击
m_StartClickPoint: THREE.Vector3 = new THREE.Vector3();
m_EndClickPoint: THREE.Vector3 = new THREE.Vector3();
m_DollyStart: THREE.Vector2 = new THREE.Vector2();
m_DollyEnd: THREE.Vector2 = new THREE.Vector2();
m_DollyStart: number;
m_KeyDown = new Map<KeyBoard, boolean>();
m_MouseDown = new Map<MouseKey, boolean>();
@@ -40,16 +40,16 @@ export class CameraControls
{
if (this.m_domElement)
{
this.m_domElement.addEventListener("mousedown", this.onMouseDown, false)
this.m_domElement.addEventListener("mousemove", this.onMouseMove, false)
this.m_domElement.addEventListener("mouseup", this.onMouseUp, false)
this.m_domElement.addEventListener("mousedown", this.onMouseDown, false);
this.m_domElement.addEventListener("mousemove", this.onMouseMove, false);
this.m_domElement.addEventListener("mouseup", this.onMouseUp, false);
window.addEventListener("keydown", this.onKeyDown, false);
window.addEventListener("keyup", this.onKeyUp, false);
this.m_domElement.addEventListener('wheel', this.onMouseWheel, false);
this.m_domElement.addEventListener('wheel', this.onMouseWheel, { passive: false });
this.m_domElement.addEventListener('touchstart', this.onTouchStart, false);
this.m_domElement.addEventListener('touchstart', this.onTouchStart, { passive: false });
this.m_domElement.addEventListener('touchend', this.onTouchEnd, false);
this.m_domElement.addEventListener('touchmove', this.onTouchMove, false);
this.m_domElement.addEventListener('touchmove', this.onTouchMove, { passive: false });
window.addEventListener("blur", this.onBlur, false);
}
@@ -62,7 +62,7 @@ export class CameraControls
{
this.m_KeyDown.clear();
this.m_MouseDown.clear();
}
};
//触屏开始事件
onTouchStart = (event: TouchEvent) =>
@@ -76,15 +76,15 @@ export class CameraControls
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.m_DollyStart.set(0, distance);
this.m_DollyStart = distance;
}
this.m_State = this.m_TouthTypeList[event.touches.length - 1];
}
}
};
onTouchEnd = (event: TouchEvent) =>
{
this.m_State = CameraControlState.Null;
}
};
onTouchMove = (event: TouchEvent) =>
{
event.preventDefault();
@@ -93,40 +93,38 @@ export class CameraControls
this.m_EndClickPoint.set(event.touches[0].pageX, event.touches[0].pageY, 0);
let vec = this.m_EndClickPoint.clone().sub(this.m_StartClickPoint);
switch (this.m_State)
{
case CameraControlState.Pan:
{
this.m_Viewer.Pan(vec);
break;
}
case CameraControlState.Scale:
{
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
this.m_DollyEnd.set(0, distance);
if (distance > this.m_DollyStart.y)
{
this.m_Viewer.Zoom(0.95);
}
else
{
this.m_Viewer.Zoom(1.05)
}
this.m_DollyStart.copy(this.m_DollyEnd);
break;
}
case CameraControlState.Rotate:
if (this.m_State & CameraControlState.Pan)
{
this.m_Viewer.Pan(vec);
}
if (this.m_State & CameraControlState.Scale)
{
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
if (!equaln(this.m_DollyStart / distance, 1, 0.05))//轻微防抖
{
if (distance > this.m_DollyStart)
{
this.m_Viewer.Rotate(vec.multiplyScalar(2));
break;
this.m_Viewer.Zoom(0.95);
}
else
{
this.m_Viewer.Zoom(1.05);
}
this.m_DollyStart = distance;
}
}
if (this.m_State & CameraControlState.Rotate)
{
this.m_Viewer.Rotate(vec.multiplyScalar(2));
}
this.m_StartClickPoint.copy(this.m_EndClickPoint);
this.m_Viewer.m_bNeedUpdate = true;
}
};
beginRotate()
{
this.m_State = CameraControlState.Rotate;
@@ -178,13 +176,13 @@ export class CameraControls
break;
}
}
}
};
onMouseUp = (event: MouseEvent) =>
{
event.preventDefault();
this.m_State = CameraControlState.Null;
this.m_MouseDown.set(event.button, false);
}
};
onMouseMove = (event: MouseEvent) =>
{
event.preventDefault();
@@ -195,28 +193,16 @@ export class CameraControls
(this.m_LeftUseRotate ||
(this.m_KeyDown.get(KeyBoard.Control))
)
&& this.m_State == CameraControlState.Rotate
&& this.m_State & CameraControlState.Rotate
)
{
this.m_Viewer.Rotate(changeVec);
}
switch (this.m_State)
if (this.m_State & CameraControlState.Pan)
{
case CameraControlState.Pan:
{
this.m_Viewer.Pan(changeVec);
break;
}
case CameraControlState.Rotate:
{
break;
}
case CameraControlState.Scale:
{
break;
}
this.m_Viewer.Pan(changeVec);
}
}
};
/**
* 鼠标滚轮事件
*
@@ -237,14 +223,14 @@ export class CameraControls
{
this.m_Viewer.Zoom(1.4, pt);
}
}
};
//按键
onKeyDown = (event: KeyboardEvent) =>
{
this.m_KeyDown.set(event.keyCode, true);
}
};
onKeyUp = (event: KeyboardEvent) =>
{
this.m_KeyDown.set(event.keyCode, false);
}
};
}