add: highlight broken repair parts during scan

This commit is contained in:
Tom Boullay
2026-05-08 02:16:13 +01:00
parent 7a3baa4c0b
commit 5c688fdaf7
5 changed files with 120 additions and 5 deletions
@@ -0,0 +1,56 @@
import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
interface RepairBrokenPartHighlightProps {
target: THREE.Object3D;
}
const _box = new THREE.Box3();
const _sphere = new THREE.Sphere();
const _worldPosition = new THREE.Vector3();
const _localPosition = new THREE.Vector3();
export function RepairBrokenPartHighlight({
target,
}: RepairBrokenPartHighlightProps): React.JSX.Element {
const groupRef = useRef<THREE.Group>(null);
useFrame(({ clock }) => {
const group = groupRef.current;
if (!group) return;
_box.setFromObject(target).getBoundingSphere(_sphere);
_worldPosition.copy(_sphere.center);
_localPosition.copy(_worldPosition);
group.parent?.worldToLocal(_localPosition);
group.position.copy(_localPosition);
const pulse = 1 + Math.sin(clock.elapsedTime * 5) * 0.08;
const radius = Math.max(_sphere.radius, 0.35) * pulse;
group.scale.setScalar(radius);
});
return (
<group ref={groupRef}>
<mesh>
<sphereGeometry args={[1, 32, 16]} />
<meshBasicMaterial color="#ef4444" transparent opacity={0.14} />
</mesh>
<mesh>
<sphereGeometry args={[1.06, 32, 16]} />
<meshBasicMaterial
color="#ef4444"
wireframe
transparent
opacity={0.65}
/>
</mesh>
<mesh rotation={[Math.PI / 2, 0, 0]}>
<torusGeometry args={[1.12, 0.025, 8, 96]} />
<meshBasicMaterial color="#dc2626" transparent opacity={0.9} />
</mesh>
</group>
);
}