69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import {
|
|
DoubleSide,
|
|
Mesh,
|
|
MeshBasicMaterial,
|
|
PerspectiveCamera,
|
|
Plane,
|
|
PlaneGeometry,
|
|
Vector3,
|
|
WebGLRenderer,
|
|
} from "three";
|
|
import { DragControls, OrbitControls } from "three/examples/jsm/Addons.js";
|
|
import { Extent } from "./build-scene";
|
|
import { getCenter3D } from "./utils";
|
|
|
|
export function createClippingPlane(
|
|
renderer: WebGLRenderer,
|
|
camera: PerspectiveCamera,
|
|
orbitControls: OrbitControls,
|
|
extent: Extent
|
|
) {
|
|
const center = getCenter3D(extent);
|
|
|
|
const width = extent.xmax - extent.xmin;
|
|
const height = extent.ymax - extent.ymin;
|
|
const d = extent.zmax;
|
|
|
|
// Visual representation of the clipping Plane
|
|
// Plane is given in Hesse normal form
|
|
const normalVector = new Vector3(0, 0, -1);
|
|
const plane = new Plane(normalVector, d);
|
|
|
|
// Dragging Mechanism
|
|
const planeMesh = new Mesh(
|
|
new PlaneGeometry(width, height),
|
|
new MeshBasicMaterial({
|
|
visible: true,
|
|
color: 0xff0000,
|
|
transparent: true,
|
|
opacity: 0.1,
|
|
side: DoubleSide,
|
|
})
|
|
);
|
|
planeMesh.position.set(center.x, center.y, d);
|
|
|
|
const dragControls = new DragControls(
|
|
[planeMesh],
|
|
camera,
|
|
renderer.domElement
|
|
);
|
|
|
|
// Disable OrbitControls when dragging starts
|
|
dragControls.addEventListener("dragstart", () => {
|
|
orbitControls.enabled = false;
|
|
});
|
|
|
|
// Re-enable OrbitControls when dragging ends
|
|
dragControls.addEventListener("dragend", () => {
|
|
orbitControls.enabled = true;
|
|
});
|
|
|
|
dragControls.addEventListener("drag", (event) => {
|
|
const newZ = event.object.position.z;
|
|
plane.constant = newZ;
|
|
planeMesh.position.x = center.x;
|
|
planeMesh.position.y = center.y;
|
|
});
|
|
|
|
return { planeMesh, plane };
|
|
}
|