230611 - Handle three.js with tasks

[dusunax]

230611 - Handle three.js with tasks

learn how to use three.js features with 2 rendering tasks.
- tri mesh rendering
- raycasting with arcball

• 5

Task	Description	Status
B. tri mesh rendering	(1st phase) render model with only tri mesh	Completed (230611)
	(2nd phase) display the mesh by simplifying the faces	pending
C. raycasting with arcball	change camera position on screen	Completed (230611)

• [prev_230607] #6
• [feat] implement tri mesh view : rendering the mesh on wireframe (use MeshBasicMaterial options on three.js)
• [feat] implement raycasting view (use OrbitControls on three.js)

• [refactor] refactor PLYModel.tsx by seperate functions by features.

🗂 Works 작업내용

B. Tri mesh rendering

• reference: three.js examples

  C. Raycasting with arcball

  [refactor] refactor PLYModel.tsx

---

B. Tri mesh rendering 📌

• reference: three.js examples
• add basic material: border color with transparent mesh as wireframe for mesh.

  
  const material = new THREE.MeshStandardMaterial({
  color: "#fffcf1",
  });

// material as wireframe const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, transparent: true, opacity: 0.3, // add for solving issue (comment below) });

const mesh = new THREE.Mesh(geometry, material); const wireframe = new THREE.Mesh(geometry, wireframeMaterial); ... mesh.add(wireframe);

## Refactor `PLYModel.tsx` 📌

### refactor list
1. handler to return mesh
```tsx
const { mesh } = handleGeometry({ geometry });
const { mesh } = handleTriMesh({ geometry });

2. add render() function
   • handle camera, light, control, render method in three.js
3. use light holder

   
   // setting light
   var lightHolder = new THREE.Group();

var directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 0).normalize(); lightHolder.add(directionalLight);

const light = new THREE.AmbientLight("#FFF", 0.3); lightHolder.add(light);

scene.add(lightHolder);

4. add types for `loader`, `render mode state`
```tsx
export type RenderMode = "standard" | "wireframe";

export interface loadModelProps {
  renderer: THREE.WebGLRenderer;
  container: any;
  scene: THREE.Scene;
  renderType: RenderMode;
}

export interface loadModelByFile extends loadModelProps {
  plyFile: File;
}

export interface loadModelBySrc extends loadModelProps {
  plyPath: string;
}

5. add render mode state

   /** plyPath: 경로의 ply model을 load합니다. */
   function loadPLYModelBySrc({
   renderer,
   container,
   scene,
   plyPath,
   renderType,
   }: loadModelBySrc) {
   console.log("경로 로더");
   
   const loader = new PLYLoader();
   loader.load(plyPath, async (geometry) => {
   const { mesh } =
     renderType === "standard"
       ? handleGeometry({ geometry })
       : handleTriMesh({ geometry });
   render({ renderer, container, scene, geometry, mesh });
   });
   }

C. Raycasting with arcball 📌

• use OrbitControls on three.js
  • https://threejs.org/docs/#examples/en/controls/OrbitControls

• Constructor: OrbitControls( object : Camera, domElement : HTMLDOMElement )
• object: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.
• domElement: The HTML element used for event listeners.

const controls = new OrbitControls(camera, container);
controls.enableZoom = true;

[dusunax]

⛔ can't see wireframe ⛔

• when adding the wireframeMaterial on mesh, there was an issue where the wireframe was not appearing on the screen. seemed that when setting the color of the wireframe mesh, it appeared with the color of the entire mesh instead of the color of the lines.

  
  const material = new THREE.MeshStandardMaterial({
  color: "#fffcf1",
  });

// material as wireframe const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, transparent: true, });

const mesh = new THREE.Mesh(geometry, material); const wireframe = new THREE.Mesh(geometry, wireframeMaterial); ... mesh.add(wireframe);

<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/43c5552a-0f0c-4ed2-a652-542c055cc133" width="700px">
<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/7f406bf8-0bf9-4b0e-8d94-af7ed0e77b5d" width="300px">

- appeared that when changing the color, the entire mesh's color was affected

## Zoom in 🔍
- while observing the screen with OrbitControls, discovered the cause of the issue when zooming in. 
- The triangles' faces were too small, causing the lines to overlap and appear as faces.

<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/19edd38d-489b-4eb8-9596-07a8ea410dcf" width="700px">

## add opacity
- added opacity to make the overlapping lines appear lighter. 

<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/a1edcd9c-0d36-4e82-bae3-219b6ffeb0d9" width="500px">
<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/5404381c-637b-42e1-b9ea-b03106aaf348" width="500px">

<img src="https://github.com/dusunax/dicom-viewer/assets/94776135/64bb1a57-9c37-429d-b4cb-390b171590c0" width="700px">

## to be continue...
- however, setting opacity did not completely resolve the issue. 
  also looking into the way to display the mesh by simplifying the faces.

[dusunax]

Close issue and move to the next documentation.

• [next_230613] #9