three学习(十)—— 光源类型

211 阅读3分钟

前言

在three中,光源是一个重要的对象,材质的阴影与反射都离不开光源,光源让渲染出来的物体更加切合现实,就像在照相馆照相时打的灯光一样,本节我们就来了解一下常见的光源类型。

类型

three的文档中,详细地介绍了九种光源类型:

image.png 这里我们介绍常用的四种光源——环境光、平行光、点光源、聚光灯光源。这四个光源名字就是光源本身的特点:

  • 环境光:该光源会将所有的物体都照亮,并且不产生物体阴影,在环境光下物体有着相同的明暗效果:
   const light = new THREE.AmbientLight();
   scene.add(light);
  • 平行光:该光源会发射出特定方向的光,我们用该光源时,需要设置光照的方向,调整照到物体上的方向。方向可以看成一条直线,两点确定一条直线,所以平行光方向的设置需要两个属性:
    1.position:光源的位置属性,该属性只是用来确定光照方向,不是说光源在这个位置照射,平行光是在无限处发出的。 2.target:光照的模型对象,这个目标可以是我们创建的任何一个模型。平行光的方向就是从position指向target;当两者都不设置的话,平行光会默认从上往下照射

image.png

 const light = new THREE.DirectionalLight();
 //位置
 light.position.set(20,20,20);
// target
light.target = cube;
scene.add(light);
  • 点光源:该光源从一点向四周发射光线,照射到物体光线的方法各不相同,所以物体会产生不同的明暗效果,这跟环境光有所不同,点光源有位置属性,这个表示的就是光源的真正位置,物体会随着光源位置的改变产生不同的反射效果。

image.png

   const light = new THREE.PointLight();
   light.position.set(100,100,100);
   scene.add(light);

点光源的位置属性跟平行光的用途不一样,我们要注意区分。

  • 聚光灯光源:该光源会发射出圆锥形范围的光线,跟我们在舞台上看到的聚光灯效果一样,处于聚光灯范围内的物体会被照亮,它跟平行光一样需要通过position跟target确定光线方向。

image.png

const light = new THREE.SpotLight();
light.position.set(100, 100, 100);
light.target = cube;
scene.add(light);

辅助对象

在three中有专门的光源辅助对象可以方便我们的开发与调试,下面我们来看下平行光、点、聚光灯光源的辅助函数:

  • DirectionalLightHelper:平行光辅助对象,对应的构造函数接收三个参数:
    light:创建的光源。
    size:平面尺寸,可选参数,默认为1。
    color:光源颜色,默认为light的光源颜色。
  • PointLightHelper:点光源辅助对象,构造函数也有三个参数,light跟color含义用法一样,还有一个: sphereSize:光源大小的尺寸,可选参数,默认为1。
  • SpotLightHelper:聚光灯辅助对象,有light和color两个参数。

总结

本节介绍了四种光源类型,每个光源都有其特点,我们要理解各个光源之间的区别,为我们后续使用打好基础。