Threejs 增加阴影的方法

admin

# Y; V: C+ @4 D9 M( w. u' P官方提供的实例如下
* ~( @7 h3 L, c* p7 I
& S- T/ B+ f6 n, z4 b: O1。 首先在Scene里面激活 渲染 ShadowMap
4 q, l  ~. c3 R3 p5 y//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

0 e3 T  l" _0 T/ 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 );
# A' m* ~) K" {* F& a" q+ `
//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 );
3 ~2 E' W% @: _! E3 `( C
" n3 R0 z4 i, w9 q! i* r& `  N4. 创建获取投影的平面 //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 );
2 D3 F: F/ W7 G# j$ F# [; L
" N  C: S) i4 k% N
* x+ M$ M4 M! j# W( h9 ]* u

: j# y* Q( H# s4 C效果如下！
+ b8 ?1 z1 X4 X% H2 O: E! W. }' n
2 o4 v0 G  {. f
1 J3 W8 S& r' K; |* K, \# Z
% l. c0 }7 G' S+ x