Three.js拨云见雾(2)——照亮世界的光源｜ 8月更文挑战

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

Threejs场景对象Scene主要是由模型对象和光源对象Light构成，Three.js中有许多不一样种类的光源，每种光源都有特别的行为和用法。常见的光源种类和基本描述以下表所示：

接下来，咱们来看一下他们的基本描述和入门使用。

环境光 AmbientLight

环境光是没有特定方向的光源，主要是均匀总体改变Threejs物体表面的明暗效果，这一点和具备方向的光源不一样，好比点光源可让物体表面不一样区域明暗程度不一样。

//环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘 
let ambient = new THREE.AmbientLight(0x444444); 
//环境光对象添加到scene场景中
scene.add(ambient);
复制代码

在建立THREE.AmbientLight时，颜色会应用到全局。该光源并无特别的来源方向，而且THREE.AmbientLight不会生成阴影。一般，不能将THREE.AmbientLight做为场景中惟一的光源，由于它会将场景中的全部物体渲染为相同的颜色，而无论什么形状。在使用其余光源(如THREE.SpotLight或者THREE.DirectionalLight)的同时使用它，能够用来弱化阴影或者给场景添加一些额外的颜色。

点光源 PointLight

点光源就像生活中的白炽灯，光线沿着发光核心向外发散，同一平面的不一样位置与点光源光线入射角是不一样的，点光源照射下，同一个平面不一样区域是呈现出不一样的明暗效果。

和环境光不一样，环境光不须要设置光源位置，而点光源须要设置位置属性position，光源位置不一样，物体表面被照亮的面不一样，远近不一样由于衰减明暗程度不一样。

//点光源 
let point = new THREE.PointLight(0xffffff); 
//设置点光源位置，改变光源的位置 
point.position.set(400, 200, 300); 
scene.add(point);
复制代码

平行光 DirectionalLight

这种类型的光能够看做是距离很远的光。它发出的全部光纤都是相互平行的。平行光的一个范例就是太阳光。

点光源由于是向四周发散，因此设置好位置属性position就能够肯定光线和物体表面的夹角，对于平行光而言,主要是肯定光线的方向,光线方向设定好了，光线的与物体表面入射角就肯定了，仅仅设置光线位置是不起做用的。

在三维空间中为了肯定一条直线的方向只须要肯定直线上两个点的坐标便可，因此Three.js平行光提供了位置position和目标target两个属性来一块儿肯定平行光方向。目标target的属性值能够是Threejs场景中任何一个三维模型对象，好比一个网格模型Mesh，这样Threejs计算平行光照射方向的时候，会经过自身位置属性position和target表示的物体的位置属性position计算出来。

// 平行光 
let directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
// 设置光源的方向：经过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50); 
// 方向光指向对象网格模型mesh2，能够不设置，默认的位置是0,0,0 
directionalLight.target = mesh2; 
scene.add(directionalLight);
复制代码

平行光若是不设置position和target属性，光线默认从上往下照射，也就是能够认为(0,1,0)和(0,0,0)两个坐标肯定的光线方向。

聚光源 SpotLight

聚光源能够认为是一个沿着特定方会逐渐发散的光源，照射范围在三维空间中构成一个圆锥体。经过属性angle能够设置聚光源发散角度，聚光源照射方向设置和平行光光源同样是经过位置position和目标target两个属性来实现。

THREE.SpotLight是最常使用的光源之一(特别是你想要使用阴影的话)。它是一种具备锥形效果的光源，咱们能够把它与手电筒或者灯塔产生的光进行对比。

// 聚光光源 
let spotLight = new THREE.SpotLight(0xffffff); 
// 设置聚光光源位置 
spotLight.position.set(200, 200, 200); 
// 聚光灯光源指向网格模型mesh2 
spotLight.target = mesh2; 
// 设置聚光光源发散角度 
spotLight.angle = Math.PI / 6;
//光对象添加到scene场景中
scene.add(spotLight);
复制代码

总结

今天学习了THREE.js中比较常见的基础光源以及它们各自的基本用法，熟悉这些用法可让咱们快速的了解到光源的如何使用。针对光源，材质(后面会讲)会对光源有不一样的反应。THREE.AmbientLight光源的颜色能够附加到场景中的每一种颜色上，一般用来柔化生硬的颜色和阴影。THREE.PointLight光源会朝全部方向发射光线，不能被用来建立阴影。THREE.SpotLight光源相似于手电筒。它有一个锥形的光束，能够配置它随着距离的增大而逐渐变弱，而且能够生成阴影。咱们还了解了THREE.DirectionalLight光源。这个光源至关于远光的效果，好比太阳光。它的光线彼此平行，其光强并不会随着与目标对象距离的增大而减弱。

除了这些基本光源以外，还有一些特殊的光源：THREE.HemisphereLight能够建立一个更加天然的户外效果；THREE.AreaLight能够不从单个点发射光线，而是从一个很大的区域发射光线；THREE.LensFlare对象能够添加图像化的镜头光晕。固然这些光源基本用法都是同样的，若是须要详细了解全部光源用法和属性的的小伙伴能够参考THREE.js官网以及THRR.js开发指南。

以上就是今天的所有内容了，感谢你们点赞、关注和收藏。