230625 - Add `dat.GUI`

[dusunax]

230625 - Add dat.GUI

• [prev_230624] #13
• [task 5] #7
• dat.GUI : https://threejs.org/examples/webgl2_materials_texture3d.html
  • UI on screen that changes rendering properties.

🗂 Works 작업내용

[feat & ui] Add UI uses dat.GUI on screen that changes rendering properties.

---

[feat & ui] Add UI uses dat.GUI on screen that changes rendering properties. 📌

Import Dat.GUI

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min";

Add configs

• add guiConfig, defaultGuiConfig at frontend\src\components\threeViewer\Viewer.tsx

  const defaultGuiConfig: GuiConfig = {
  tolerance: 0,
  wireframe: isWireframe,
  color: "#f1eae5",
  light: 0.6,
  metalness: 0.1,
  roughness: 0.8,
  };
  const [guiConfig, setGuiConfig] = useState(defaultGuiConfig);

• add type at loader.ts

  export interface GuiConfig {
  tolerance: number;
  wireframe: boolean;
  color: string;
  light: number;
  metalness: number;
  roughness: number;
  }

GUI init 🙆‍♀️

function guiEditorInit(
  guiConfig: GuiConfig,
  setGuiConfig: Dispatch<SetStateAction<GuiConfig>>
): void {
  if (guiConfig === undefined || document.querySelector(".lil-gui")) return; // early return to avoid duplicate GUI appends.

    const gui = new GUI(); // create GUI
    gui.$title.innerText = "설정 ⚙ model configuration";
    gui
      .add(guiConfig, "wireframe", [true, false]) // array of properties => select & option
      .onFinishChange((value: boolean) =>
        setGuiConfig((prevState) => ({ ...prevState, wireframe: value })) // setState!🙂
      );
    gui
      .add(guiConfig, "light", 0, 1, 0.1) // number
      .onFinishChange((value: number) =>
        setGuiConfig((prevState) => ({ ...prevState, light: value }))
      );
    gui
      .add(guiConfig, "metalness", 0, 1, 0.1)
      .onFinishChange((value: number) =>
        setGuiConfig((prevState) => ({ ...prevState, metalness: value }))
      );
    gui
      .add(guiConfig, "roughness", 0, 1, 0.1)
      .onFinishChange((value: number) =>
        setGuiConfig((prevState) => ({ ...prevState, roughness: value }))
      );
    gui
      .addColor(guiConfig, "color") // use color picker
      .onFinishChange((value: string) =>
        setGuiConfig((prevState) => ({ ...prevState, color: value }))
      );

    // move the GUI to the top left corner
    const guiElement = gui.domElement;
    guiElement.style.position = "absolute";
    guiElement.style.top = "90px";
    guiElement.style.left = "10px";
}

Use guiCofing values

• use guiConfig values at handleGeometry()
• change MeshStandardMaterial to MeshPhysicalMaterial for use clearcoat and reflectivity

  // 재질
  const material = new THREE.MeshPhysicalMaterial({
  color: guiConfig.color,
  metalness: guiConfig.metalness, // 금속성
  roughness: guiConfig.roughness, // 거칠기
  clearcoat: 1.0, // 클리어 코트
  clearcoatRoughness: 0.5, // 클리어 코트의 거칠기
  reflectivity: 0.6, // 반사도
  });
  const mesh = new THREE.Mesh(geometry, material);

Add guiConfig to useEffect's dependency array.

• rerender when guiConfig's value change.

  useEffect(() => {
  const { current: container } = refContainer;
  if (!container) return;
  
  const { renderer, scene } = loadHandler({
  container,
  file,
  DEFAULT_FILE_PATH,
  isWireframe,
  guiConfig,
  setGuiConfig,
  });
  
  return () => {
  renderer && renderer.dispose();
  };
  }, [
  file,
  isWireframe,
  guiConfig.color, // each value as dependencies
  guiConfig.tolerance,
  guiConfig.wireframe,
  guiConfig.light,
  guiConfig.metalness,
  guiConfig.roughness,
  ]);

when guiConfig changes => setState for change UI

• button is still able for mode change.

  useEffect(() => {
  setIsWirefame(guiConfig.wireframe);
  }, [guiConfig]);

Result

1. wireframe mode

• set wireframe mode true to false

2. metarial color

• set metarial color with color picker

3. add metarial options

• add more options like metalness, roughness, light
• this additional options can use on MeshPhysicalMaterial

---

update

there is no change in the result even after applying the tolerance to BufferGeometryUtils's mergeVertices function, since the step_size value was added when dcm to ply converting using trimesh.

geometry = BufferGeometryUtils.mergeVertices(geometry, guiConfig.tolerance); // 해당 코드

[dusunax]

Close issue and move to the next documentation.

• [next_230627] #15