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

1,469 阅读5分钟

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

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

1628468992.png

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

环境光 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

image.png

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

和环境光不同,环境光不需要设置光源位置,而点光源需要设置位置属性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计算平行光照射方向的时候,会通过自身位置属性positiontarget表示的物体的位置属性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);

平行光如果不设置positiontarget属性,光线默认从上往下照射,也就是可以认为(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开发指南

以上就是今天的全部内容了,感谢大家点赞、关注和收藏。