559 lines
19 KiB
TypeScript
559 lines
19 KiB
TypeScript
import {
|
||
Box3,
|
||
Vector3,
|
||
Mesh,
|
||
MeshBasicMaterial,
|
||
Vector2,
|
||
Raycaster,
|
||
Group,
|
||
LineSegments,
|
||
LineBasicMaterial,
|
||
Plane,
|
||
PlaneGeometry,
|
||
BackSide,
|
||
BufferGeometry,
|
||
Object3D
|
||
} from "three";
|
||
import {useAddSignal, useDispatchSignal, useRemoveSignal} from "@/hooks";
|
||
import {isGroup} from "@/utils";
|
||
import Viewer from "@/core/viewer/Viewer";
|
||
import App from "@/core/app/App";
|
||
|
||
let objectSelectedFn;
|
||
|
||
/**
|
||
* 盒剖切
|
||
* @param viewer
|
||
* @param controls
|
||
*/
|
||
class ClippedEdgesBox {
|
||
// 最小剖切盒宽度
|
||
static MIN_WIDTH = 0.05;
|
||
|
||
private viewer: Viewer;
|
||
protected controls;
|
||
|
||
public isOpen: boolean = false;
|
||
protected sectionBox?: Box3;
|
||
protected lastSelected:Object3D | undefined = undefined;
|
||
|
||
constructor(viewer:Viewer) {
|
||
this.viewer = viewer;
|
||
this.controls = viewer.modules.controls;
|
||
|
||
// 开启模型对象的局部剪裁平面功能. 如果不设置为true，设置剪裁平面的模型不会被剪裁
|
||
this.viewer.renderer.localClippingEnabled = true;
|
||
|
||
objectSelectedFn = this.objectSelected.bind(this);
|
||
}
|
||
|
||
get domElement(){
|
||
return this.viewer.renderer.domElement;
|
||
}
|
||
|
||
/**
|
||
* 如果在构造函数中没有分配sectionBox，那么在这里设置它
|
||
*/
|
||
protected setSectionBox() {
|
||
this.sectionBox = new Box3();
|
||
|
||
if (!App.selected) {
|
||
this.lastSelected = undefined;
|
||
this.sectionBox.expandByObject(this.viewer.scene)
|
||
} else {
|
||
this.lastSelected = App.selected;
|
||
this.sectionBox?.expandByObject(App.selected)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 切换选中模型
|
||
*/
|
||
objectSelected(){
|
||
if(!this.isOpen) return;
|
||
|
||
this.reset();
|
||
}
|
||
|
||
/**
|
||
* 开始剖切
|
||
*/
|
||
open() {
|
||
this.initSectionBox();
|
||
this.addMouseListener();
|
||
this.isOpen = true;
|
||
|
||
useAddSignal("objectSelected", objectSelectedFn);
|
||
useDispatchSignal("sceneGraphChanged");
|
||
}
|
||
|
||
/**
|
||
* 关闭剖切
|
||
*/
|
||
close() {
|
||
this.isOpen = false;
|
||
this.removeMouseListener();
|
||
this.clearSectionBox();
|
||
|
||
useRemoveSignal("objectSelected", objectSelectedFn);
|
||
useDispatchSignal("sceneGraphChanged")
|
||
}
|
||
|
||
/**
|
||
* 重置剖切
|
||
*/
|
||
reset() {
|
||
this.close();
|
||
this.open();
|
||
|
||
useDispatchSignal("sceneGraphChanged")
|
||
}
|
||
|
||
dispose() {
|
||
if(this.isOpen){
|
||
this.close();
|
||
}
|
||
|
||
objectSelectedFn = undefined;
|
||
}
|
||
|
||
// --------------- 剖切盒 --------------------
|
||
|
||
protected boxMin: Vector3 = new Vector3(); // 剖切盒最小点
|
||
protected boxMax: Vector3 = new Vector3(); // 剖切盒最大点
|
||
protected group: Group = new Group(); // 包含section的所有对象
|
||
protected planes: Array<Plane> = []; // 切面
|
||
protected vertices = [
|
||
new Vector3(), new Vector3(), new Vector3(), new Vector3(), // 顶部有4个顶点
|
||
new Vector3(), new Vector3(), new Vector3(), new Vector3() // 底部有4个顶点
|
||
];
|
||
|
||
protected faces: Array<BoxFace> = [];
|
||
protected lines: Array<BoxLine> = [];
|
||
|
||
/**
|
||
* 初始化剖切盒
|
||
*/
|
||
protected initSectionBox() {
|
||
this.setSectionBox();
|
||
|
||
// boxMin 与 boxMax 应增加内边距以免贴合
|
||
this.boxMin = (this.sectionBox as Box3).min.sub(new Vector3(0.05, 0.05, 0.05));
|
||
this.boxMax = (this.sectionBox as Box3).max.add(new Vector3(0.05, 0.05, 0.05));
|
||
this.group = new Group();
|
||
this.group.name = "clippedEdgesBox";
|
||
this.group.ignore = true;
|
||
this.initPlanes();
|
||
this.initOrUpdateVertices();
|
||
this.initOrUpdateFaces();
|
||
this.initOrUpdateLines();
|
||
this.viewer.scene.add(this.group);
|
||
}
|
||
|
||
/**
|
||
* 初始化剖切盒的六面
|
||
*/
|
||
protected initPlanes() {
|
||
this.planes = [];
|
||
this.planes.push(
|
||
new Plane(new Vector3(0, -1, 0), this.boxMax.y), // up
|
||
new Plane(new Vector3(0, 1, 0), -this.boxMin.y), // down
|
||
new Plane(new Vector3(1, 0, 0), -this.boxMin.x), // left
|
||
new Plane(new Vector3(-1, 0, 0), this.boxMax.x), // right
|
||
new Plane(new Vector3(0, 0, -1), this.boxMax.z), // front
|
||
new Plane(new Vector3(0, 0, 1), -this.boxMin.z) // back
|
||
);
|
||
|
||
const setChildClippingPlanes = (child) => {
|
||
if (["Mesh", "LineSegments"].includes(child.type)) {
|
||
child.material.clippingPlanes = this.planes;
|
||
child.material.clipIntersection = false;
|
||
}
|
||
}
|
||
|
||
if (!this.lastSelected) {
|
||
this.viewer.scene.traverseVisible(c => {
|
||
setChildClippingPlanes(c)
|
||
})
|
||
} else {
|
||
if (isGroup(this.lastSelected)) {
|
||
App.traverseMeshToArr(this.lastSelected).forEach(child => {
|
||
setChildClippingPlanes(child)
|
||
})
|
||
} else {
|
||
setChildClippingPlanes(this.lastSelected)
|
||
}
|
||
}
|
||
}
|
||
|
||
protected updatePlanes() {
|
||
this.planes[0].constant = this.boxMax.y;
|
||
this.planes[1].constant = -this.boxMin.y;
|
||
this.planes[2].constant = -this.boxMin.x;
|
||
this.planes[3].constant = this.boxMax.x;
|
||
this.planes[4].constant = this.boxMax.z;
|
||
this.planes[5].constant = -this.boxMin.z;
|
||
}
|
||
|
||
/**
|
||
* 初始化或更新剖切盒的8个顶点
|
||
*/
|
||
protected initOrUpdateVertices() {
|
||
this.vertices[0].set(this.boxMin.x, this.boxMax.y, this.boxMin.z); // 顶部的四个顶点
|
||
this.vertices[1].set(this.boxMax.x, this.boxMax.y, this.boxMin.z);
|
||
this.vertices[2].set(this.boxMax.x, this.boxMax.y, this.boxMax.z);
|
||
this.vertices[3].set(this.boxMin.x, this.boxMax.y, this.boxMax.z);
|
||
this.vertices[4].set(this.boxMin.x, this.boxMin.y, this.boxMin.z); // 底部的四个顶点
|
||
this.vertices[5].set(this.boxMax.x, this.boxMin.y, this.boxMin.z);
|
||
this.vertices[6].set(this.boxMax.x, this.boxMin.y, this.boxMax.z);
|
||
this.vertices[7].set(this.boxMin.x, this.boxMin.y, this.boxMax.z);
|
||
}
|
||
|
||
/**
|
||
* 初始化或更新剖切盒的6个面
|
||
*/
|
||
protected initOrUpdateFaces() {
|
||
const v = this.vertices;
|
||
if (!this.faces || this.faces.length === 0) {
|
||
this.faces = [];
|
||
this.faces.push(
|
||
new BoxFace("yUp", [v[0], v[1], v[2], v[3]]), // up
|
||
new BoxFace("yDown", [v[4], v[7], v[6], v[5]]), // down
|
||
new BoxFace("xLeft", [v[0], v[3], v[7], v[4]]), // left
|
||
new BoxFace("xRight", [v[1], v[5], v[6], v[2]]), // right
|
||
new BoxFace("zFront", [v[2], v[6], v[7], v[3]]), // front
|
||
new BoxFace("zBack", [v[0], v[4], v[5], v[1]]) // back
|
||
);
|
||
this.group.add(...this.faces);
|
||
this.faces.forEach(face => {
|
||
this.group.add(face.backFace);
|
||
});
|
||
} else {
|
||
const f = this.faces;
|
||
f[0].setFromPoints([v[0], v[1], v[2], v[3]]);
|
||
f[1].setFromPoints([v[4], v[7], v[6], v[5]]);
|
||
f[2].setFromPoints([v[0], v[3], v[7], v[4]]);
|
||
f[3].setFromPoints([v[1], v[5], v[6], v[2]]);
|
||
f[4].setFromPoints([v[2], v[6], v[7], v[3]]);
|
||
f[5].setFromPoints([v[0], v[4], v[5], v[1]]);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 初始化或更新剖切盒的12条边
|
||
*/
|
||
protected initOrUpdateLines() {
|
||
const v = this.vertices;
|
||
if (!this.lines || this.lines.length === 0) {
|
||
const f = this.faces;
|
||
if (!f) {
|
||
throw Error("需要先初始化面!");
|
||
}
|
||
this.lines = [];
|
||
this.lines.push(
|
||
new BoxLine([v[0], v[1]], [f[0], f[5]]),
|
||
new BoxLine([v[1], v[2]], [f[0], f[3]]),
|
||
new BoxLine([v[2], v[3]], [f[0], f[4]]),
|
||
new BoxLine([v[3], v[0]], [f[0], f[2]]),
|
||
new BoxLine([v[4], v[5]], [f[1], f[5]]),
|
||
new BoxLine([v[5], v[6]], [f[1], f[3]]),
|
||
new BoxLine([v[6], v[7]], [f[1], f[4]]),
|
||
new BoxLine([v[7], v[4]], [f[1], f[2]]),
|
||
new BoxLine([v[0], v[4]], [f[2], f[5]]),
|
||
new BoxLine([v[1], v[5]], [f[3], f[5]]),
|
||
new BoxLine([v[2], v[6]], [f[3], f[4]]),
|
||
new BoxLine([v[3], v[7]], [f[2], f[4]])
|
||
);
|
||
this.group.add(...this.lines);
|
||
} else {
|
||
let i = 0;
|
||
this.lines[i++].setFromPoints([v[0], v[1]]);
|
||
this.lines[i++].setFromPoints([v[1], v[2]]);
|
||
this.lines[i++].setFromPoints([v[2], v[3]]);
|
||
this.lines[i++].setFromPoints([v[3], v[0]]);
|
||
this.lines[i++].setFromPoints([v[4], v[5]]);
|
||
this.lines[i++].setFromPoints([v[5], v[6]]);
|
||
this.lines[i++].setFromPoints([v[6], v[7]]);
|
||
this.lines[i++].setFromPoints([v[7], v[4]]);
|
||
this.lines[i++].setFromPoints([v[0], v[4]]);
|
||
this.lines[i++].setFromPoints([v[1], v[5]]);
|
||
this.lines[i++].setFromPoints([v[2], v[6]]);
|
||
this.lines[i++].setFromPoints([v[3], v[7]]);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 清除剖切盒
|
||
*/
|
||
protected clearSectionBox() {
|
||
this.viewer.scene.remove(this.group);
|
||
this.domElement.style.cursor = "";
|
||
this.faces = [];
|
||
this.lines = [];
|
||
|
||
const setChildClippingPlanes = (child) => {
|
||
if (["Mesh", "LineSegments"].includes(child.type)) {
|
||
child.material.clippingPlanes = [];
|
||
}
|
||
}
|
||
|
||
if (!this.lastSelected) {
|
||
this.viewer.scene.traverseVisible(c => {
|
||
setChildClippingPlanes(c);
|
||
})
|
||
} else {
|
||
if (isGroup(this.lastSelected)) {
|
||
App.traverseMeshToArr(this.lastSelected).forEach(child => {
|
||
setChildClippingPlanes(child)
|
||
})
|
||
} else {
|
||
setChildClippingPlanes(this.lastSelected)
|
||
}
|
||
}
|
||
}
|
||
|
||
// ------------------- 指针事件 -----------------------
|
||
|
||
protected raycaster: Raycaster = new Raycaster();
|
||
protected mousePosition: Vector2 = new Vector2();
|
||
// 鼠标悬停的面激活
|
||
protected activeFace: BoxFace | null = null;
|
||
|
||
private addMouseListener() {
|
||
this.domElement.addEventListener("pointermove", this.onMouseMove);
|
||
this.domElement.addEventListener("pointerdown", this.onMouseDown);
|
||
}
|
||
|
||
private removeMouseListener() {
|
||
this.domElement.removeEventListener("pointermove", this.onMouseMove);
|
||
this.domElement.removeEventListener("pointerdown", this.onMouseDown);
|
||
}
|
||
|
||
/**
|
||
* 转换鼠标坐标，并更新光线投射
|
||
*/
|
||
protected updateMouseAndRay(event: MouseEvent) {
|
||
this.mousePosition.setX((event.offsetX / this.domElement.offsetWidth) * 2 - 1);
|
||
this.mousePosition.setY(-(event.offsetY / this.domElement.offsetHeight) * 2 + 1);
|
||
this.raycaster.setFromCamera(this.mousePosition, this.viewer.camera);
|
||
}
|
||
|
||
/**
|
||
* 处理鼠标移动事件，正确高亮相应的面/线
|
||
*/
|
||
protected onMouseMove = (event: MouseEvent) => {
|
||
this.updateMouseAndRay(event);
|
||
const intersects = this.raycaster.intersectObjects(this.faces); // 鼠标和面相交
|
||
if (intersects.length) {
|
||
this.domElement.style.cursor = "pointer";
|
||
const face = intersects[0].object as BoxFace;
|
||
if (face !== this.activeFace) {
|
||
if (this.activeFace) {
|
||
this.activeFace.setActive(false);
|
||
}
|
||
face.setActive(true);
|
||
this.activeFace = face;
|
||
}
|
||
} else {
|
||
if (this.activeFace) {
|
||
this.activeFace.setActive(false);
|
||
this.activeFace = null;
|
||
this.domElement.style.cursor = "auto";
|
||
}
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理鼠标按下事件，开始使用左键拖动一个面
|
||
*/
|
||
protected onMouseDown = (event: MouseEvent) => {
|
||
const isLeftButton = event.button === 0;
|
||
|
||
if (this.activeFace && isLeftButton) {
|
||
this.updateMouseAndRay(event);
|
||
const intersects = this.raycaster.intersectObjects(this.faces);
|
||
if (intersects.length) {
|
||
const face = intersects[0].object as BoxFace;
|
||
const axis = face.axis;
|
||
const point = intersects[0].point;
|
||
this.drag.start(axis, point);
|
||
}
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 拖动对象，用于处理面裁剪操作
|
||
*/
|
||
protected drag = {
|
||
axis: "", // 要拖动的6轴之一
|
||
point: new Vector3(), // 记录拖动点的位置
|
||
ground: new Mesh(new PlaneGeometry(100000, 100000), new MeshBasicMaterial({
|
||
colorWrite: false,
|
||
depthWrite: false
|
||
})),
|
||
start: (axis: string, point: Vector3) => {
|
||
this.drag.axis = axis;
|
||
this.drag.point = point;
|
||
this.drag.initGround();
|
||
this.controls.enabled = false;
|
||
this.domElement.style.cursor = "move";
|
||
|
||
this.domElement.removeEventListener("pointermove", this.onMouseMove);
|
||
this.domElement.addEventListener("pointermove", this.drag.mousemove);
|
||
this.domElement.addEventListener("pointerup", this.drag.mouseup);
|
||
},
|
||
end: () => {
|
||
this.viewer.scene.remove(this.drag.ground);
|
||
this.controls.enabled = true;
|
||
this.domElement.removeEventListener("pointermove", this.drag.mousemove);
|
||
this.domElement.removeEventListener("pointerup", this.drag.mouseup);
|
||
this.domElement.addEventListener("pointermove", this.onMouseMove);
|
||
},
|
||
mousemove: (event: MouseEvent) => {
|
||
this.updateMouseAndRay(event);
|
||
const intersects = this.raycaster.intersectObject(this.drag.ground); // 鼠标与拖动地面的相交情况
|
||
if (intersects.length) {
|
||
this.drag.updateSectionBox(intersects[0].point);
|
||
}
|
||
},
|
||
mouseup: () => {
|
||
this.drag.end();
|
||
},
|
||
// 拖动时初始化参考平面，可以是XY, YZ, ZX平面
|
||
initGround: () => {
|
||
const normals: any = {
|
||
xLeft: new Vector3(-1, 0, 0),
|
||
xRight: new Vector3(1, 0, 0),
|
||
yDown: new Vector3(0, -1, 0),
|
||
yUp: new Vector3(0, 1, 0),
|
||
zBack: new Vector3(0, 0, -1),
|
||
zFront: new Vector3(0, 0, 1)
|
||
};
|
||
if (["xLeft", "xRight"].includes(this.drag.axis)) {
|
||
this.drag.point.setX(0);
|
||
} else if (["yDown", "yUp"].includes(this.drag.axis)) {
|
||
this.drag.point.setY(0);
|
||
} else if (["zBack", "zFront"].includes(this.drag.axis)) {
|
||
this.drag.point.setZ(0);
|
||
}
|
||
this.drag.ground.position.copy(this.drag.point);
|
||
const newNormal = this.viewer.camera.position.clone()
|
||
.sub(this.viewer.camera.position.clone().projectOnVector(normals[this.drag.axis]))
|
||
.add(this.drag.point); // 得到平面的法线
|
||
this.drag.ground.lookAt(newNormal);
|
||
this.viewer.scene.add(this.drag.ground);
|
||
},
|
||
// 更新裁剪盒子的位置
|
||
updateSectionBox: (point: Vector3) => {
|
||
const minSize = ClippedEdgesBox.MIN_WIDTH; // 截面框的最小尺寸
|
||
switch (this.drag.axis) {
|
||
case "yUp": // up
|
||
this.boxMax.setY(Math.max(this.boxMin.y + minSize, point.y));
|
||
break;
|
||
case "yDown": // down
|
||
this.boxMin.setY(Math.min(this.boxMax.y - minSize, point.y));
|
||
break;
|
||
case "xLeft": // left
|
||
this.boxMin.setX(Math.min(this.boxMax.x - minSize, point.x));
|
||
break;
|
||
case "xRight": // right
|
||
this.boxMax.setX(Math.max(this.boxMin.x + minSize, point.x));
|
||
break;
|
||
case "zFront": // front
|
||
this.boxMax.setZ(Math.max(this.boxMin.z + minSize, point.z));
|
||
break;
|
||
case "zBack": // back
|
||
this.boxMin.setZ(Math.min(this.boxMax.z - minSize, point.z));
|
||
break;
|
||
}
|
||
|
||
// 更新剖切盒的平面、顶点、面和线
|
||
this.updatePlanes();
|
||
this.initOrUpdateVertices();
|
||
this.initOrUpdateFaces();
|
||
this.initOrUpdateLines();
|
||
|
||
useDispatchSignal("sceneGraphChanged");
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 剖切盒的BoxLine
|
||
*/
|
||
class BoxLine extends LineSegments {
|
||
private normalMaterial = new LineBasicMaterial({color: 0x2ee3dc}); // 0x2ee3dc，线的正常颜色(原颜色:0xe1f2fb)
|
||
private activeMaterial = new LineBasicMaterial({color: 0x00fdec}); // 0x00fdec，线的激活颜色(原始颜色:0x00ffff)
|
||
|
||
/**
|
||
* @param vertices 一条直线上的两点
|
||
* @param faces 相对于一条线的两个面
|
||
*/
|
||
constructor(vertices: Array<Vector3>, faces: Array<BoxFace>) {
|
||
super();
|
||
faces.forEach(face => face.lines.push(this)); // 保存面与线之间的关系
|
||
this.geometry = new BufferGeometry();
|
||
this.geometry.setFromPoints(vertices);
|
||
this.material = this.normalMaterial;
|
||
}
|
||
|
||
/**
|
||
* 更新 geometry
|
||
*/
|
||
setFromPoints(vertices: Vector3[]) {
|
||
this.geometry.setFromPoints(vertices);
|
||
}
|
||
|
||
/**
|
||
* 设置为活动或非活动状态
|
||
* @param isActive
|
||
*/
|
||
setActive(isActive: boolean) {
|
||
this.material = isActive ? this.activeMaterial : this.normalMaterial;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 剖切盒的BoxFace
|
||
*/
|
||
class BoxFace extends Mesh {
|
||
axis: string;
|
||
lines: Array<BoxLine> = []; // 4条线相对于一个面
|
||
backFace: Mesh; // 背面:face的背面，用于显示
|
||
|
||
/**
|
||
* @param axis 面的轴
|
||
* @param vertices 面的四个点
|
||
*/
|
||
constructor(axis: string, vertices: Array<Vector3>) {
|
||
super();
|
||
this.axis = axis;
|
||
this.lines = [];
|
||
this.geometry = new BufferGeometry();
|
||
this.geometry.setFromPoints(vertices);
|
||
this.geometry.setIndex([0, 3, 2, 0, 2, 1]);
|
||
this.geometry.computeVertexNormals();
|
||
this.material = new MeshBasicMaterial({colorWrite: false, depthWrite: false});
|
||
const backMaterial = new MeshBasicMaterial({color: 0x2ee3dc, transparent: true, opacity: 0.3, side: BackSide});
|
||
this.backFace = new Mesh(this.geometry, backMaterial);
|
||
}
|
||
|
||
/**
|
||
* 更新geometry
|
||
*/
|
||
setFromPoints(vertices: Vector3[]) {
|
||
this.geometry.setFromPoints(vertices);
|
||
}
|
||
|
||
/**
|
||
* 设置为活动或非活动状态
|
||
* @param isActive
|
||
*/
|
||
setActive(isActive: boolean) {
|
||
this.lines.forEach(line => {
|
||
line.setActive(isActive)
|
||
});
|
||
}
|
||
}
|
||
|
||
export {ClippedEdgesBox}; |