Function CameraMatches

src/components/viewer3d/CameraMatches.tsx:17–87

()

import { useCameraMatchesStoreFacade } from './useCameraMatchesStoreFacade';

export function CameraMatches() {
  const { reconstruction } = useCameraMatchesStoreFacade();

  const cameras = useCamerasNode();
  const selection = useSelectionNode();
  const matches = useMatchesNode();

  const { selectedImageId } = selection;
  const { displayMode: cameraDisplayMode } = cameras;
  const {
    visible: showMatches,
    displayMode: matchesDisplayMode,
    opacity: matchesOpacity,
    color: matchesColor,
    lineWidth: matchesLineWidth,
  } = matches;

  const blinkPhaseRef = useRef(0);

  const linePositions = useMemo(() => buildCameraMatchLinePositions({
    reconstruction,
    selectedImageId,
    showMatches,
    cameraDisplayMode,
  }), [reconstruction, selectedImageId, showMatches, cameraDisplayMode]);

  const fatLines = useMemo(() => {
    if (!linePositions) return null;
    return createFatLineSegmentsObject({
      positions: linePositions,
      lineWidth: 1,
      depthTest: false,
      depthWrite: false,
      renderOrder: 999,
    });
  }, [linePositions]);

  useEffect(() => {
    if (!fatLines) return undefined;
    return () => disposeFatLineSegmentsObject(fatLines);
  }, [fatLines]);

  useLayoutEffect(() => {
    if (!fatLines) return;
    syncMaterialColor(fatLines.material, matchesColor);
    syncMaterialLineWidth(fatLines.material, matchesLineWidth);
    syncMaterialOpacity(fatLines.material, getMatchesDisplayOpacity(
      matchesOpacity,
      matchesDisplayMode,
      blinkPhaseRef.current
    ));
  }, [fatLines, matchesColor, matchesLineWidth, matchesOpacity, matchesDisplayMode]);

  useFrame((_, delta) => {
    if (!showMatches || !fatLines) return;

    if (matchesDisplayMode === 'blink') {
      blinkPhaseRef.current = (blinkPhaseRef.current + delta) % 2;