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

手机端移动与拖动优化，调试环境优化 (#2)

Browse Source 
Co-authored-by: xief <1789784602@qq.com>
Reviewed-on: #2
This commit is contained in:
谢凡
2025-04-07 16:18:41 +08:00
parent f22f1acd52
commit 49a327cbee
4 changed files with 61 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -2,7 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CADViewComponent</title> <title>CADViewComponent</title>
</head> </head>

5
package.json
View File

@@ -5,7 +5,7 @@
"main": "src/index.ts", "main": "src/index.ts",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host",
"build": "tsc && vite build", "build": "tsc && vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
@@ -29,5 +29,6 @@
"polylabel": "^1.1.0", "polylabel": "^1.1.0",
"xaop": "^2.0.0", "xaop": "^2.0.0",
"webcad_ue4_api": "http://gitea.cf/cx/webcad-ue4-api/archive/3.2.4.tar.gz" "webcad_ue4_api": "http://gitea.cf/cx/webcad-ue4-api/archive/3.2.4.tar.gz"
} },
"packageManager": "pnpm@9.1.1+sha1.09ada6cd05003e0ced25fb716f9fda4063ec2e3b"
} }

84
src/CameraControls.ts
View File

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

9
src/ViewSrc/index.ts
View File

@@ -1,7 +1,6 @@
// import { Color, Face3, MeshBasicMaterial, Object3D, Vector2, Vector3 } from "three"; // import { Color, Face3, MeshBasicMaterial, Object3D, Vector2, Vector3 } from "three";
// import "./style.css"; // import "./style.css";
import { Color, MeshBasicMaterial, Vector3 } from "three"; import { Color, MeshBasicMaterial, Vector3 } from "three";
import { CameraControlState } from "../CameraControls";
import { GetBox } from "../GeUtils"; import { GetBox } from "../GeUtils";
import { LoadBoard } from "../Utils"; import { LoadBoard } from "../Utils";
import { Viewer } from "../Viewer"; import { Viewer } from "../Viewer";
@@ -21,8 +20,8 @@ document.body.appendChild(btn3);
let el = document.createElement("canvas"); let el = document.createElement("canvas");
el.style.width = "80%"; el.style.width = "100%";
el.style.height = "80%"; el.style.height = "80vh";
document.body.appendChild(el); document.body.appendChild(el);
let view = new Viewer(el, (settings) => let view = new Viewer(el, (settings) =>
@@ -38,9 +37,9 @@ let view = new Viewer(el, (settings) =>
}); });
//修改这个顺序 改变1 2 3 个触摸点时的触发状态. //修改这个顺序 改变1 2 3 个触摸点时的触发状态.
view.m_CameraCtrl.m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale, CameraControlState.Pan]; // view.m_CameraCtrl.m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale, CameraControlState.Pan];
//例如,修改单指滑动为平移. //例如,修改单指滑动为平移.
view.m_CameraCtrl.m_TouthTypeList = [CameraControlState.Pan, CameraControlState.Scale, CameraControlState.Rotate]; // view.m_CameraCtrl.m_TouthTypeList = [CameraControlState.Pan, CameraControlState.Scale, CameraControlState.Rotate];
//加载 //加载
btn.onclick = () => btn.onclick = () =>