brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

did some refactoring so the node and cable data is computed in the data layer so that it is accessible by anything in the bin to make way for a heatmap

Browse source
This commit is contained in:
csawatzky 2026-04-16 16:27:08 -06:00
parent ff64f8594c
commit 6c87ed03ed
13 changed files with 572 additions and 363 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/3dModels/CameraControls/OrbitCameraControls.tsx
View file

@ -26,9 +26,9 @@ interface Props {
export default function OrbitCameraControls(props: Props) {
const { target, clampVerticalRotation, minPhi = 0.01, maxPhi = Math.PI - 0.01 } = props;
const { camera, gl } = useThree();
const panPlane = useRef(new Plane());
const panStartPoint = useRef(new Vector3());
const raycaster = useRef(new Raycaster());
// const panPlane = useRef(new Plane());
// const panStartPoint = useRef(new Vector3());
// const raycaster = useRef(new Raycaster());
const mouse = useRef(new Vector2());
const targetRef = useRef({
x: target?.x ?? 0,
@ -39,6 +39,7 @@ export default function OrbitCameraControls(props: Props) {
const isDragging = useRef(false);
const isPanning = useRef(false);
const lastPos = useRef({ x: 0, y: 0 });
const panCameraPosition = useRef(new Vector3());
// Spherical coords
const spherical = useRef({
@ -57,7 +58,11 @@ export default function OrbitCameraControls(props: Props) {
const y = radius * Math.cos(phi);
const z = radius * Math.sin(phi) * Math.cos(theta);
camera.position.set(x, y, z);
camera.position.set(
targetRef.current.x + x,
targetRef.current.y + y,
targetRef.current.z + z
);
camera.lookAt(
targetRef.current.x,
targetRef.current.y,
@ -71,6 +76,7 @@ export default function OrbitCameraControls(props: Props) {
if (e.target !== canvas) return;
lastPos.current = { x: e.clientX, y: e.clientY };
panCameraPosition.current.copy(camera.position);
// Left click = rotate
if (e.button === 0) {
@ -87,28 +93,29 @@ export default function OrbitCameraControls(props: Props) {
const camDir = new Vector3();
camera.getWorldDirection(camDir);
panPlane.current.setFromNormalAndCoplanarPoint(
camDir,
new Vector3(
targetRef.current.x,
targetRef.current.y,
targetRef.current.z
)
);
// panPlane.current.setFromNormalAndCoplanarPoint(
// camDir,
// new Vector3(
// targetRef.current.x,
// targetRef.current.y,
// targetRef.current.z
// )
// );
// const rect = canvas.getBoundingClientRect();
// raycaster.current.setFromCamera(
// new Vector2(
// ((e.clientX - rect.left) / rect.width) * 2 - 1,
// -((e.clientY - rect.top) / rect.height) * 2 + 1
// ),
// camera
// );
// starting intersection point
raycaster.current.setFromCamera(
new Vector2(
(e.clientX / window.innerWidth) * 2 - 1,
-(e.clientY / window.innerHeight) * 2 + 1
),
camera
);
raycaster.current.ray.intersectPlane(
panPlane.current,
panStartPoint.current
);
// raycaster.current.ray.intersectPlane(
// panPlane.current,
// panStartPoint.current
// );
}
};
@ -132,28 +139,61 @@ export default function OrbitCameraControls(props: Props) {
}
// PAN
// if (isPanning.current) {
// const rect = canvas.getBoundingClientRect();
// mouse.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
// mouse.current.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
// const currentPoint = new Vector3();
// const tempCamera = camera.clone();
// tempCamera.position.copy(panCameraPosition.current);
// tempCamera.updateMatrixWorld();
// raycaster.current.setFromCamera(mouse.current, tempCamera);
// raycaster.current.ray.intersectPlane(panPlane.current, currentPoint);
// const delta = new Vector3().subVectors(
// panStartPoint.current,
// currentPoint
// );
// targetRef.current.x += delta.x;
// targetRef.current.y += delta.y;
// targetRef.current.z += delta.z;
// panStartPoint.current.copy(currentPoint);
// }
if (isPanning.current) {
const raycaster = new Raycaster();
const deltaX = e.clientX - lastPos.current.x;
const deltaY = e.clientY - lastPos.current.y;
mouse.current.x = (e.clientX / window.innerWidth) * 2 - 1;
mouse.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
// distance-based scaling (important for consistent feel)
const distance = spherical.current.radius;
raycaster.setFromCamera(mouse.current, camera);
const panSpeed = 0.002 * distance;
const currentPoint = new Vector3();
const offset = new Vector3();
raycaster.ray.intersectPlane(panPlane.current, currentPoint);
// get camera basis vectors
const right = new Vector3();
const up = new Vector3();
const delta = new Vector3().subVectors(
panStartPoint.current,
currentPoint
);
camera.getWorldDirection(offset); // forward
right.crossVectors(offset, camera.up).normalize(); // right
up.copy(camera.up).normalize();
targetRef.current.x += delta.x;
targetRef.current.y += delta.y;
targetRef.current.z += delta.z;
// apply movement
right.multiplyScalar(-deltaX * panSpeed);
up.multiplyScalar(deltaY * panSpeed);
panStartPoint.current.copy(currentPoint);
const pan = new Vector3().addVectors(right, up);
targetRef.current.x += pan.x;
targetRef.current.y += pan.y;
targetRef.current.z += pan.z;
}
lastPos.current = { x: e.clientX, y: e.clientY };