Fixture3D.tsx

import { useMemo } from 'react';
import * as THREE from 'three';
import { Edges } from '@react-three/drei';
import type { ThreeEvent } from '@react-three/fiber';
import type { Fixture } from '../../scene/schema';
import { describeFixture, SELECTED_COLOR, type Selected3D } from '../../scene/describe';
import type { UnitSystem } from '../../scene/units';

type Props = {
  fixture: Fixture;
  units: UnitSystem;
  selectedId: string | null;
  onSelect: (sel: Selected3D | null) => void;
};

export function Fixture3D({ fixture, units, selectedId, onSelect }: Props) {
  const desc = describeFixture(fixture, units);
  const onClick = (e: ThreeEvent<MouseEvent>) => {
    e.stopPropagation();
    onSelect({ id: fixture.id, ...desc, point: [e.point.x, e.point.y, e.point.z] });