221 lines
7.1 KiB
JavaScript
221 lines
7.1 KiB
JavaScript
import * as React from 'react';
|
|
import * as THREE from 'three';
|
|
import { useThree } from '@react-three/fiber';
|
|
import { Line } from '../../core/Line.js';
|
|
import { Html } from '../Html.js';
|
|
import { context } from './context.js';
|
|
|
|
const clickDir = /* @__PURE__ */new THREE.Vector3();
|
|
const intersectionDir = /* @__PURE__ */new THREE.Vector3();
|
|
const toDegrees = radians => radians * 180 / Math.PI;
|
|
const toRadians = degrees => degrees * Math.PI / 180;
|
|
const calculateAngle = (clickPoint, intersectionPoint, origin, e1, e2) => {
|
|
clickDir.copy(clickPoint).sub(origin);
|
|
intersectionDir.copy(intersectionPoint).sub(origin);
|
|
const dote1e1 = e1.dot(e1);
|
|
const dote2e2 = e2.dot(e2);
|
|
const uClick = clickDir.dot(e1) / dote1e1;
|
|
const vClick = clickDir.dot(e2) / dote2e2;
|
|
const uIntersection = intersectionDir.dot(e1) / dote1e1;
|
|
const vIntersection = intersectionDir.dot(e2) / dote2e2;
|
|
const angleClick = Math.atan2(vClick, uClick);
|
|
const angleIntersection = Math.atan2(vIntersection, uIntersection);
|
|
return angleIntersection - angleClick;
|
|
};
|
|
const fmod = (num, denom) => {
|
|
let k = Math.floor(num / denom);
|
|
k = k < 0 ? k + 1 : k;
|
|
return num - k * denom;
|
|
};
|
|
const minimizeAngle = angle => {
|
|
let result = fmod(angle, 2 * Math.PI);
|
|
if (Math.abs(result) < 1e-6) {
|
|
return 0.0;
|
|
}
|
|
if (result < 0.0) {
|
|
result += 2 * Math.PI;
|
|
}
|
|
return result;
|
|
};
|
|
const rotMatrix = /* @__PURE__ */new THREE.Matrix4();
|
|
const posNew = /* @__PURE__ */new THREE.Vector3();
|
|
const ray = /* @__PURE__ */new THREE.Ray();
|
|
const intersection = /* @__PURE__ */new THREE.Vector3();
|
|
const AxisRotator = ({
|
|
dir1,
|
|
dir2,
|
|
axis
|
|
}) => {
|
|
const {
|
|
rotationLimits,
|
|
annotations,
|
|
annotationsClass,
|
|
depthTest,
|
|
scale,
|
|
lineWidth,
|
|
fixed,
|
|
axisColors,
|
|
hoveredColor,
|
|
opacity,
|
|
onDragStart,
|
|
onDrag,
|
|
onDragEnd,
|
|
userData
|
|
} = React.useContext(context);
|
|
|
|
// @ts-expect-error new in @react-three/fiber@7.0.5
|
|
const camControls = useThree(state => state.controls);
|
|
const divRef = React.useRef(null);
|
|
const objRef = React.useRef(null);
|
|
const angle0 = React.useRef(0);
|
|
const angle = React.useRef(0);
|
|
const clickInfo = React.useRef(null);
|
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
const onPointerDown = React.useCallback(e => {
|
|
if (annotations) {
|
|
divRef.current.innerText = `${toDegrees(angle.current).toFixed(0)}º`;
|
|
divRef.current.style.display = 'block';
|
|
}
|
|
e.stopPropagation();
|
|
const clickPoint = e.point.clone();
|
|
const origin = new THREE.Vector3().setFromMatrixPosition(objRef.current.matrixWorld);
|
|
const e1 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 0).normalize();
|
|
const e2 = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 1).normalize();
|
|
const normal = new THREE.Vector3().setFromMatrixColumn(objRef.current.matrixWorld, 2).normalize();
|
|
const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, origin);
|
|
clickInfo.current = {
|
|
clickPoint,
|
|
origin,
|
|
e1,
|
|
e2,
|
|
normal,
|
|
plane
|
|
};
|
|
onDragStart({
|
|
component: 'Rotator',
|
|
axis,
|
|
origin,
|
|
directions: [e1, e2, normal]
|
|
});
|
|
camControls && (camControls.enabled = false);
|
|
// @ts-ignore
|
|
e.target.setPointerCapture(e.pointerId);
|
|
}, [annotations, camControls, onDragStart, axis]);
|
|
const onPointerMove = React.useCallback(e => {
|
|
e.stopPropagation();
|
|
if (!isHovered) setIsHovered(true);
|
|
if (clickInfo.current) {
|
|
const {
|
|
clickPoint,
|
|
origin,
|
|
e1,
|
|
e2,
|
|
normal,
|
|
plane
|
|
} = clickInfo.current;
|
|
const [min, max] = (rotationLimits == null ? void 0 : rotationLimits[axis]) || [undefined, undefined];
|
|
ray.copy(e.ray);
|
|
ray.intersectPlane(plane, intersection);
|
|
ray.direction.negate();
|
|
ray.intersectPlane(plane, intersection);
|
|
let deltaAngle = calculateAngle(clickPoint, intersection, origin, e1, e2);
|
|
let degrees = toDegrees(deltaAngle);
|
|
|
|
// @ts-ignore
|
|
if (e.shiftKey) {
|
|
degrees = Math.round(degrees / 10) * 10;
|
|
deltaAngle = toRadians(degrees);
|
|
}
|
|
if (min !== undefined && max !== undefined && max - min < 2 * Math.PI) {
|
|
deltaAngle = minimizeAngle(deltaAngle);
|
|
deltaAngle = deltaAngle > Math.PI ? deltaAngle - 2 * Math.PI : deltaAngle;
|
|
deltaAngle = THREE.MathUtils.clamp(deltaAngle, min - angle0.current, max - angle0.current);
|
|
angle.current = angle0.current + deltaAngle;
|
|
} else {
|
|
angle.current = minimizeAngle(angle0.current + deltaAngle);
|
|
angle.current = angle.current > Math.PI ? angle.current - 2 * Math.PI : angle.current;
|
|
}
|
|
if (annotations) {
|
|
degrees = toDegrees(angle.current);
|
|
divRef.current.innerText = `${degrees.toFixed(0)}º`;
|
|
}
|
|
rotMatrix.makeRotationAxis(normal, deltaAngle);
|
|
posNew.copy(origin).applyMatrix4(rotMatrix).sub(origin).negate();
|
|
rotMatrix.setPosition(posNew);
|
|
onDrag(rotMatrix);
|
|
}
|
|
}, [annotations, onDrag, isHovered, rotationLimits, axis]);
|
|
const onPointerUp = React.useCallback(e => {
|
|
if (annotations) {
|
|
divRef.current.style.display = 'none';
|
|
}
|
|
e.stopPropagation();
|
|
angle0.current = angle.current;
|
|
clickInfo.current = null;
|
|
onDragEnd();
|
|
camControls && (camControls.enabled = true);
|
|
// @ts-ignore
|
|
e.target.releasePointerCapture(e.pointerId);
|
|
}, [annotations, camControls, onDragEnd]);
|
|
const onPointerOut = React.useCallback(e => {
|
|
e.stopPropagation();
|
|
setIsHovered(false);
|
|
}, []);
|
|
const matrixL = React.useMemo(() => {
|
|
const dir1N = dir1.clone().normalize();
|
|
const dir2N = dir2.clone().normalize();
|
|
return new THREE.Matrix4().makeBasis(dir1N, dir2N, dir1N.clone().cross(dir2N));
|
|
}, [dir1, dir2]);
|
|
const r = fixed ? 0.65 : scale * 0.65;
|
|
const arc = React.useMemo(() => {
|
|
const segments = 32;
|
|
const points = [];
|
|
for (let j = 0; j <= segments; j++) {
|
|
const angle = j * (Math.PI / 2) / segments;
|
|
points.push(new THREE.Vector3(Math.cos(angle) * r, Math.sin(angle) * r, 0));
|
|
}
|
|
return points;
|
|
}, [r]);
|
|
return /*#__PURE__*/React.createElement("group", {
|
|
ref: objRef,
|
|
onPointerDown: onPointerDown,
|
|
onPointerMove: onPointerMove,
|
|
onPointerUp: onPointerUp,
|
|
onPointerOut: onPointerOut,
|
|
matrix: matrixL,
|
|
matrixAutoUpdate: false
|
|
}, annotations && /*#__PURE__*/React.createElement(Html, {
|
|
position: [r, r, 0]
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
display: 'none',
|
|
background: '#151520',
|
|
color: 'white',
|
|
padding: '6px 8px',
|
|
borderRadius: 7,
|
|
whiteSpace: 'nowrap'
|
|
},
|
|
className: annotationsClass,
|
|
ref: divRef
|
|
})), /*#__PURE__*/React.createElement(Line, {
|
|
points: arc,
|
|
lineWidth: lineWidth * 4,
|
|
visible: false,
|
|
userData: userData
|
|
}), /*#__PURE__*/React.createElement(Line, {
|
|
transparent: true,
|
|
raycast: () => null,
|
|
depthTest: depthTest,
|
|
points: arc,
|
|
lineWidth: lineWidth,
|
|
side: THREE.DoubleSide,
|
|
color: isHovered ? hoveredColor : axisColors[axis],
|
|
opacity: opacity,
|
|
polygonOffset: true,
|
|
polygonOffsetFactor: -10,
|
|
fog: false
|
|
}));
|
|
};
|
|
|
|
export { AxisRotator };
|