1、AmbientLight——影响整个场景的光源：
书籍说AmbientLight颜色绑定用gui.addColor，照着敲代码没有注意，用gui.add绑定，发现改变颜色改变时也有效，不过对于ambientColor的值不是css合法的颜色取值（合法的颜色取值，如white、#333、rgb(22,33,44)、rgba(22,33,44,0.3)），绘制出来的AmbientLight的颜色是白色。对于gui.addColor会添加一个调色板用来控制ambientColor的取值：
2、PointLight——照射所有方向的光源
按照书籍方式使用THREE.Vector3修改position的值报错：
看报错的写position是只读，不能通过”cube.position = new THREE.Vector3(4, 5, 6)”来调整位置。可以通过”cube.position.set(new THREE.Vector3(4, 5, 6))”来调整位置。
调整PointLight.distance的值，发现在plane的光圈大小与PointLight.intensity的值有关，当PointLight.distance增大的值超过与PointLight.intensity的值有关的一定值后，继续增大，绘制效果不变。PointLight.distance的值越小，在plane的光圈越小，当PointLight.distance的值为0时，在plane的光圈大小与PointLight.intensity的值固定后，PointLight.distance继续增大，plane的光圈不会变化时大小一致。
3、SpotLight——具有锥形效果的光源
A、调整SpotLight.intensity的值，发现其值越大，物体的颜色越接近光源的颜色。球体的颜色是接近光源的颜色，但是立方体的颜色效果与球体不一样：
初步猜测是两者的高度不一致，球体是运动的，观察发现当球体的y的位置最低时，球体颜色没有变化。后面猜测是两者距离光源的远近不一样，调整两者的位置，发现物体的颜色还是没有变化。
B、调整SpotLight.distance的值，发现光源照射的范围与SpotLight.intensity的值有关，当SpotLight.distance增大的值超过与SpotLight.intensity的值有关的一定值后，继续增大，绘制效果不变。SpotLight.distance的值越小，光源照射的范围越小，当SpotLight.distance的值为0时，光源照射的范围大小与SpotLight.intensity的值固定后，SpotLight.distance继续增大，光源照射的范围不会变化时大小一致，同时如果开启阴影，此时物体阴影不会绘制。
C、调整SpotLight.angle的值，发现当SpotLight.angle取余2 * Math.PI的值为0时，光源照射范围为0，SpotLight.angle的值越趋近于SpotLight.angle取余2 * Math.PI的值为0，光源照射范围越小。当SpotLight.angle取余Math.PI/ 2的值为0时，物体的阴影不会绘制。SpotLight.angle的绘制效果，在[0, 2*π]之间，当SpotLight.angle的值趋近于0、π、2*π时，物体的阴影绘制的越平滑，当SpotLight.angle的值趋近于π/2、3 *π/2时，物体的阴影绘制的越粗糙。
D、调整SpotLight.exponent的值，发现绘制效果无变化。查看官网文档，发现SpotLight没有这个属性。对比书籍书籍对exponent的描述与官网，感觉decay替换该属性。发现当SpotLight.decay的值越大时，光源照射范围越小，大到一定值（示例的值调整为3左右），光源照射范围为0。
E、调整SpotLight.shadowCameraVisible的值，发现绘制效果无变化。查看官网文档，发现SpotLight没有这个属性。根据属性名对比官网的SpotLight，感觉应该由SpotLight.shadow.camera.visible替换。更改SpotLight.shadow.camera.visible的值，发现绘制效果无变化。看书籍说存在属性不能再场景渲染后不能修改。在渲染前设置SpotLight.shadow.camera.visible的值，发现值为Boolean的任务值，绘制效果不变。
F、调整SpotLight.onlyShadow的值，发现绘制效果无变化。查看官网文档，发现SpotLight没有这个属性。根据属性名对比官网的SpotLight，感觉没有合适的属性将其替换。
G、SpotLight的shadowCameraNear、shadowCameraFar、shadowCameraFov属性同E部分调整为shadow.camera.X。
H、调整SpotLight.shadow.camera.fov的值，发现绘制效果无变化。打印信息，发现SpotLight.shadow.camera.fov的实际值与设置值不一致。初步以为SpotLight.shadow.camera.fov的值会随着容器大小变化，调整后发现不会。后面以为其值对应声明camara时设置的角度值，调整后发现不是。SpotLight.shadow.camera的类型是继承Camera，想通过对SpotLight.shadow.camera赋一个新的Camera对象来更改SpotLight.shadow.camera.fov的值，尝试后发现还是不行。
I、根据E部分调整SpotLight.shadowMapWidth为SpotLight.shadow.map.width，调整SpotLight.shadow.map.width的值，页面无内容绘制，控制台出现如下提示：
这个提示看上去应该和THREE无关，是Vue的问题才对，但代码没有SpotLight.shadow.map.width时就不会出现这个错误。
仔细看控制台，发现有报错：
在控制台打印SpotLight的信息，发现确实有SpotLight.shadow.map，SpotLight.shadow.map的内容也不为空：
用控制台直接打印SpotLight.shadow.map，发现其值确实是null。。。
K、调整SpotLight.shadowMapHeight的值的效果同J部分。
L、调整SpotLight.shadowBias的值，发现绘制效果无变化。查看官网文档，发现SpotLight没有这个属性。根据属性名对比官网的SpotLight，感觉应该由SpotLight.shadow.bias替换。
M、调整SpotLight.shadowBias的值，发现绘制效果无变化。查看官网文档，发现SpotLight没有这个属性。根据属性名对比官网的SpotLight，感觉应该由SpotLight.shadow.bias替换。
3、DirectionalLight——模拟远处类似太阳的光源
A、不同于SpotLight.intensity需要设置一个较大值才有好的光亮效果如1000，而DirectionalLight.intensity设置一个小值就有很好的光亮效果，如2。DirectionalLight.intensity的值越大，物体的颜色趋近于白色（立方体的颜色还是原本设置的颜色）。
B、不同于SpotLight.intensity需要设置一个较大值才有好的光亮效果如1000，而DirectionalLight.intensity设置一个小值就有很好的光亮效果，如2。DirectionalLight.intensity的值越大，物体的颜色趋近于白色（立方体的颜色还是原本设置的颜色）。
C、对于属性shadowCameraVisible同对SpotLight的shadowCameraVisible描述。
D、对于属性shadowCameraFar和shadowCameraNear，要用DirectionalLight.shadow.camera.far和DirectionalLight.shadow.camera.near替换。调大DirectionalLight.shadow.camera.far和DirectionalLight.shadow.camera.near的差值，发现物体的阴影仍旧绘制不完整：
相较于SpotLight.shadow.camera，DirectionalLight.shadow.camera的属性多了top、left、right和bottom，感觉这四个属性要设置正确的值才可以绘制物体完整的阴影。调整后，发现物体的阴影可以绘制完整了。
E、对于属性shadowCameraFov，相较于SpotLight，没有DirectionalLight.shadow.camera.fov属性用于替换。
F、对于属性shadowMapWidth、shadowMapHeight、shadowDrakness、onlyShadow和shadowBias，同前面描述SpotLight对应的属性一样。
4、半球光光源
A、本地项目报错：
查看官网的ImageUtils.js文件，发现没有方法loadTexture。有说用”const texture = new THREE.TextureLoader().load(‘filename.jpg’)”来替换”const texture = THREE.ImageUtils.loadTexture(‘filename.jpg’)”。
在本地项目中，纹理读取文件，不管传入的文件路径A以什么开头，比如’/’、’./’、’../’、’../.../../’(...表示多个’../’)，最终加载的文件路径为项目根目录加上传入的路径A去除前面提到的开头组合而成。即不管使用TextureLoader加载图片的文件在哪里，图片的位置在’/src/assets/image/grass.jpg’始终可以用”const texture = new THREE.TextureLoader().load(‘src/assets/image/grass.jpg’)”加载图片。
B、调整HemisphereLight.color的值，plane和sphere的颜色都会改变。调整HemisphereLight.groundColor的值，只有sphere底部的颜色改变。
C、调整HemisphereLight.instensity的值，感觉其向物体添加了荧光的效果，当HemisphereLight.instensity的值足够大时，物体整个是同一种颜色，如：
5、平面光光源
A、看到书籍说要用到WebGLDeferredRenderer，去官网查了下没有找到。看网上说，WebGLDeferredRenderer被移除了且没有可替换的东西。这样AreaLight就不能按书籍上的来，去官网查找，发现没有AreaLight。官网上有一个RectAreaLight，看了下说明，感觉是用这个来替换AreaLight。
B、根据书籍的github示例代码调整，WebGLDeferredRenderer用WebGLRenderer替换，AreaLight用RectAreaLight替换，绘制效果没有光源效果：
看官网示例有加上RectAreaLightHelper，根据官网示例添加RectAreaLightHelper的值，绘制效果如下：
对比之前，加了一个框。看了别人的示例，发现不需使用RectAreaLightHelper，RectAreaLight只对MeshStandardMaterial和MeshPhysicalMaterial有效果，调整plane的材质为MeshPhysicalMaterial，效果如下：
对比书籍的效果，没有三个矩形的倒影。官网上说必需引入RectAreaLightUniformsLib，并执行RectAreaLightUniformsLib.init()，将其加上后，发现光源的倒影加上了：
6、镜头眩光
A、本地项目报错：
LensFlare需要导入。
B、本地项目报错：
定位报错在代码”lensFlare.add(textureFlare3, 60, .6, THREE.AdditiveBlending)”，看了下官网的写法为”lensFlare.addElement(new LensflareElement( textureFlare3, 60, .6))”。
要将LensflareElement导进来，在官网查找没找到，后面发现其在lensFlare.js文件里。
修改后发现只绘制lensflare3.png的图片，lensflare0.png没有绘制。在A部分直接使用Lensflare替换THREE.LensFlare，仔细对比官网示例，发现其new Lensflare并为传参。感觉lensflare0.png也需要通过lensFlare.addElement加入，经过尝试，lensflare0.png绘制出来了。
C、感觉renderer.setClearColor(0x000000)和renderer.setClearColor(new THREE.Color(0x000000, 1))绘制的背景颜色是一样的，但是通过这个示例，发现二者的绘制是不同的。
查看官网的Color，构造函数的传参数量大于1时，调用的是setRGB来设置颜色，所以本该是黑色变成了绿色。
