Frontend/Three.js
재질, flatShading - 각지게 표현
wam
2024. 10. 16. 03:28
flatShading 속성
// MeshPhongMaterial, 상대적으로 덜 사실적
const material1 = new THREE.MeshPhongMaterial({
color: "orangered",
shininess: 800,
flatShading: true
});
// MeshStandardMaterial, 고품질의 사실적인 렌더링
const material2 = new THREE.MeshStandardMaterial({
color: "orangered",
roughness: 0.2,
metalness: 0.3,
flatShading: true
});
- flatShading 속성은 평면 셰이딩(Flat Shading)을 활성화할지 여부를 결정하는 Boolean 값이다.
- 이 값이 true로 설정되면, 각 면(Face)에 대해 개별적으로 정규 벡터가 계산되어 면이 평평하게 보이게 된다.
- 이때 각 삼각형의 면이 뚜렷하게 드러나기 때문에 물체가 더 각지게 보이게 된다.
- flatShading이 false일 경우(기본값), 모든 면에 대해 부드러운 셰이딩(Smooth Shading)이 적용되어 정점 간의 노멀 벡터를 보간해 부드러운 표면을 표현하게 된다.