three.js 光的介绍(05)

前言:光的介绍

一、光源

3d渲染效果的真实性,使用光源是必不可少的技巧。

1.1 光源基类

  • 在Three.js中,光源用Light表示,它是所有光源的基类。
  • 构造函数THREE.Light(color)
    • 参数color接收一个16进制的颜色值。
  • 定义一个光源
var redLight = new THREE.Light(0xff0000); //定义红光

1.1.1 光源的种类

  1. 环境光:THREE.AmbientLight()
  2. 点光源:THREE.PointLight()
  3. 聚光灯:THREE.SpotLight()
  4. 区域光:THREE.AreaLight()
  5. 方向光:THREE.DirectionLight()

1.2 环境光

环境光是经过多次反射而来的光,无法确定其最初的方向。

  • 环境光是一种无处不在的光。
  • 环境光源放出来的光线被认为来自任何方向。
  • 仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度。
  • 构造函数THREE.AmbientLight(color),接收一个16进制的颜色值作为光源的颜色。
  • 环境光将照射场景中的所有物体,让物体显示出某种颜色。
var light = new THREE.AmbientLight(0xff0000);
scene.add(light);  //向场景中加入光源

1.2.1 环境光对物体的影响

​ 环境光就是在场景中无处不在的光,它对物体的影响是均匀的,无论从物体的那个角度观察,物体的颜色都是一样的。

​ 可以把环境光放在任何一个位置,他的光线是不会缩减的,是永恒的某个强度的一种光源。

1.3 点光源

  • 点光源:由这种光源放出的光线来自同一点,且方向辐射自四面八方。
  • 例子:蜡烛放出的光、萤火虫放出的光
  • 构造函数PointLight(color,intensity,distance)
    • color :光的颜色,16进制。
    • intensity:光的强度,默认是1.0,也就是100%强度的灯光。
    • distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从intensity衰减为0。默认情况下,这个值为0.0,表示光源强度不衰减。

1.4 聚光灯

  • 聚光灯:这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果。
  • 使用:使用这种光源需要指定光的射出方向以及锥体的顶角α。
  • 构造函数THREE.SpotLight(hex,intensity,distance,angle,exponent)
    • hex:聚光灯发出的颜色,十六进制。
    • intensity:光源的强度。默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些。和点光源一样。
    • distance:光线的强度,从最大值衰减到0需要的距离。默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离distance时,光源强度为0
    • angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。
    • exponent:光源模型中,衰减的一个参数,越大衰减越快。
      在这里插入图片描述

1.5 方向光(平行光)

  • 方向光是一组没有衰减的平行的光线,类似于太阳光的效果。
  • 构造函数THREE.DirectionalLight(hex,intensity)
    • hex:光的颜色,用16进制表示
    • intensity:光线的强度,默认为1。因为RGB的三个值均在0-255之间,不能反映出光照的强度变化,光照越强,物体表面就更明亮。它的取值范围是0-1.如果为0,表示光线基本没有什么作用,那么物体就会显示会黑色。
  • 平行光的方向:方向由位置和原点(0,0,0)来决定,方向光只与方向有关,与离物体的远近无关。
var light;
light = new THREE.DirectionalLight(0xff0000,1);
light.position.set(0,0,1);
scene.add(light);

在这里插入图片描述

1.6 多种光源的存在

1.6.1 环境光和方向光

  • 当环境光和方向光同时存在的时候,可以把这种情况想成两种光源同时作用域物体。

  • 它产生的情况和每种光源分别作用域物体,然后将两者的结果相加,是一样的效果。

//环境光
var light1 = new THREE.AmbientLight(0x00ff00);//绿
light.position.set(100,100,200);
scene.add(light1);

//方向光
var light2 = new THREE.DirectionalLight(0xff0000);//红
light2.position.set(0,0,1);
scene.add(light2);

(1)只有环境光时:

在这里插入图片描述

(2)只有方向光时:

在这里插入图片描述

(3)环境光和方向光都有:
在这里插入图片描述

总结

  1. 方向光的方向是箭头所示的方向。
  2. 图中的绿色部分是由于环境光造成的
  3. 图中黄色部分是由环境光和方向光共同作用而成,是两种光源颜色的简单相加:0x00ff00(绿色)+0xff0000(红色)= 0xffff00(黄色)

1.7 材质与光源的关系

材质就是物体的质地。是指物体表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等

  • 离开光材质是无法体现的。因为看不见了,都是黑色的。

1.7.1 不带任何光源的物体

​ 我们使用兰伯特材质,并将这种材质赋予黑色,则在场景中没有任何光源的情况下,物体不能反射光源到人的眼睛里。当没有任何光源的时候,最终的颜色将是黑色,无论材质是什么颜色

1.7.2 兰伯特材质和光源

兰伯特(Lambert)材质是最常见的材质之一。这是在灰暗的或者不光滑的表面产生均匀散射而形成的材质类型。

  • 比如一张纸就是Lambert表面。它粗糙不均匀,不会产生镜面效果。
  • Lambert材质表面会在所有方向上均匀地散射灯光,就会使颜色看上去比较均匀。
  • Lambert材质会受环境光的影响,呈现环境光的颜色,与材质本身颜色关系不大。

1.7.3 一个栗子----关于红绿光

绿色玻璃看红色物体是什么颜色?为什么透过绿色的杯子看红色物体是黑色?

  • 绿色玻璃之所以显示绿色,是因为吸收了除绿色以外的其他颜色的光。
  • 红色物体之所以是红色,是因为反射了红光而吸收了其他颜色的光。
  • 红色物体反射的红色光,经过绿色玻璃后,被滤去。所以透过绿色玻璃看红色物体是黑色的。
  • 所以说物体本身有那个颜色的分量才能反射那个颜色的光

杯子看红色物体是黑色?**

  • 绿色玻璃之所以显示绿色,是因为吸收了除绿色以外的其他颜色的光。
  • 红色物体之所以是红色,是因为反射了红光而吸收了其他颜色的光。
  • 红色物体反射的红色光,经过绿色玻璃后,被滤去。所以透过绿色玻璃看红色物体是黑色的。
  • 所以说物体本身有那个颜色的分量才能反射那个颜色的光

猜你喜欢

转载自blog.csdn.net/weixin_48931875/article/details/113858358