three.js Material - MeshStandardMaterial

const material1 = new THREE.MeshPhongMaterial({
    color: 'orangered',
    shininess: 100,
});
const material2 = new THREE.MeshStandardMaterial({
    color: 'orangered',
    roughness: 0.3,
    metalness: 0.3  ,
});

MeshStandardMaterial은 MeshPhongMaterial처럼 하이트와 반사광을 표현할 수 있으나 설정할 수 있는 옵션값이 다르다.

MeshStandardMaterial은 유니티와 같은 엔진에서 셰이더를 다루는 것 처럼 roughness와 metalness를 조정할 수 있다.

 

const material1 = new THREE.MeshPhongMaterial({
    color: 'orangered',
    shininess: 800,
    flatShading: true,
});
const material2 = new THREE.MeshStandardMaterial({
    color: 'orangered',
    roughness: 0.3,
    metalness: 0.3,
    flatShading: true,
});

공통적으로 flatShading으로 shading을 pixel단위로 보간하지 않고 면에 따라 동일하게 표현할 수 있다.