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.光的颜色
- diffuse(漫反射):光颜色
- specular(镜面反射):设置光在模型上面反光的颜色
- groundColor(地面颜色):只适用于半球光,设置光照射到地面的颜色,半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。半球光上的漫反射和镜面反射光的方向与地面反射的方向是相反的。 我们可以通过查看案例来查看 diffuse(漫反射)红色和specular(镜面反射)绿色集合产生的黄色高光。
2.光源数目
Babylon可以创建多个光源,但是物体材质只能反射默认定义数量的光源,可以通过如下方式设置:
var material = new BABYLON.StandardMaterial("mat", scene);
material.maxSimultaneousLights = 6;
但是要注意!使用更多的动态光源,Babylon.js将生产更多的着色器,这些着色器可能与移动设备或者小型平板电脑等低性能设备不兼容。在这种情况下,请尝试使用较少的光源。
3. 基础配置
- 使用光源自带的setEnabled方法,传入一个布尔值来打开/关闭光源
- 通过调整intensity属性调整光的亮度,默认值为1
- 对于点光源和聚光灯光源,我们还可以调整range属性来设置光的照射范围