【babylonjs】babylonjs实践（三）--灯光

Ws努力做全栈
2,350 阅读4分钟

光源

4种Babylon.js中的光源（灯光）：

  • 点光源（BABYLON.PointLight）
  • 方向光（BABYLON.DirectionalLight）
  • 聚光灯（BABYLON.SpotLight）
  • 球形光（BABYLON.HemisphericLight）

点光源

有时候需要一个小的光源，例如一个灯泡，这些光源就是点光源。点光源常常被设置在某个位置上，然后随着离距离的变远光照强度变小。 这个很好理解。

PointLight(name: string, position: Vector3, scene: Scene): PointLight
  • name: 光源的名字
  • position: 在场景中的光源位置
  • scene: 属于哪一个场景

image.png

说明：

  • 可以通过diffuse属性来设置灯光的颜色。我们这里把点光源设置为红色，light.diffuse = new BABYLON.Color3(1, 0, 0);
  • 镜面光是指高亮反光位置的颜色表现，我们经常会在玻璃上看到镜面光。light.specular = new BABYLON.Color3(0, 1, 0);

方向光（平行光）

方向光模型模拟的是一个非常远的地方发射出来的光，例如太阳光。

想想太阳光，太阳距离地球大约1.5亿公里，地球的半径是6378公里，算起来，太阳光照射的角度范围大约只有0.0024度，照到地球的时候和平行也没什么区别了。

DirectionalLight(name: string, direction: Vector3, scene: Scene): DirectionalLight
  • name: 光源的名字
  • direction: 光的方向
  • scene: 属于哪一个场景

说明：同样有diffuse和specular属性

聚光灯

这节课件聚光灯。聚光灯模拟的是手电筒，探照灯之类，这种光可以把光汇聚到一个方向的光源。我们在设置聚光灯的时候，需要设置其位置和朝向，并且光照强度会随着距离而减小。特别的地方是，聚光灯的光只会对某个方向上的有限圆锥角的物体有照亮效果，

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

参数：

  • name: 灯光的名字
  • position: 场景中聚光灯的位置
  • direction: 场景中聚光灯的方向
  • angle: 聚光灯能照射的角度
  • exponent: 衰减指数，指数定义了光线随距离的衰减的速度
  • scene: 属于哪一个场景

说明：有一圈发散的效果。效果不同，参数通用。

image.png

球形光

半球光源是模拟周围环境光的简单方法。半球形的光是由方向定义，通常是朝向天空就是“向上”。然而，通过设置颜色属性可以实现完整效果。

HemisphericLight(name: string, direction: Vector3, scene: Scene): HemisphericLight
  • name: 光源的名字
  • direction: 光的方向
  • scene: 属于哪一个场景 说明，效果不同，参数通用。
  • ！！！特别说明，从效果上来看，球形光和平行光效果很像。

代码

// 点光源
            // var light = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, 0), scene);
            // light.diffuse = new BABYLON.Color3(1, 0, 0);
            // light.specular = new BABYLON.Color3(0, 1, 0);

            // 方向光
            var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);
            light.diffuse = new BABYLON.Color3(1, 0, 0);

            // 聚光灯
            // 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)

            // 半球光
            // 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)

其他技巧

光的颜色

光源有三个属性会影响到颜色。其中有两个属性diffuse(漫反射)和specular(镜面反射)适用于所有的四种光源，而第三种groundColor(地面反射)仅适用于半球光。

  1. diffuse(漫反射)为对象提供基本的颜色。
  2. specular(镜面反射)可以在模型对象上生成高亮颜色。
    我们可以通过查看案例来查看 diffuse(漫反射)红色和specular(镜面反射)绿色集合产生的黄色高光。

对于半球光来说，groundColor(地面颜色)照射方向刚好与设置的方向相反。就是说，半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。
设置颜色为白色的漫反射光和黑色的地面反射是一种有用的照明方法。

光源数目

Babylon.js允许你创建尽可能多的光源，但是单个的StandardMaterial材质只能处理默认定义数量的光源（默认情况下，为四个光源）。你可以使用下面的方式设置更多：

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

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

其他配置

每个光都可以使用setEnabled方法传入false，禁掉光的使用：

light.setEnabled(false);

或者，传入true来开启使用：

light.setEnabled(true);

通过调整intensity属性调整光的亮度，默认值为1：

light0.intensity = 0.5;
light1.intensity = 2.4;

对于点光源和聚光灯光源，我们还可以调整range属性来设置光的照射范围：

light.range = 100;

暂时先整理这么一些，够用了。我们场景中只要平行光就可以了。

avatar
文章
阅读
粉丝