[카테고리:] Three.JS

어떤 유리를 보면 유리의 내부에서 마치 프리즘처럼 빛이 산란되어 보이는 경우가 있습니다. 유리를 마냥 투명하게만 표현하면 간혹 있는지 없는지스러운 느낌없는 느낌으로 표현되고 마는데요. 이때를 위해 재질의 속성 중 dispersion을 활용할 수 있습니다. 이 속성은 오직 MeshPhysicalMaterial에서만 제공된다는 안타까운 점은 있지만 유리와 같은 재질은 한두개만 만들어두고 재활용하는 경우가 대부분이므로 충분히 활용할만합니다.

아래 이미지는 dispersion에 대한 값 변화에 따른 표현입니다. (이미지 출처: three.js examples)

번외로 흔히 손쉽지만 매우 효과적인 광원으로 HDRi를 사용하는데요. 이는 정적인 데이터 파일을 이용하는 경우고 데이터 없이 이와 유사한 광원을 만들어 내는 방법이 있습니다. 바로 RoomEnvironment 확장 기능인데요. 이 클래스는 Scene을 상속받는 것으로 Scene으로 구성된 내용으로 PMREM 데이터(환경맵 데이터의 한 종류)를 생성할 수 있습니다. 이에 대해 관련된 코드는 다음과 같습니다. 즉, 아래의 코드가 있다면 별도의 광원이 필요하지 않습니다. 단, 그림자 표현을 위해서는 별도의 광원이 필요합니다.

const environment = new RoomEnvironment(this._renderer);
const pmremGenerator = new THREE.PMREMGenerator(this._renderer);
const env = pmremGenerator.fromScene(environment).texture;
this._scene.background = env;
this._scene.environment = env;
this._scene.backgroundBlurriness = 0.5;
environment.dispose();