光源(Light)

光是自然界中常见的现象，我们把正在发光的物体成为光源。与光相对立的是阴影，光被物体
遮挡住了便形成了阴影。根据光照的效果不同，THREE.js中抽象除了几种不同的光源。

• 聚光灯(THREE.SpotLight)
• 平行光源(THREE.DirectionalLight)
• 环境光源(THREE.AmbientLight)
• 半球光源(THREE.HemisphereLight)
• 点光源(THREE.PointLight)

聚光灯(SpotLight)

聚光灯像某个方向进行照射的光源，其光照范围呈圆锥状。

构造函数

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

• color：光的颜色
• intensity：光的强度
• distance：光能照射的最远的距离，按照光的强度按照距离呈线性衰减。
• angle：照射的中心点到圆锥上边距的夹角
• decay：光线衰减的速率
  戳这里查看每个属性对光照效果的影响

属性

除了构造函数中的几个属性之外，SpotLight还有一个很重要的属性target，点光源聚焦的地方
，该属性值是一个Object3D的实例，将target的值设置为一个运动中的物体
可以让点光源跟随物体的运动而运动。

聚光灯产生阴影

THREE.js中只有聚光灯(SpotLight)和平行光源(DirectionalLight)可以产生阴影，这里看看如何让聚光灯产生阴影。
1.告诉renderer需要渲染阴影

var renderer = new THREE.WEBGLRenderer();
renderer.shadowMapEnabled = true
or
renderer.shadowMap.enabled = true

2.告诉THREE.js哪些物体会投射阴影， 哪些物体会接收阴影

cubeMesh.castShadow = true;               //cubeMesh会在其他的物体上面投射阴影
floorMesh.receiveShadow = true;           //floorMesh会接收其他物体在其上投射的阴影

3.添加聚光灯

var spotLight = new THREE.SpotLight();
spotLight.angle = Math.PI / 8;
spotLight.exponent = 30;
spotLight.position = new THREE.Vector3(40, 60, -50);
scene.add(spotLight);

4.设置阴影相关的属性

spotLight.castShadow = true;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
near, far, fov设置投影的区域  

5.设置阴影贴图大小

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

设置阴影贴图大小，如果发现阴影的边界呈块状，说明阴影贴图太小了，需要设置更大的值。

平行光源(DirectionalLight)

构造函数

DirectionalLight(color, intensity)
- color：光源的颜色
- intensity：光的强度

环境光(AmbientLight)

直接使用平行光源或者点光源，阴影会显得比较生硬，和周围的景色对比起来差异特别的明显，
就像我们的世界中除了发光的光源之外，还有无处不在的环境光。通过添加环境光源可以让光线看起来更加柔和。
环境光源的使用非常简单，只需要新建一个环境光源的实例，设置光的颜色，然后加入到场景中，环境光源会对场景中所有的物体产生影响。

var ambientLight = new THREE.AmbientLight(0x333333)；
scene.add(ambientLight);

点光源(SpotLight)

点光源是一种类似白炽灯的光源，它会像所有的方向投射光线。或者想象一下夏日夜晚的萤火虫。
下面创建一个四处飘动的点光源来模拟一个萤火虫。

1.新建一个点光源实例

var pointLight = new PointLight(0xff0000, 1, 100, 1);

构造函数THREE.PointLight可以接受四个参数
- color：光源的颜色
- intensity：光照的强度
- distance：光有效的照明距离
- decay：光随着照明距离的衰减速率

2.设置点光源的坐标

pointLight.position = new THREE.Vector3(-30, 0, 0);
scene.add(pointLight);

3.在循环中变换点光源的坐标，让点光源动起来，就好像一只飞舞的萤火虫。

light.position.y = 15 * Math.sin(count+=0.005);