Three.js控制光源实现不同炫丽的效果

1、　　html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。

1、　　声明变量，详细代码如下图，具体用途说明都已经有备注。

2、　　新建场景（initScene）、新建相机（initCamera）和新建物体（initObject），这一块代码可参考文章《Three.js实现立方体旋转和球体跳动》，这里不作多余分析，详细代码如下图：

3、　　新建光源（initLight），详细代码如下图：

　　1.新建环境光（ambientLight），光源的颜色会叠加到物体的颜色上。

　　2.新建两个聚光光源（spotLight0和spotLight），spotLight0用于照射，而spotLight用于呈现修改属性后的效果。

4、　　新建渲染器（initRenderer）和动画效果（animation），这一块代码可参考文章《Three.js实现立方体旋转和球体跳动》，这里不作多余分析，详细代码如下图：

5、　　新建用户操作界面（initGUI）（使用用户操作界面调配出最佳效果也是常用的方法），这一块是本文的重点，详细分析如下：

　　1.定义对象controls，保存以下要修改的属性：

　　rotationSpeed立方体旋转速度；

　　bouncingSpeed球体跳动速度；

　　ambientColor环境光颜色；

　　spotColor聚光光源颜色；

　　intensity光强的数值；

　　distance光照将沿着光源处到该距离处线性衰减为零；

　　angle光线散射角度；

　　penumbra聚光锥的半影衰减百分比；

　　decay沿着光照距离的衰退量；

　　debug是否显示cameraHelper，默认否；

　　castShadow是否显示阴影，默认是；

　　target光源目标，默认“plane”。

　　2.新建对象（gui），并修改其位置（gui.domElement），使界面贴紧右边；

　　3.将对象（controls）传递给gui，并设置各个属性：

　　rotationSpeed使用数字类型中的取值范围（0，0.5），可修改input的值或拖动滑块来改变立方体旋转的速度；

　　bouncingSpeed使用数字类型中的取值范围（0，0.5），可修改input的值或拖动滑块来改变球体跳动的速度；

　　ambientColor使用事件监听（onChange），当点击颜色器（gui.addColor）的颜色后，修改环境光的颜色；

　　spotColor使用事件监听（onChange），当点击颜色器（gui.addColor）的颜色后，修改聚光光源的颜色；

　　intensity使用数字类型中的取值范围（0，5）和事件监听（onChange），当修改input的值或拖动滑块后，修改光强的数值；

　　distance使用数字类型中的取值范围（0，200）和事件监听（onChange），当修改input的值或拖动滑块后，修改光照距离；

　　angle使用数字类型中的取值范围（0，Math.PI *2）和事件监听（onChange），当修改input的值或拖动滑块后，修改光线散射角度（允许最大角度Math.PI *2）；

　　penumbra使用数字类型中的取值范围（0，1）和事件监听（onChange），当修改input的值或拖动滑块后，修改光锥的半影衰减百分比（允许的范围是0和1之间）；

　　decay使用数字类型中的取值范围（0，10）和事件监听（onChange），当修改input的值或拖动滑块后，修改沿着光照距离的衰退量；

　　debug使用布尔类型和事件监听（onChange），当点击复选框时候，在显示和不显示cameraHelper之间切换（由于默认false，所以点击先显示）；

　　castShadow使用布尔类型和事件监听（onChange），当点击复选框时候，在不显示和显示阴影之间切换（由于默认true，所以点击先不显示）；

　　target使用字符串类型中的固定值（下拉框）和事件监听（onChange），当选择不同的选项后，修改光源的目标（spotLight.target）。