Threejs入门之四:Threejs中的光

前面我们用Threejs创建了一个3D立方体到浏览器，并使其跟随鼠标旋转和缩放，但是，上帝说要有光，于是就有了光~~~额，好吧，这一节我们来认识下Threejs中的灯光，Threejs提供了很多灯光的API，这里我们主要了解下环境光(AmbientLight)、点光(PointLight)、平行光(DirectionalLight)、和聚光灯(SpotLight)。 1.AmbientLight：环境光会均匀的照亮场景中的所有物体，环境光没有方向，所以环境光不能用来投射阴影。AmbientLight对象接收两个参数，第一个参数为光的颜色(颜色的rgb数值。缺省值为 0xffffff)，第二个参数为光的强度(取值范围0-1，默认为1)

在index.js中添加如下代码，即可创建环境光并添加到场景中

// 创建环境光
const light = new THREE.AmbientLight(0x404040,,0.6)
scene.add(light)

添加完成后运行浏览器，发现浏览器并没有任何变化

这是因为我们在之前选择材质的时间选择的是基础网格材质(MeshBasicMaterial)，这种材质是不受光照影响的，所以，我们要把之前的材质进行修改，修改为Lambert网格材质(MeshLambertMaterial)，这是一种非光泽表面的材质，没有镜面高光。它可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材） 找到之前创建的材质，修改代码如下

const material = new THREE.MeshLambertMaterial({
  color:0xff0000,//设置颜色 
})

此时发现场景中的物体明显变暗了 2.PointLight：点光源，从一个点向各个方向发射的光源。比如灯泡发出的光。 PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )接收四个参数， color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色) intensity - (可选参数) 光照强度。 缺省值 1。 distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0. decay - 沿着光照距离的衰退量。缺省值 1 创建一个点光源并添加到场景中

// 创建点光 参数1 光的颜色，参数2 光的强度
const pointLight = new THREE.PointLight(0xffffff,1)

就想生活中的灯泡是在屋顶中央的位置安装一样，我们在Threejs中也要给点光源一个位置，然后将其添加到场景中

// 点光源的位置 
pointLight.position.set(400,300,200)
scene.add(pointLight)

此时运行浏览器，可以看到物体表明已经有了明暗变化，光能照到的地方是亮的，找不到的地方是暗的。

3.DirectionalLight：平行光是沿着特定方向发射的光。可以理解为这种光是无限远的,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。 平行光可以投射阴影

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff,1)
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算光线的方向
directionalLight.position.set(80,100,50)
// 光的方向指向对象网格模型mesh，不设置默认为0,0,0
directionalLight.target = mesh
scene.add(directionalLight)

4.SpotLight：聚光灯：光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。 该光源可以投射阴影

// 聚光灯
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 200, 100 );
scene.add(spotLight)

浏览器显示效果如下

总结：Threejs提供了各种光源，各个光源的应用场景不尽相同，具体用法可以查阅官方文档。