three.js 光源、光源辅助对象和阴影简介

Three.js 光源对物体的影响

实际生活中物体表面的明暗效果是会受到光照的影响，比如晚上不开灯，你就看不到物体，灯光比较暗，物体也比较暗。在threejs中，咱们用网格模型Mesh模拟生活中物体，所以threejs中模拟光照Light对物体表面的影响，就是模拟光照Light对网格模型Mesh表面的影响。

threejs提供的网格材质，有的受光照影响，有的不受光照影响。

光源简介

当使用漫反射网格材质MeshLambertMaterial时，会受到光线的影响， 我们代码里面如果没有设置光线，则使用漫反射网格材质MeshLambertMaterial修饰的模型不可见，这个时候，我们添加光线后，便可以看见。

three.js提供了很多模拟生活中光源的API。

光源特点：

点光源PointLight

点光源PointLight从一个点向各个方向发射的光源。可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。

PointLight( color, intensity, distance, decay )

• color：光源颜色。默认为白色（0xffffff）。
• intensity：光照强度。默认值为 1。
• distance：光源照射的最大距离。默认值为 0（无限远）。
• decay：沿着光照距离的衰退量。默认值为 2。

const pointLight = new THREE.PointLight(0xff0000, 1, 100);
// 设置点光源位置
pointLight.position.set(50, 50, 50);
// 将点光源添加到场景中
scene.add(pointLight);

除了通过THREE.PointLight的参数设置，还可以通过属性设置光照相关参数。

pointLight.intensity = 1.0; // 光照强度
pointLight.decay = 0.0; // 设置光源不随距离衰减

点光源辅助对象PointLightHelper

// 光源辅助观察 pointLight模拟光源，10辅助对象尺寸
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

环境光AmbientLight

环境光AmbientLight环境光会均匀的照亮场景中的所有物体。它没有特定方向，只是整体改变场景光照明暗。

AmbientLight(color, intensity)

• color：光源颜色。默认为白色（0xffffff）。
• intensity：光照强度。默认值为 1。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
// 将环境光添加到场景中
scene.add(ambientLight);

平行光DirectionalLight

平行光DirectionalLight是沿着特定方向发射的光。这种光的表现像是无限远，从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

DirectionalLight(color, intensity)

• color：光源颜色。默认为白色（0xffffff）。
• intensity：光照强度。默认值为 1。

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
// 设置光源方向
directionalLight.position.set(80, 100, 50);
// 将平行光添加到场景中
scene.add(directionalLight);

可以通过设置.target属性指定目标，可以不设置，默认的位置是0,0,0。

// 方向光指向对象网格模型mesh
directionalLight.target = mesh;

平行光阴影

1.模型阴影投射

通过.castShadow设置产生阴影的模型对象。

// 设置产生投影的网格模型
mesh.castShadow = true;

2.光源阴影投射

和产生阴影的模型一样，光源也有阴影投射属性.castShadow属性，光源默认不产生阴影，需要代码开启。通过.castShadow设置产生阴影的光源对象。

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 平行光设置产生阴影的光源对象,开启光源阴影的计算功能
directionalLight.castShadow = true;

3.模型阴影接收

通过.receiveShadow设置接收阴影效果的模型。

// 设置接收阴影的投影面
mesh.receiveShadow = true;

4.允许渲染器阴影渲染。

webGL的渲染器的阴影贴图属性.shadowMap的属性值是一个对象，.shadowMap具有.enabled、.type等属性。

// 设置渲染器，允许光源阴影渲染
renderer.shadowMap.enabled = true; 

5.设置光源阴影渲染范围

平行光阴影相机属性.shadow.camera的作用是约束三位场景阴影计算范围，属性值是一个正投影相机对象OrthographicCamera。所以.shadow.camera属性的用法可以参考正投影相机对象OrthographicCamera。

// 设置三维场景计算阴影的范围
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 600;

平行光辅助对象DirectionalLightHelper

// 可视化平行光，directionalLight被模拟的光源，5平面尺寸，0xff0000光源颜色
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
scene.add(directionalLightHelper);

平行光照射到网格模型Mesh表面，光线和模型表面构成一个入射角度，入射角度不同，对光照的反射能力不同。
光线照射到漫反射网格材质MeshLambertMaterial对应Mesh表面，Mesh表面对光线反射程度与入射角大小有关。

// 对比不同入射角，mesh表面对光照的反射效果
directionalLight.position.set(100, 0, 0);
directionalLight.position.set(0, 100, 0);
directionalLight.position.set(100, 100, 100);
directionalLight.position.set(100, 60, 50);

聚光灯SpotLight

聚光灯SpotLight光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。

SpotLight(color, intensity, distance, angle, penumbra, decay)

• color：光源颜色。默认为白色（0xffffff）。
• intensity：光照强度。默认值为 1。
• distance：光源照射的最大距离。默认值为 0（无限远）。
• angle：光线照射范围的角度。默认值为Math.PI/3。
• penumbra：聚光锥的半影衰减百分比。默认值为 0。
• decay：沿着光照距离的衰减量。默认值为 2。

const spotLight = new THREE.SpotLight(0xffffff,1.0);
// 设置聚光光源位置
spotLight.position.set(0, 50, 0);
// 将聚光灯添加到场景中
scene.add(spotLight);

除了通过THREE.SpotLight的参数设置，还可以通过属性设置光照相关参数。

spotLight.intensity = 1.0; // 光照强度
spotLight.decay = 0.0; // 设置光源不随距离衰减
spotLight.angle = Math.PI / 6; // 设置聚光光源发散角度，光锥角度的二分之一

聚光源目标对象.target和光源的位置.position共同确定聚光源照射方向。聚光源目标对象属性的位置通过属性值Object3D的.position属性设置

// spotLight.target是一个模型对象Object3D，默认在坐标原点
spotLight.target.position.set(50,0,0);
//spotLight.target添加到场景中.target.position才会起作用
scene.add(spotLight.target);

聚光源辅助对象SpotLightHelper

// 可视化平行光，spotLight被模拟的光源，0xff0000光源颜色
const spotLightHelper = new THREE.SpotLightHelper(spotLight,0xff0000);
scene.add(spotLightHelper);