Threejs 增加阴影的方法

admin

5 G2 c2 y0 ?$ c3 x: d/ A% `& D
官方提供的实例如下
- d6 V! h% z4 [+ B8 ]1 r1 Q
3 ?0 p' K1 g6 O# o" U% `) c8 q1。 首先在Scene里面激活 渲染 ShadowMap
//Create a WebGLRenderer and turn on shadows in the renderervar renderer = new THREE.WebGLRenderer();renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
% y9 m. r1 V! W8 J/ y6 m3 z% }; P8 |
2。 创建平行光，并可以投射Shadow//Create a DirectionalLight and turn on shadows for the lightvar light = new THREE.DirectionalLight( 0xffffff, 1, 100 );light.position.set( 0, 1, 0 );                         //default; light shining from toplight.castShadow = true;            // default falsescene.add( light );
$ P) B$ X6 |) E/ Y' Z
! Y( K6 k& Z6 q3 {/ T  b//Set up shadow properties for the lightlight.shadow.mapSize.width = 512;  // defaultlight.shadow.mapSize.height = 512; // defaultlight.shadow.camera.near = 0.5;    // defaultlight.shadow.camera.far = 500;     // default

3. 创建接受shadow的物体 //Create a sphere that cast shadows (but does not receive them)var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );sphere.castShadow = true; //default is falsesphere.receiveShadow = false; //defaultscene.add( sphere );
: c( }4 ^! }& j+ Y1 x' o, a) v/ z" A
. a! V9 v* n1 }* k. z* z4. 创建获取投影的平面 //Create a plane that receives shadows (but does not cast them)var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )var plane = new THREE.Mesh( planeGeometry, planeMaterial );plane.receiveShadow = true;scene.add( plane );//Create a helper for the shadow camera (optional)var helper = new THREE.CameraHelper( light.shadow.camera );scene.add( helper );

" z8 q" ^8 V& h; Y
' D7 ]+ j" r9 {
0 ]* l& h# l9 l% g
* @$ ^# y6 X/ P# g效果如下！
. j, f, X; U! @# P: r. K: q
, d& |+ i1 f$ K! _9 F
9 S( ?0 w. G# y" e! y# C2 ^2 u, v2 Z
4 n  ~# L/ e6 ^( u, X/ F. E1 U