135 lines
8.6 KiB
TypeScript
135 lines
8.6 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import * as THREE from "three";
|
|
|
|
type ViewMode = "z" | "z2" | "x" | "y" | "y2" | "p";
|
|
type Point = Record<string, number>;
|
|
type Segment = { id?: number; source_line?: number | null; active?: boolean; rapid?: boolean; motion_type?: number; turn?: number; center?: Point; normal?: Point; start?: Point; end?: Point };
|
|
type Props = { axes: number[]; view?: ViewMode; zoom?: number; rotateMode?: boolean; segments?: Segment[]; showPath?: boolean; showLive?: boolean; showLimits?: boolean; showVelocity?: boolean; showOffsets?: boolean; showExtents?: boolean };
|
|
|
|
export function ThreeMachineView({ axes, view = "p", zoom = 1, rotateMode = false, segments = [], showPath = true, showLive = true, showLimits = false, showVelocity = false, showOffsets = false, showExtents = false }: Props) {
|
|
const host = useRef<HTMLDivElement>(null);
|
|
const viewRef = useRef(view);
|
|
const zoomRef = useRef(zoom);
|
|
const rotateRef = useRef(rotateMode);
|
|
const segmentsRef = useRef(segments);
|
|
const layersRef = useRef({ showPath, showLive, showLimits, showVelocity, showOffsets, showExtents });
|
|
viewRef.current = view;
|
|
zoomRef.current = zoom;
|
|
rotateRef.current = rotateMode;
|
|
segmentsRef.current = segments;
|
|
layersRef.current = { showPath, showLive, showLimits, showVelocity, showOffsets, showExtents };
|
|
|
|
useEffect(() => {
|
|
const element = host.current;
|
|
if (!element) return;
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x080e13);
|
|
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
|
|
camera.position.set(6, 5, 7);
|
|
camera.lookAt(0, 1, 0);
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
|
renderer.setPixelRatio(Math.min(globalThis.devicePixelRatio || 1, 2));
|
|
element.appendChild(renderer.domElement);
|
|
|
|
// AXIS preview is a backplot of the source program. The Vismach solid
|
|
// model belongs to the machine view and must not be drawn in this pane.
|
|
const axesHelper = new THREE.AxesHelper(2.2);
|
|
axesHelper.name = "axis-coordinate-axes";
|
|
scene.add(axesHelper);
|
|
const pathGroup = new THREE.Group(); pathGroup.name = "axis-toolpath"; scene.add(pathGroup);
|
|
const livePathGroup = new THREE.Group(); livePathGroup.name = "axis-live-toolpath"; scene.add(livePathGroup);
|
|
const overlayGroup = new THREE.Group(); overlayGroup.name = "axis-overlays"; scene.add(overlayGroup);
|
|
const resize = () => {
|
|
const width = Math.max(element.clientWidth, 320);
|
|
const height = Math.max(element.clientHeight, 280);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(width, height, false);
|
|
};
|
|
const observer = new ResizeObserver(resize);
|
|
observer.observe(element);
|
|
resize();
|
|
let frame = 0;
|
|
const render = () => {
|
|
const bounds = segmentsRef.current.reduce((box, segment) => {
|
|
for (const point of [segment.start ?? {}, segment.end ?? {}]) {
|
|
for (const axis of ["x", "y", "z"] as const) {
|
|
const value = Number(point[axis] ?? 0);
|
|
if (Number.isFinite(value)) { box.min[axis] = Math.min(box.min[axis], value); box.max[axis] = Math.max(box.max[axis], value); }
|
|
}
|
|
}
|
|
return box;
|
|
}, { min: { x: 0, y: 0, z: 0 }, max: { x: 0, y: 0, z: 0 } });
|
|
const span = Math.max(bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y, bounds.max.z - bounds.min.z, 1);
|
|
const scale = Math.min(0.12, 4.2 / span);
|
|
const center = { x: (bounds.min.x + bounds.max.x) / 2, y: (bounds.min.y + bounds.max.y) / 2, z: (bounds.min.z + bounds.max.z) / 2 };
|
|
// Keep the live coordinates available for the backplot marker without
|
|
// introducing a solid tool or machine mesh into the source preview.
|
|
pathGroup.visible = layersRef.current.showPath;
|
|
livePathGroup.visible = layersRef.current.showLive;
|
|
pathGroup.clear();
|
|
livePathGroup.clear();
|
|
const completedMaterial = new THREE.LineBasicMaterial({ color: 0xf0f0f0 });
|
|
const liveMaterial = new THREE.LineBasicMaterial({ color: 0xff6666 });
|
|
const traverseMaterial = new THREE.LineBasicMaterial({ color: 0x4d8080 });
|
|
const toView = (point: Point) => new THREE.Vector3(
|
|
(Number(point.x ?? 0) - center.x) * scale,
|
|
(Number(point.z ?? 0) - center.z) * scale,
|
|
(Number(point.y ?? 0) - center.y) * scale,
|
|
);
|
|
const arcPoints = (segment: Segment, start: Point, end: Point, centerPoint: Point, normal: Point) => {
|
|
const startVector = new THREE.Vector3(Number(start.x ?? 0) - Number(centerPoint.x ?? 0), Number(start.y ?? 0) - Number(centerPoint.y ?? 0), Number(start.z ?? 0) - Number(centerPoint.z ?? 0));
|
|
const endVector = new THREE.Vector3(Number(end.x ?? 0) - Number(centerPoint.x ?? 0), Number(end.y ?? 0) - Number(centerPoint.y ?? 0), Number(end.z ?? 0) - Number(centerPoint.z ?? 0));
|
|
const axis = new THREE.Vector3(Number(normal.x ?? 0), Number(normal.y ?? 0), Number(normal.z ?? 0));
|
|
if (!Number.isFinite(axis.length()) || axis.length() === 0 || startVector.length() === 0) return [toView(start), toView(end)];
|
|
axis.normalize();
|
|
let angle = Math.atan2(axis.dot(startVector.clone().cross(endVector)), startVector.dot(endVector));
|
|
const direction = Number(segment.turn ?? 1) < 0 ? -1 : 1;
|
|
if (Math.abs(angle) < 1e-8 && startVector.distanceTo(endVector) < 1e-7) angle = direction * Math.PI * 2;
|
|
else if (angle * direction < 0) angle += direction * Math.PI * 2;
|
|
const quaternion = new THREE.Quaternion();
|
|
const points: THREE.Vector3[] = [];
|
|
for (let index = 0; index <= 32; index += 1) {
|
|
const rotated = startVector.clone().applyQuaternion(quaternion.setFromAxisAngle(axis, angle * index / 32));
|
|
points.push(toView({ x: Number(centerPoint.x ?? 0) + rotated.x, y: Number(centerPoint.y ?? 0) + rotated.y, z: Number(centerPoint.z ?? 0) + rotated.z }));
|
|
}
|
|
return points;
|
|
};
|
|
for (const segment of segmentsRef.current) {
|
|
const start = segment.start ?? {}; const end = segment.end ?? {};
|
|
const points = segment.center && segment.normal && segment.motion_type === 2
|
|
? arcPoints(segment, start, end, segment.center, segment.normal)
|
|
: [toView(start), toView(end)];
|
|
const target = segment.active ? livePathGroup : pathGroup;
|
|
const material = segment.active ? liveMaterial : segment.motion_type === 0 || segment.rapid ? traverseMaterial : completedMaterial;
|
|
target.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), material));
|
|
}
|
|
if (layersRef.current.showLimits) {
|
|
const limits = new THREE.LineSegments(new THREE.EdgesGeometry(new THREE.BoxGeometry(5, 2, 3.5)), new THREE.LineBasicMaterial({ color: 0xd87d6c }));
|
|
limits.position.y = 0.9; overlayGroup.clear(); overlayGroup.add(limits);
|
|
} else overlayGroup.clear();
|
|
overlayGroup.visible = layersRef.current.showLimits || layersRef.current.showOffsets || layersRef.current.showExtents || layersRef.current.showVelocity;
|
|
const distance = 10 / Math.max(0.5, zoomRef.current);
|
|
const selectedView = viewRef.current;
|
|
if (selectedView === "z") camera.position.set(0, distance, 0.01);
|
|
else if (selectedView === "z2") camera.position.set(distance * 0.3, distance * 0.9, distance * 0.3);
|
|
else if (selectedView === "x") camera.position.set(distance, 2, 0.01);
|
|
else if (selectedView === "y") camera.position.set(0.01, 2, distance);
|
|
else if (selectedView === "y2") camera.position.set(0.01, 2, -distance);
|
|
else camera.position.set(6 / Math.max(0.5, zoomRef.current), 5 / Math.max(0.5, zoomRef.current), 7 / Math.max(0.5, zoomRef.current));
|
|
camera.lookAt(0, 0, 0);
|
|
scene.rotation.y = rotateRef.current ? (performance.now() / 5000) % (Math.PI * 2) : 0;
|
|
renderer.render(scene, camera);
|
|
frame = requestAnimationFrame(render);
|
|
};
|
|
render();
|
|
return () => { cancelAnimationFrame(frame); observer.disconnect(); renderer.dispose(); element.replaceChildren(); };
|
|
}, []);
|
|
|
|
const [x = 0, y = 0, z = 0] = axes;
|
|
const format = (value: number) => Number(value || 0).toFixed(3);
|
|
return <div className="three-viewer" ref={host} aria-label="AXIS source program backplot">
|
|
<pre className="axis-preview-hud" aria-label="AXIS preview coordinates">{`X: ${format(x)} DTG X: ${format(-x)}\nY: ${format(y)} DTG Y: ${format(-y)}\nZ: ${format(z)} DTG Z: ${format(-z)}\nG54 X: ${format(x)} G92 X: 0.000\nG54 Y: ${format(y)} G92 Y: 0.000\nG54 Z: ${format(z)} G92 Z: 0.000\nG54 R: 0.000\nTLO X: 0.000\nTLO Y: 0.000\nTLO Z: 0.000\nVel: 0.000`}</pre>
|
|
</div>;
|
|
}
|