Threejs 增加阴影的方法

admin

& G0 |8 b! n+ R2 m$ I官方提供的实例如下
8 C" S' o; _0 @% A6 Z8 ^
1。 首先在Scene里面激活 渲染 ShadowMap
  R9 h/ v8 V# K4 m8 \+ j//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
, T: B6 \7 A3 @+ j  b- B
# \' |, x9 B& F2。 创建平行光，并可以投射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 );

& u! k1 H5 \; d1 I- ]//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
& z( c/ a% r9 J) Q
8 X  _0 b7 t/ P) i; C4 v3. 创建接受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 );

, [$ k. ^5 H; U! R& z1 r- {' \1 q/ I, k4. 创建获取投影的平面 //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 );
( ]; }6 Y! E6 }* O7 @


  O( Q) i- X/ k- I' d1 o- A
效果如下！
# U) C  J) i8 r( Q- z
5 U3 s% r/ K! P; z1 Z/ w
( Z. J: R( b& E