Threejs系列--6阴影

序言

通过上一章灯光的了解，相信你对在实际业务中如何取舍已经有了自己的答案。本章将讲解灯光的阴影。

treejs提供了 LightShadow对象以及其子对象，可以使得我们非常方便的控制阴影。

点光源照射出的阴影

//构造函数
PointLightShadow( ) 
创建一个新的PointLightShadow。pointLight内部实现了相关调用，我们无需手动调用。

设置shadow前的效果

设置shadow后的效果

//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; //场景中使用阴影贴图

//添加光源
var light = new THREE.PointLight( 0xffffff, 1 , 1000);
light.position.set( 100,80,50 );
light.castShadow = true;   //设置投射阴影
scene.add( light );

//创建一个物体，用与显示与阴影投射
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;
sphere.receiveShadow = false;
scene.add( sphere );

//创建一个平面，用与呈现阴影
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 );

平行光照射出的阴影

//构造函数
DirectionalLightShadow( )   创建一个平行光阴影。

设置shadow前的效果

设置shadow后的效果

//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; //场景中使用阴影贴图

//添加光源
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 100,80,50 );
light.castShadow = true;   //设置投射阴影
scene.add( light );

//创建一个物体，用与显示与阴影投射
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;
sphere.receiveShadow = false;
scene.add( sphere );

//创建一个平面，用与呈现阴影
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 );

聚光灯照射出的阴影

//构造函数
SpotLightShadow( )   创建一个聚光灯阴影。

设置shadow前的效果

设置shadow后的效果

//创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; //场景中使用阴影贴图

//添加光源
var light = new THREE.SpotLight( 0xffffff );
light.position.set( 100,100,70 );
light.castShadow = true;   //设置投射阴影
scene.add( light );

//创建一个物体，用与显示与阴影投射
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;
sphere.receiveShadow = false;
scene.add( sphere );

//创建一个平面，用与呈现阴影
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 );

新手看这里

新手注意了，前面几章中，我大多情况仅仅放了部分核心代码，你如果是个新手，那么你要做的便是基础的了解，坚持下去，后面会有实战的环节。