three.js 그림자 집어넣기

renderer.shadowMap.enabled = true;

light.castShadow = true;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.radius = 5;

먼저 render상에서 그림자를 사용하려면 shadowMap enabled 설정을 true로 해야하고,

light 객체의 castShadow를 true로 설정하여 그림자를 넣을 수 있다. castShadow는 다른 물체에 영향을 줄 수 있는가의 여부와 관련되어있다. 다른 물체로부터 영향을 받아 그림자를 물체 위에 그릴 것인지는 receiveShadow에 대한 이야기다.

 

또한 shadow mapSize의 크기에 따라 그림자의 퀄리티를 설정할 수 있고, radius 설정으로 blur처리를 할 수 있다. 

 

plane.receiveShadow = true;
box.castShadow = true;
box.receiveShadow = true;
sphere.castShadow = true;
sphere.receiveShadow = true;

예를 들어 위 코드와 같이 물체의 그림자가 plane에 생성된다고 한다면, 물체는 castShadow를 plane은 receiveShadow를 가지고 있어야한다. 

 

// renderer.shadowMap.type = THREE.PCFShadowMap;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

shadowMap의 type을 설정할 수 있다. default는 PCFShadowMap이다. 

BasicShadowMap type은 shadowMap size를 조정함에 따라 그림자의 픽셀화 느낌을 살릴 수 있다. 

PCFSoftShadowMap은 조금 더 부드러운 느낌을 준다.

 

light.shadow.camera.near = 1;
light.shadow.camera.far = 5;

그림자도 거리에 따라서 렌더링할지 결정할 수 있다.

그림자를 렌더링하는 카메라 frustrum의 near와 far를 설정할 수 있다.