Materials

주요 메테리얼 종류 및 특징

1. MeshBasicMaterial

• 특징: 빛의 영향을 받지 않고, 단색으로만 표현됨.
• 용도: 테스트나 단순한 물체 표현에 적합.
• 구현

new THREE.MeshBasicMaterial({ color: 0xff0000 });

2. MeshNormalMaterial

• 특징: 카메라 방향에 따라 색상이 변하며, 표면의 법선(normal)을 시각적으로 확인 가능.
• 용도: 표면의 방향이나 구조를 확인할 때 유용.
• 구현

new THREE.MeshNormalMaterial({ flatShading: true });

3. MeshPhongMaterial

• 특징: 반사광과 주변광을 계산하며, MeshStandardMaterial보다 계산이 빠름.
• 용도: 고성능이 필요한 경우 사용.
• 구현

new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });

4. MeshStandardMaterial

• 특징: PBR(Physically Based Rendering) 기반으로 빛과 상호작용하여 사실적인 결과를 제공.
• 용도: 현대적인 환경에서 가장 많이 사용됨.
• 구현

new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.8 });

주요 코드 포인트 정리

Material 변경 사항 업데이트

function updateMaterial() {
    material.side = Number(material.side);
    material.needsUpdate = true;
}

• 메테리얼에 변경 사항이 발생하면 needsUpdate = true를 설정해야 렌더링에 반영됨.
• 단, visible과 opacity는 예외로 업데이트가 자동으로 처리됨.

GUI 설정

• dat.GUI를 활용해 런타임에서 메테리얼 속성을 변경 가능

const gui = new GUI();
const materialFolder = gui.addFolder('THREE.Material');
materialFolder.add(material, 'transparent').onChange(() => (material.needsUpdate = true));
materialFolder.add(material, 'opacity', 0, 1, 0.01);
materialFolder.add(material, 'side', { Front: THREE.FrontSide, Back: THREE.BackSide, Double: THREE.DoubleSide });

조명 추가

• MeshStandardMaterial과 MeshPhongMaterial은 빛의 영향을 받으므로 조명 설정이 필수

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

환경 맵

• MeshStandardMaterial은 환경 맵(Environment Map)을 설정하면 더욱 사실적인 표현 가능

const textureLoader = new THREE.CubeTextureLoader();
scene.environment = textureLoader.setPath('path/to/env/').load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']);

성능 고려 사항

1. MeshStandardMaterial

• 사실적이지만 계산량이 많아 성능이 중요한 프로젝트에서는 주의 필요.

2. MeshPhongMaterial

• 속도는 빠르지만 사실감이 떨어질 수 있음.

3. MeshNormalMaterial

• 디버깅용으로 적합.

결론

• 프로젝트 목적에 따라 메테리얼을 선택하는것을 배웠습니다.
• 조명과 환경 맵 설정을 적절히 활용하면 현실감을 높일 수 있습니다.
• 아산변원 프로젝트에서 GUI를 통해 동적으로 속성을 변경하면서 실험하는 것도 Three.js 학습에 큰 도움이 되었습니다.