ThreeJS-3D教学四-光源

three模拟的真实3D环境，一个非常炫酷的功能便是对光源的操控，之前教学一中已经简单的描述了多种光源，这次咱们就详细的讲下一些最常见的光源：

AmbientLight
该灯光在全局范围内平等地照亮场景中的所有对象。
该灯光不能用于投射阴影，因为它没有方向。

AmbientLight( color : Integer, intensity : Float )
color - （可选）颜色的RGB分量的数值。默认值为0xffffff。
intensity - （可选）灯光强度/强度的数值。默认值为1。

DirectionalLight
向特定方向发射的光。这种光的行为就像它是无限遥远的，并且从它产生的光线都是平行的。这方面的常见用例是模拟日光；太阳离得足够远，它的位置可以被认为是无限的，所有来自它的光线都是平行的。

DirectionalLight( color : Integer, intensity : Float )
color - （可选）灯光的十六进制颜色。默认值为0xffffff（白色）。
intensity - （可选）灯光强度/强度的数值。默认值为1。

PointLight
从一个点向所有方向发射的光。这方面的一个常见用例是复制裸灯泡发出的光。

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
color - （可选）灯光的十六进制颜色。默认值为0xffffff（白色）
intensity - （可选）灯光强度/强度的数值。默认值为1.
distance - 光线的最大范围。默认值为0（无限制）
decay - 灯光沿着灯光的距离变暗的量。默认值为2.

HemisphereLight
位于场景正上方的光源，颜色从天空颜色渐变为地面颜色。此灯光不能用于投射阴影。

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
skyColor - （可选）天空的十六进制颜色。默认为0xffffff。
groundColor - （可选）地球的十六进制颜色。默认为0xffffff。
intensity - 可选）光的强度/强度的数值。默认为1。

SpotLight
这种光从一个方向的单个点发射，沿着一个圆锥体，该圆锥体的大小随着光的传播而增加。类似车灯的效果，可以做射灯、车灯等

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
color -（可选）灯光的十六进制颜色。默认值为0xffffff（白色）。
intensity -（可选）灯光强度/强度的数值。默认值为1。
distance - 灯光的最大范围。默认值为0（无限制）。
angle - 光从其方向散射的最大角度，其上限为Math。π/2。
penumbra - 由于半影而衰减的聚光灯圆锥体的百分比。取值介于0和1之间。默认值为零。
decay - 光线沿着光线的距离变暗的量。

看了定义后，我们先看下本次案例的效果图

这个案例中涉及到了以上所有光源效果，其中DirectionalLight和HemisphereLight是注释掉了的，为的是突出PointLight 和 SpotLight的效果，在代码中会发现AmbientLight的灯光强度我也特意变暗了。
案例中首次使用了GUI操作器和物体阴影效果。
GUI主要作用：
1、获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。
2、使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。

看代码：

关于shadow效果的设置我们需要特别注意：
1、我们需要首先在renderer中设置
2、需要阴影的物体需要设置
3、这一点是比较容易遗忘的，那就是物体通过光源产生的阴影 投射在哪，相应的物体也需要设置，这个点写这个案例时，我也忘了 折腾半天模型的投影看不到，突然想到我addPlane函数创建的平面没有设置，简直了，耗费了很长时间
当然案例中只是shadow的一种设置方式，后面会讲到别的方式。

案例中还有一个知识点，之所以我将人像模型放在边缘，也是为了这个。那就是spotLight光源默认指向中心点也就是 (0, 0, 0)点，这时我们还需要spotLight实现案例中的效果，必须改变spotLight的指向：

  const targetObject = new THREE.Object3D();
  targetObject.position.set(-50, 0, -50);
  scene.add(targetObject);
  // 这样就可以了
  spotLight.target = targetObject;