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

Compare commits

base: MES:master
Branches Tags
MES:master MES:add_custom_no MES:upgrade MES:v2 MES:select-block
MES:1.5.1 MES:1.5.0 MES:1.4.6 MES:1.4.5 MES:1.4.4 MES:1.4.3 MES:1.4.2 MES:1.4.1 MES:1.4.0 MES:1.3.1 MES:1.3.0 MES:1.2.5 MES:1.2.4 MES:1.2.3 MES:1.2.2 MES:1.2.1 MES:1.2.0 MES:1.1.3 MES:1.1.2 MES:1.1.1 MES:1.0.4 MES:1.0.3 MES:1.0.2 MES:1.0.1 MES:1.0.0
..
compare: MES:1.5.0
Branches Tags
MES:master MES:add_custom_no MES:upgrade MES:v2 MES:select-block
MES:1.5.1 MES:1.5.0 MES:1.4.6 MES:1.4.5 MES:1.4.4 MES:1.4.3 MES:1.4.2 MES:1.4.1 MES:1.4.0 MES:1.3.1 MES:1.3.0 MES:1.2.5 MES:1.2.4 MES:1.2.3 MES:1.2.2 MES:1.2.1 MES:1.2.0 MES:1.1.3 MES:1.1.2 MES:1.1.1 MES:1.0.4 MES:1.0.3 MES:1.0.2 MES:1.0.1 MES:1.0.0

1 Commits
master ... 1.5.0

Author SHA1 Message Date
xief
ab59fbe267 移除webpack，替换为vite，删除弃用文件 2023-08-07 14:42:26 +08:00
4 changed files with 70 additions and 59 deletions
Expand all files Collapse all files

5
index.html
View File

@@ -2,10 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1.0" />
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 --host", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
@@ -29,6 +29,5 @@
"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"
} }

110
src/CameraControls.ts
View File

@@ -1,24 +1,24 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { Vector3 } from 'three';
import { equaln } from './GeUtils';
import { KeyBoard, MouseKey } from './KeyEnum'; import { KeyBoard, MouseKey } from './KeyEnum';
import { Vector3 } from 'three';
import { Viewer } from './Viewer'; import { Viewer } from './Viewer';
//相机控制状态 //相机控制状态
export enum CameraControlState export enum CameraControlState
{ {
Null = 0, Pan = 1, Rotate = 2, Scale = 4 Null = 0, Pan = 1, Rotate = 2, Scale = 3
} }
export class CameraControls export class CameraControls
{ {
m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale | CameraControlState.Pan, CameraControlState.Pan]; m_TouthTypeList = [CameraControlState.Rotate, CameraControlState.Scale, 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: number; m_DollyStart: THREE.Vector2 = new THREE.Vector2();
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, { passive: false }); this.m_domElement.addEventListener('wheel', this.onMouseWheel, false);
this.m_domElement.addEventListener('touchstart', this.onTouchStart, { passive: false }); this.m_domElement.addEventListener('touchstart', this.onTouchStart, false);
this.m_domElement.addEventListener('touchend', this.onTouchEnd, false); this.m_domElement.addEventListener('touchend', this.onTouchEnd, false);
this.m_domElement.addEventListener('touchmove', this.onTouchMove, { passive: false }); this.m_domElement.addEventListener('touchmove', this.onTouchMove, 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 = distance; this.m_DollyStart.set(0, 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,38 +93,40 @@ 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)
{ {
this.m_Viewer.Pan(vec); case CameraControlState.Pan:
}
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.Zoom(0.95); this.m_Viewer.Pan(vec);
break;
} }
else case CameraControlState.Scale:
{ {
this.m_Viewer.Zoom(1.05); 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:
{
this.m_Viewer.Rotate(vec.multiplyScalar(2));
break;
} }
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_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;
@@ -176,13 +178,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();
@@ -193,16 +195,28 @@ 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);
} }
if (this.m_State & CameraControlState.Pan) switch (this.m_State)
{ {
this.m_Viewer.Pan(changeVec); case CameraControlState.Pan:
{
this.m_Viewer.Pan(changeVec);
break;
}
case CameraControlState.Rotate:
{
break;
}
case CameraControlState.Scale:
{
break;
}
} }
}; }
/** /**
* 鼠标滚轮事件 * 鼠标滚轮事件
* *
@@ -223,14 +237,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,6 +1,7 @@
// 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";
@@ -20,8 +21,8 @@ document.body.appendChild(btn3);
let el = document.createElement("canvas"); let el = document.createElement("canvas");
el.style.width = "100%"; el.style.width = "80%";
el.style.height = "80vh"; el.style.height = "80%";
document.body.appendChild(el); document.body.appendChild(el);
let view = new Viewer(el, (settings) => let view = new Viewer(el, (settings) =>
@@ -37,9 +38,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 = () =>