Threejs 增加阴影的方法

admin

+ `, ~' j4 j  H4 s9 w8 W, b
) u- P8 i7 g& E  G6 m8 t1 Q. E官方提供的实例如下
- _' e* n) {, `
+ |- b3 o, x4 ]7 S) j! v1。 首先在Scene里面激活 渲染 ShadowMap
3 G* o( t( q& _1 A  |//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
: k& F( ?8 K7 b$ W" B6 D
- {9 M6 q! N1 H; h' I, E" g/ d2。 创建平行光，并可以投射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 );

* J! J/ P- j4 W* L//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 );
" Z! U$ H0 }0 ]" f  b
8 ~/ ~+ k- l2 r# ^( c. T4. 创建获取投影的平面 //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 );
. p7 ?. z1 Z! O/ b
5 r9 K1 `  J+ K7 z. s3 _
; k* Z0 i3 H5 Y$ l% j0 h
. [; R9 d$ P8 Z
效果如下！
  X/ S/ n! M& l5 ]1 L' u) o2 i

; `) l8 ^5 }: p  V6 d