three.js MeshStandardMaterial에 다양한 효과 입히기

const textureLoader = new THREE.TextureLoader(loadingManager);
const baseColorTex = textureLoader.load('base color texture 경로');
const ambientTex = textureLoader.load('ambient occlusion texture 경로');
const normalTex = textureLoader.load('normal texture 경로');
const roughnessTex = textureLoader.load('roughness texture 경로');
const heightTex = textureLoader.load('height texture 경로');

...

// Mesh
const geometry = new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshStandardMaterial({
    map: baseColorTex,
    roughness: 0.3,
    metalness: 0.3,
    normalMap: normalTex,
    roughnessMap: roughnessTex,
    aoMap: ambientTex,
    aoMapIntensity: 10,
    color: 'red',
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

MeshStandardMaterial에는 다양한 효과를 입힐 수 있다. 

map을 통해 base color texture를 입히거나, roughness, metalness 수치를 직접 설정가능하다.

normalMap에 normal texture를 입혀 texture의 입체감을 살릴 수 있고,

roughnessMap에 roughness texture를 입혀 texture 겉면의 거칠기를 표현할 수 있다.

aoMap으로 ambient occlusion texture를 입혀 빛을 적게 받는 주변광 부분들의 어두움을 표현할 수 있다. ambient occlusion의 경우 육안으로 확인하기 어렵다면, aoMapIntensity value를 조정함으로써 어두움 부분을 도드라지게 표현 가능하다.