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

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

Merged
xief merged 1 commits from opt_mobile_move into master 2025-04-07 16:18:42 +08:00
Conversation 0 Commits 1 Files Changed 4 +61 -72
4 changed files with 61 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 65bfc228b4 - Show all commits

5
index.html
View File

@ -2,7 +2,10 @@
<html lang="en">
<head>
<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" />
<title>CADViewComponent</title>
</head>

5
package.json
View File

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

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);
}
};
}

9
src/ViewSrc/index.ts
View File

@ -1,7 +1,6 @@
// import { Color, Face3, MeshBasicMaterial, Object3D, Vector2, Vector3 } from "three";
// import "./style.css";
import { Color, MeshBasicMaterial, Vector3 } from "three";
import { CameraControlState } from "../CameraControls";
import { GetBox } from "../GeUtils";
import { LoadBoard } from "../Utils";
import { Viewer } from "../Viewer";
@ -21,8 +20,8 @@ document.body.appendChild(btn3);
let el = document.createElement("canvas");
el.style.width = "80%";
el.style.height = "80%";
el.style.width = "100%";
el.style.height = "80vh";
document.body.appendChild(el);
let view = new Viewer(el, (settings) =>
@ -38,9 +37,9 @@ let view = new Viewer(el, (settings) =>
});
//修改这个顺序 改变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 = () =>