Refactor distance finding controls and move controls for improved functionality and performance
- Updated `getRoomsFromLines.ts` to filter valid line features before polygonization. - Enhanced `distanceFindingControls.tsx` to streamline measurement line updates and improve text label rendering. - Refactored `moveControls.tsx` to optimize event handling and asset movement logic, ensuring smoother interactions. - Adjusted `selectionControls.tsx` to safely parse stored floor items from local storage. - Commented out unused imports in `roboticArmInstances.tsx` for cleaner code. - Modified `polygonGenerator.tsx` to ensure only valid line features are processed for polygon generation.
This commit is contained in:
@@ -1,253 +1,270 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import { Vector3, Raycaster, BufferGeometry, LineBasicMaterial, Line, Object3D, Mesh } from "three";
|
||||
import React, { useRef } from "react";
|
||||
import {
|
||||
Vector3,
|
||||
Raycaster,
|
||||
BufferGeometry,
|
||||
LineBasicMaterial,
|
||||
Line,
|
||||
Mesh,
|
||||
Group,
|
||||
} from "three";
|
||||
import { useThree, useFrame } from "@react-three/fiber";
|
||||
import { Group } from "three";
|
||||
import { Html } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
|
||||
interface DistanceFindingControlsProps {
|
||||
boundingBoxRef: React.RefObject<Mesh>;
|
||||
boundingBoxRef: React.RefObject<Mesh>;
|
||||
object: number;
|
||||
}
|
||||
|
||||
const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProps) => {
|
||||
const { camera, scene } = useThree();
|
||||
const DistanceFindingControls = ({
|
||||
boundingBoxRef,
|
||||
object,
|
||||
}: DistanceFindingControlsProps) => {
|
||||
const { camera, scene } = useThree();
|
||||
|
||||
// Refs for measurement lines
|
||||
const line1 = useRef<Line>(null);
|
||||
const line2 = useRef<Line>(null);
|
||||
const line3 = useRef<Line>(null);
|
||||
const line4 = useRef<Line>(null);
|
||||
const line5 = useRef<Line>(null);
|
||||
|
||||
// Refs for measurement lines
|
||||
const line1 = useRef<Line>(null);
|
||||
const line2 = useRef<Line>(null);
|
||||
const line3 = useRef<Line>(null);
|
||||
const line4 = useRef<Line>(null);
|
||||
const line5 = useRef<Line>(null);
|
||||
// Refs for measurement text labels
|
||||
const textPosX = useRef<Group>(null);
|
||||
const textNegX = useRef<Group>(null);
|
||||
const textPosZ = useRef<Group>(null);
|
||||
const textNegZ = useRef<Group>(null);
|
||||
const textPosY = useRef<Group>(null);
|
||||
|
||||
// Refs for measurement text labels
|
||||
const textPosX = useRef<Group>(null);
|
||||
const textNegX = useRef<Group>(null);
|
||||
const textPosZ = useRef<Group>(null);
|
||||
const textNegZ = useRef<Group>(null);
|
||||
const textPosY = useRef<Group>(null);
|
||||
// Store line geometries to avoid recreation
|
||||
const lineGeometries = useRef({
|
||||
posX: new BufferGeometry(),
|
||||
negX: new BufferGeometry(),
|
||||
posZ: new BufferGeometry(),
|
||||
negZ: new BufferGeometry(),
|
||||
posY: new BufferGeometry(),
|
||||
});
|
||||
|
||||
// Store line geometries to avoid recreation
|
||||
const lineGeometries = useRef({
|
||||
posX: new BufferGeometry(),
|
||||
negX: new BufferGeometry(),
|
||||
posZ: new BufferGeometry(),
|
||||
negZ: new BufferGeometry(),
|
||||
posY: new BufferGeometry()
|
||||
});
|
||||
useFrame(() => {
|
||||
if (!boundingBoxRef?.current) return;
|
||||
|
||||
boundingBoxRef.current.geometry.computeBoundingBox();
|
||||
const bbox = boundingBoxRef.current.geometry.boundingBox;
|
||||
|
||||
useFrame(() => {
|
||||
if (!boundingBoxRef?.current) return;
|
||||
if (!bbox) return;
|
||||
|
||||
boundingBoxRef.current.geometry.computeBoundingBox();
|
||||
const bbox = boundingBoxRef.current.geometry.boundingBox;
|
||||
|
||||
if (!bbox) return;
|
||||
|
||||
const size = {
|
||||
x: bbox.max.x - bbox.min.x,
|
||||
y: bbox.max.y - bbox.min.y,
|
||||
z: bbox.max.z - bbox.min.z
|
||||
};
|
||||
|
||||
const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
|
||||
|
||||
if (!vec) return;
|
||||
updateLine({
|
||||
line: line1.current,
|
||||
geometry: lineGeometries.current.posX,
|
||||
direction: new Vector3(1, 0, 0), // Positive X
|
||||
angle: 'pos',
|
||||
mesh: textPosX,
|
||||
vec,
|
||||
size
|
||||
});
|
||||
updateLine({
|
||||
line: line2.current,
|
||||
geometry: lineGeometries.current.negX,
|
||||
direction: new Vector3(-1, 0, 0), // Negative X
|
||||
angle: 'neg',
|
||||
mesh: textNegX,
|
||||
vec,
|
||||
size
|
||||
});
|
||||
updateLine({
|
||||
line: line3.current,
|
||||
geometry: lineGeometries.current.posZ,
|
||||
direction: new Vector3(0, 0, 1), // Positive Z
|
||||
angle: 'pos',
|
||||
mesh: textPosZ,
|
||||
vec,
|
||||
size
|
||||
});
|
||||
updateLine({
|
||||
line: line4.current,
|
||||
geometry: lineGeometries.current.negZ,
|
||||
direction: new Vector3(0, 0, -1), // Negative Z
|
||||
angle: 'neg',
|
||||
mesh: textNegZ,
|
||||
vec,
|
||||
size
|
||||
});
|
||||
updateLine({
|
||||
line: line5.current,
|
||||
geometry: lineGeometries.current.posY,
|
||||
direction: new Vector3(0, -1, 0), // Down (Y)
|
||||
angle: 'posY',
|
||||
mesh: textPosY,
|
||||
vec,
|
||||
size
|
||||
});
|
||||
});
|
||||
|
||||
const updateLine = ({
|
||||
line,
|
||||
geometry,
|
||||
direction,
|
||||
angle,
|
||||
mesh,
|
||||
vec,
|
||||
size
|
||||
}: {
|
||||
line: Line | null,
|
||||
geometry: BufferGeometry,
|
||||
direction: Vector3,
|
||||
angle: string,
|
||||
mesh: React.RefObject<Group>,
|
||||
vec: Vector3,
|
||||
size: { x: number, y: number, z: number }
|
||||
}) => {
|
||||
if (!line) return;
|
||||
|
||||
const points = [];
|
||||
|
||||
if (angle === "pos") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).add(
|
||||
new Vector3((direction.x * size.x) / 2, 0, (direction.z * size.z) / 2)
|
||||
);
|
||||
} else if (angle === "neg") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
|
||||
new Vector3((-direction.x * size.x) / 2, 0, (-direction.z * size.z) / 2)
|
||||
);
|
||||
} else if (angle === "posY") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
|
||||
new Vector3(0, size.y / 2, 0)
|
||||
);
|
||||
}
|
||||
|
||||
const ray = new Raycaster();
|
||||
if (camera) ray.camera = camera;
|
||||
ray.set(new Vector3(vec.x, vec.y, vec.z), direction);
|
||||
ray.params.Line.threshold = 0.1;
|
||||
|
||||
// Find intersection points
|
||||
const wallsGroup = scene.children.find(val => val?.name.includes("Walls"));
|
||||
const intersects = wallsGroup ? ray.intersectObjects([wallsGroup], true) : [];
|
||||
|
||||
// Find intersection point
|
||||
if (intersects[0]) {
|
||||
for (const intersect of intersects) {
|
||||
if (intersect.object.name.includes("Wall")) {
|
||||
points[1] = angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update line geometry
|
||||
if (points[1]) {
|
||||
geometry.dispose();
|
||||
geometry.setFromPoints([points[0], points[1]]);
|
||||
line.geometry = geometry;
|
||||
|
||||
// Update measurement text
|
||||
if (mesh?.current) {
|
||||
geometry.computeBoundingSphere();
|
||||
const center = geometry.boundingSphere?.center;
|
||||
if (center) {
|
||||
mesh.current.position.copy(center);
|
||||
}
|
||||
const label = document.getElementById(mesh.current.name);
|
||||
if (label) {
|
||||
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No intersection found - clear the line
|
||||
geometry.dispose();
|
||||
geometry.setFromPoints([new Vector3(), new Vector3()]);
|
||||
line.geometry = geometry;
|
||||
const label = document.getElementById(mesh?.current?.name || "");
|
||||
if (label) label.innerText = "";
|
||||
}
|
||||
const size = {
|
||||
x: bbox.max.x - bbox.min.x,
|
||||
y: bbox.max.y - bbox.min.y,
|
||||
z: bbox.max.z - bbox.min.z,
|
||||
};
|
||||
|
||||
const Material = new LineBasicMaterial({ color: "red" });
|
||||
const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Measurement text labels */}
|
||||
{boundingBoxRef.current && (
|
||||
<>
|
||||
<group name="textPosX" ref={textPosX}>
|
||||
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
|
||||
<div className="distance-label" id="textPosX" style={{
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
color: 'white',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '3px',
|
||||
fontSize: '12px',
|
||||
whiteSpace: 'nowrap'
|
||||
}}></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textNegX" ref={textNegX}>
|
||||
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
|
||||
<div className="distance-label" id="textNegX" style={{
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
color: 'white',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '3px',
|
||||
fontSize: '12px',
|
||||
whiteSpace: 'nowrap'
|
||||
}}></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textPosZ" ref={textPosZ}>
|
||||
<Html zIndexRange={[2, 0]} style={{ pointerEvents: 'none' }}>
|
||||
<div className="distance-label" id="textPosZ" style={{
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
color: 'white',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '3px',
|
||||
fontSize: '12px',
|
||||
whiteSpace: 'nowrap'
|
||||
}}></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textNegZ" ref={textNegZ}>
|
||||
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
|
||||
<div className="distance-label" id="textNegZ" style={{
|
||||
background: 'rgba(0,0,0,0.7)',
|
||||
color: 'white',
|
||||
padding: '2px 5px',
|
||||
borderRadius: '3px',
|
||||
fontSize: '12px',
|
||||
whiteSpace: 'nowrap'
|
||||
}}></div>
|
||||
</Html>
|
||||
</group>
|
||||
if (!vec) return;
|
||||
updateLine({
|
||||
line: line1.current,
|
||||
geometry: lineGeometries.current.posX,
|
||||
direction: new Vector3(1, 0, 0), // Positive X
|
||||
angle: "pos",
|
||||
mesh: textPosX,
|
||||
vec,
|
||||
size,
|
||||
});
|
||||
updateLine({
|
||||
line: line2.current,
|
||||
geometry: lineGeometries.current.negX,
|
||||
direction: new Vector3(-1, 0, 0), // Negative X
|
||||
angle: "neg",
|
||||
mesh: textNegX,
|
||||
vec,
|
||||
size,
|
||||
});
|
||||
updateLine({
|
||||
line: line3.current,
|
||||
geometry: lineGeometries.current.posZ,
|
||||
direction: new Vector3(0, 0, 1), // Positive Z
|
||||
angle: "pos",
|
||||
mesh: textPosZ,
|
||||
vec,
|
||||
size,
|
||||
});
|
||||
updateLine({
|
||||
line: line4.current,
|
||||
geometry: lineGeometries.current.negZ,
|
||||
direction: new Vector3(0, 0, -1), // Negative Z
|
||||
angle: "neg",
|
||||
mesh: textNegZ,
|
||||
vec,
|
||||
size,
|
||||
});
|
||||
updateLine({
|
||||
line: line5.current,
|
||||
geometry: lineGeometries.current.posY,
|
||||
direction: new Vector3(0, -1, 0), // Down (Y)
|
||||
angle: "posY",
|
||||
mesh: textPosY,
|
||||
vec,
|
||||
size,
|
||||
});
|
||||
});
|
||||
|
||||
{/* Measurement lines */}
|
||||
<primitive object={new Line(new BufferGeometry(), Material)} ref={line1} />
|
||||
<primitive object={new Line(new BufferGeometry(), Material)} ref={line2} />
|
||||
<primitive object={new Line(new BufferGeometry(), Material)} ref={line3} />
|
||||
<primitive object={new Line(new BufferGeometry(), Material)} ref={line4} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
const updateLine = ({
|
||||
line,
|
||||
geometry,
|
||||
direction,
|
||||
angle,
|
||||
mesh,
|
||||
vec,
|
||||
size,
|
||||
}: {
|
||||
line: Line | null;
|
||||
geometry: BufferGeometry;
|
||||
direction: Vector3;
|
||||
angle: string;
|
||||
mesh: React.RefObject<Group>;
|
||||
vec: Vector3;
|
||||
size: { x: number; y: number; z: number };
|
||||
}) => {
|
||||
if (!line) return;
|
||||
|
||||
const points = [];
|
||||
|
||||
if (angle === "pos") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).add(
|
||||
new Vector3((direction.x * size.x) / 2, 0, (direction.z * size.z) / 2)
|
||||
);
|
||||
} else if (angle === "neg") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
|
||||
new Vector3((-direction.x * size.x) / 2, 0, (-direction.z * size.z) / 2)
|
||||
);
|
||||
} else if (angle === "posY") {
|
||||
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
|
||||
new Vector3(0, size.y / 2, 0)
|
||||
);
|
||||
}
|
||||
|
||||
const ray = new Raycaster();
|
||||
if (camera) ray.camera = camera;
|
||||
ray.set(new Vector3(vec.x, vec.y, vec.z), direction);
|
||||
ray.params.Line.threshold = 0.1;
|
||||
|
||||
// Find intersection points
|
||||
const wallsGroup = scene.children.find((val) =>
|
||||
val?.name.includes("Walls")
|
||||
);
|
||||
const intersects = wallsGroup
|
||||
? ray.intersectObjects([wallsGroup], true)
|
||||
: [];
|
||||
|
||||
// Find intersection point
|
||||
if (intersects[0]) {
|
||||
for (const intersect of intersects) {
|
||||
if (intersect.object.name.includes("Wall")) {
|
||||
points[1] =
|
||||
angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update line geometry
|
||||
if (points[1]) {
|
||||
geometry.dispose();
|
||||
geometry.setFromPoints([points[0], points[1]]);
|
||||
line.geometry = geometry;
|
||||
|
||||
// Update measurement text
|
||||
if (mesh?.current) {
|
||||
geometry.computeBoundingSphere();
|
||||
const center = geometry.boundingSphere?.center;
|
||||
if (center) {
|
||||
mesh.current.position.copy(center);
|
||||
}
|
||||
const label = document.getElementById(mesh.current.name);
|
||||
if (label) {
|
||||
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// No intersection found - clear the line
|
||||
geometry.dispose();
|
||||
geometry.setFromPoints([new Vector3(), new Vector3()]);
|
||||
line.geometry = geometry;
|
||||
const label = document.getElementById(mesh?.current?.name ?? "");
|
||||
if (label) label.innerText = "";
|
||||
}
|
||||
};
|
||||
|
||||
const Material = new LineBasicMaterial({ color: "#d2baff" });
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Measurement text labels */}
|
||||
{boundingBoxRef.current && object > 0 && (
|
||||
<>
|
||||
<group name="textPosX" ref={textPosX}>
|
||||
<Html
|
||||
wrapperClass="distance-text-wrapper"
|
||||
className="distance-text"
|
||||
zIndexRange={[1, 0]}
|
||||
style={{ pointerEvents: "none" }}
|
||||
>
|
||||
<div className="distance-label" id="textPosX"></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textNegX" ref={textNegX}>
|
||||
<Html
|
||||
wrapperClass="distance-text-wrapper"
|
||||
className="distance-text"
|
||||
zIndexRange={[1, 0]}
|
||||
style={{ pointerEvents: "none" }}
|
||||
>
|
||||
<div className="distance-label" id="textNegX"></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textPosZ" ref={textPosZ}>
|
||||
<Html
|
||||
wrapperClass="distance-text-wrapper"
|
||||
className="distance-text"
|
||||
zIndexRange={[2, 0]}
|
||||
style={{ pointerEvents: "none" }}
|
||||
>
|
||||
<div className="distance-label" id="textPosZ"></div>
|
||||
</Html>
|
||||
</group>
|
||||
<group name="textNegZ" ref={textNegZ}>
|
||||
<Html
|
||||
wrapperClass="distance-text-wrapper"
|
||||
className="distance-text"
|
||||
zIndexRange={[1, 0]}
|
||||
style={{ pointerEvents: "none" }}
|
||||
>
|
||||
<div className="distance-label" id="textNegZ"></div>
|
||||
</Html>
|
||||
</group>
|
||||
|
||||
{/* Measurement lines */}
|
||||
<primitive
|
||||
object={new Line(new BufferGeometry(), Material)}
|
||||
ref={line1}
|
||||
/>
|
||||
<primitive
|
||||
object={new Line(new BufferGeometry(), Material)}
|
||||
ref={line2}
|
||||
/>
|
||||
<primitive
|
||||
object={new Line(new BufferGeometry(), Material)}
|
||||
ref={line3}
|
||||
/>
|
||||
<primitive
|
||||
object={new Line(new BufferGeometry(), Material)}
|
||||
ref={line4}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DistanceFindingControls;
|
||||
export default DistanceFindingControls;
|
||||
|
||||
Reference in New Issue
Block a user