230624 - Custom hook refactor: ply viewer

[dusunax]

230624 - Custom hook refactor: ply viewer

• [prev_230622] #11
• separate file loading & viewer implementation in component into custom hooks

🗂 Works 작업내용

[refactor] separate functionalities in compoenet PlyModel.tsx to usePlyViewer.ts

[refactor] organize related types and files.

---

1. separate functionalities in compoenet PlyModel.tsx to usePlyViewer.ts 📌

• usePlyViewer.ts

function usePlyViewer(): {
  initialize: (container: HTMLDivElement) => {
      renderer: THREE.WebGLRenderer;
      scene: THREE.Scene;
  };
  loadHandler: ({ container, file, DEFAULT_PLY_FILE_PATH, renderMode: renderType, mergeRange, }: LoadHandlerProps) => {
      renderer: THREE.WebGLRenderer;
  };
  loadPLYModelByFile: ({ renderer, container, scene, modelFile, renderMode: renderType, mergeRange, }: LoadModelByFile) => void;
  loadPLYModelBySrc: ({ renderer, container, scene, plyPath, renderMode: renderType, mergeRange, }: LoadModelBySrc) => void;
}

• Ply.tsx

export default function Ply({...}) {
  const refContainer = useRef<HTMLDivElement | null>(null);
  const DEFAULT_PLY_FILE_PATH = "/models/converted/mesh-step2.ply";

  const { loadHandler } = usePlyViewer();

  useEffect(() => {
    const { current: container } = refContainer;
    if (!container) return;

    const { renderer } = loadHandler({
      container,
      file,
      DEFAULT_PLY_FILE_PATH,
      renderMode,
      mergeRange,
    });

    return () => {
      renderer && renderer.dispose();
    };
  }, [file, renderMode, mergeRange, setLoading]);

  return <div ref={refContainer} />;
}

2. organize related types and files. 📌

• frontend\src\types\loader.ts

export type RenderMode = "standard" | "wireframe";

export interface OptionalConfig {
  renderMode?: RenderMode;
  mergeRange?: number;
}

export interface LoadHandlerProps extends OptionalConfig {
  container: HTMLDivElement;
  file: File | null;
  DEFAULT_PLY_FILE_PATH: string;
}

export interface LoadModelProps extends OptionalConfig {
  container: HTMLDivElement;
  renderer: THREE.WebGLRenderer;
  scene: THREE.Scene;
}

export interface LoadModelByFile extends LoadModelProps {
  modelFile: File;
}

export interface LoadModelBySrc extends LoadModelProps {
  plyPath: string;
}

export interface LoadVolumeBySrc extends LoadModelProps {
  volumePath: string;
}

---

todo 📚

• add Dat.GUI from three.js on the screen for configuring attributes, instead of using React state.
• https://sbcode.net/threejs/dat-gui/

in progress... ⏱

• rendering .nrrd file into volume.
  • Three.js reference : https://threejs.org/examples/webgl2_materials_texture3d.html

[dusunax]

Close issue and move to the next documentation.

• [next_230625] #14