three.js에서 shadow 표현 시 알아둘 점

1. WebGLReneder에서 shadow 사용을 활성화 해줘야 한다.

RENDERER.shadowMap.enabled = true;

 

2. light object와 shadow를 유발시키는 object에 castShadow를 활성화 해줘야 한다.

OBJECT.castShadow = true

 

3. shadow가 표현될 물체에 receiveShadow를 활성화 해줘야 한다.

OBJECT.receiveShadow = true;

 

** 참고 **

- 여러 Children Mesh를 보유한 Mesh의 경우 Parent Mesh에 castShadow나 receiveShadow를 활성화한다고 해서 표현되지 않는다. 하위 Mesh에서 활성화 해줘야 표현이 정상적으로 된다. Object3D의 method인 traverse를 사용하면 해당 오브젝트의 모든 깊이의 자식을 훑을 수 있다.

 

참고 예제 : http://jsfiddle.net/4Txgp/13/

Edit fiddle - JSFiddle - Code Playground