MeshNormalMaterial

Three.js에서 메쉬의 **법선 벡터(Normal Vector)**를 시각적으로 표현하는 재질(Material)입니다. 법선 벡터는 각 표면의 방향을 나타내며, MeshNormalMaterial은 이 벡터를 RGB 색상으로 변환하여 화면에 렌더링합니다. 주로 디버깅이나 시각적인 테스트를 위해 사용되며, 각 표면의 방향을 확인할 수 있습니다.

const material = new THREE.MeshNormalMaterial(parameters);

parameters: 옵션 객체로, 기본적으로 제공되는 속성(Property)을 수정할 수 있습니다. 이를 통해 재질의 기본적인 동작을 설정할 수 있습니다. 주요 속성은 다음과 같습니다.

 

• flatShading (기본값: false)
  • 면 단위로 평평한 음영을 적용할지 여부를 설정합니다. true로 설정하면 각 면이 평평하게 보이며 각 면의 법선 벡터가 동일하게 계산됩니다.
  • 기본적으로는 법선 벡터가 부드럽게 보간되는 smooth shading이 적용됩니다.
  • 예시: material.flatShading = true;
• wireframe (기본값: false)
  • 객체의 와이어프레임만을 렌더링할지 여부를 결정합니다. true로 설정하면, 면이 아닌 **모서리(edge)**만 렌더링됩니다.
  • 예시: material.wireframe = true;
• wireframeLinewidth (기본값: 1)
  • 와이어프레임이 렌더링될 때 선의 두께를 설정합니다. wireframe 속성이 true일 때만 적용됩니다.
  • 예시: material.wireframeLinewidth = 2;
• opacity (기본값: 1)
  • 재질의 불투명도를 설정합니다. 1은 완전히 불투명, 0은 완전히 투명입니다. transparent 속성이 true일 경우에만 적용됩니다.
  • 예시: material.opacity = 0.5;
• transparent (기본값: false)
  • 재질이 투명하게 렌더링될지 여부를 결정합니다. opacity와 함께 사용되며, true로 설정하면 재질이 투명하게 보일 수 있습니다.
  • 예시: material.transparent = true;
• side (기본값: THREE.FrontSide)
  • 메쉬의 어느 면을 렌더링할지 설정합니다.
    • THREE.FrontSide: 앞면만 렌더링 (기본값)
    • THREE.BackSide: 뒷면만 렌더링
    • THREE.DoubleSide: 앞면과 뒷면 모두 렌더링
  • 예시: material.side = THREE.DoubleSide;
• depthTest (기본값: true)
  • 깊이 테스트를 할지 여부를 설정합니다. 깊이 테스트는 객체들이 서로의 앞뒤에 위치할 때 올바르게 가려지도록 합니다.
  • 예시: material.depthTest = false;
• depthWrite (기본값: true)
  • 객체가 깊이 버퍼에 기록될지 여부를 설정합니다. 이를 통해 렌더링 순서에 따라 객체가 가려질지 결정됩니다.
  • 예시: material.depthWrite = false;
• visible (기본값: true)
  • 재질이 적용된 객체가 렌더링될지 여부를 설정합니다.
  • 예시: material.visible = false;

관련 메소드 (methods)

 

• copy(source):
  • 다른 MeshNormalMaterial로부터 설정을 복사합니다.
  • 예시: material.copy(otherMaterial);
• dispose():
  • 재질이 더 이상 필요하지 않을 때 메모리를 해제하기 위해 사용됩니다. Three.js는 GPU 메모리를 관리하지 않으므로, 사용하지 않는 재질은 직접 해제해야 합니다.
  • 예시: material.dispose();
• setValues(parameters):
  • 생성자에서 설정하는 parameters를 나중에 적용할 수 있습니다. 이를 통해 재질 속성을 동적으로 업데이트할 수 있습니다.

// 기본 MeshNormalMaterial 생성
const material = new THREE.MeshNormalMaterial({
  flatShading: true,
  wireframe: false,
  transparent: true,
  opacity: 0.8
});

// 기하학적 도형 생성
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 메쉬 생성 및 씬에 추가
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

MeshNormalMaterial

 

 

 

참고 : 법선 벡터 (Normal Vector)