BabylonJs系列-4.Light灯光

527 阅读3分钟

BabylonJs系列-4.Light灯光

这节介绍一下babylon的光源,后面再介绍一下材质和纹理就可以开始上手写一下demo了
常见的几种光源:

  • 点光源(PointLight,类似于灯泡)
  • 方向光(DirectionalLight,类似于太阳光,类似于平行光)
  • 聚光灯(SpotLight,类似于手电筒,探照灯)
  • 球形光(HemisphericLight,模拟周围环境光,效果和方向光很像)

1.点光源

类似于灯泡的效果,会随着距离的远近导致光照强度改变

API

PointLight(name: string, position: Vector3, scene: Scene): PointLight

  • name: 光源的名字
  • position: 在场景中的光源位置
  • scene: 属于哪一个场景 一般光源使用diffuse来设置灯光的颜色
    specular:设置高亮反光的颜色表现,比如在玻璃上的反光颜色
使用
var light = new BABYLON.PointLight("light", new BABYLON.Vector3(0, 1, -1), scene);

2.方向光(平行光)

模拟的是一个非常远的地方发射过来的光,类似于太阳光。因为和太阳光差不多,所以其实和平行没什么区别

API

DirectionalLight(name: string, direction: Vector3, scene: Scene): DirectionalLight

  • name: 光源的名字
  • direction: 光的方向
  • scene: 属于哪一个场景
使用
var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);
light.diffuse = new BABYLON.Color3(1, 0, 0);

3.聚光灯

聚光灯模拟的是类似于手电筒之类的光源,近亮圆按,需要设置距离和朝向。特别的地方是,聚光灯的光只会对某个方向上的有限圆锥角的物体有照亮效果

API

SpotLight(name: string, position: Vector3, direction: Vector3, angle: number, exponent: number, scene: Scene): SpotLight

  • name: 灯光的名字
  • position: 场景中聚光灯的位置
  • direction: 场景中聚光灯的方向
  • angle: 聚光灯能照射的角度
  • exponent: 衰减指数,指数定义了光线随距离的衰减的速度
  • scene: 属于哪一个场景
使用
var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(-1, 1, -1), new BABYLON.Vector3(0, -1, 0), Math.PI / 2, 3, scene);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(0, 1, 0)

4.球形光

模拟环境光的方法,效果和平行光效果很像

API

HemisphericLight(name: string, direction: Vector3, scene: Scene): HemisphericLight

  • name: 光源的名字
  • direction: 光的方向
  • scene: 属于哪一个场景 说明,效果不同,参数通用。
使用
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.diffuse = new BABYLON.Color3(1, 0, 0);
light.specular = new BABYLON.Color3(0, 1, 0)

可能会用到的技巧

1.光的颜色
  1. diffuse(漫反射):光颜色
  2. specular(镜面反射):设置光在模型上面反光的颜色
  3. groundColor(地面颜色):只适用于半球光,设置光照射到地面的颜色,半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。 我们可以通过查看案例来查看 diffuse(漫反射)红色和specular(镜面反射)绿色集合产生的黄色高光。
2.光源数目

Babylon可以创建多个光源,但是物体材质只能反射默认定义数量的光源,可以通过如下方式设置:

var material = new BABYLON.StandardMaterial("mat", scene);
material.maxSimultaneousLights = 6;

但是要注意!使用更多的动态光源,Babylon.js将生产更多的着色器,这些着色器可能与移动设备或者小型平板电脑等低性能设备不兼容。在这种情况下,请尝试使用较少的光源。

3. 基础配置
  • 使用光源自带的setEnabled方法,传入一个布尔值来打开/关闭光源
  • 通过调整intensity属性调整光的亮度,默认值为1
  • 对于点光源和聚光灯光源,我们还可以调整range属性来设置光的照射范围