Tom Boullay
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { useRef } from "react";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import * as THREE from "three";
|
|
|
|
interface RepairScanVisualProps {
|
|
target?: THREE.Object3D | null | undefined;
|
|
}
|
|
|
|
export function RepairScanVisual({
|
|
target = null,
|
|
}: RepairScanVisualProps): React.JSX.Element {
|
|
const groupRef = useRef<THREE.Group>(null);
|
|
const scanLineRef = useRef<THREE.Mesh>(null);
|
|
const worldPosition = useRef(new THREE.Vector3());
|
|
const localPosition = useRef(new THREE.Vector3());
|
|
|
|
useFrame(({ clock }) => {
|
|
const group = groupRef.current;
|
|
const scanLine = scanLineRef.current;
|
|
if (!group || !scanLine) return;
|
|
|
|
if (target) {
|
|
target.getWorldPosition(worldPosition.current);
|
|
localPosition.current.copy(worldPosition.current);
|
|
group.parent?.worldToLocal(localPosition.current);
|
|
group.position.copy(localPosition.current);
|
|
}
|
|
|
|
scanLine.position.y = 0.35 + Math.sin(clock.elapsedTime * 4) * 0.7;
|
|
});
|
|
|
|
return (
|
|
<group ref={groupRef}>
|
|
<mesh rotation={[Math.PI / 2, 0, 0]}>
|
|
<torusGeometry args={[1.35, 0.035, 12, 96]} />
|
|
<meshBasicMaterial color="#38bdf8" transparent opacity={0.75} />
|
|
</mesh>
|
|
<mesh ref={scanLineRef} rotation={[Math.PI / 2, 0, 0]}>
|
|
<ringGeometry args={[0.15, 1.25, 96]} />
|
|
<meshBasicMaterial
|
|
color="#7dd3fc"
|
|
side={THREE.DoubleSide}
|
|
transparent
|
|
opacity={0.45}
|
|
/>
|
|
</mesh>
|
|
<mesh position={[0, 0.85, 0]}>
|
|
<sphereGeometry args={[1.25, 32, 16]} />
|
|
<meshBasicMaterial color="#0ea5e9" transparent opacity={0.12} />
|
|
</mesh>
|
|
</group>
|
|
);
|
|
}
|