BabylonJS -Lights

BabylonJS Lights - 从简单和简单的步骤学习BabylonJS，从基本到高级概念，包括简介，环境设置，概述，基本元素，材料，动画，相机，灯光，参数形状，网格，矢量位置和旋转，贴花，曲线3，动态纹理，视差映射，镜头光晕，创建ScreenShot，反射探测器，标准渲染管道，ShaderMaterial，骨骼和骨架，物理引擎，播放声音和音乐。

在本章中，我们将了解用于BabylonJS的灯光.我们将首先看一下babylonjs可用的不同类型的灯.

灯光用于产生每个像素接收的漫反射和镜面反射颜色.之后，在材质上使用它来获得每个像素的最终颜色.

有两种类型的灯可用于babylonjs.

点光源
定向光
聚光灯
半球光

BabylonJS - 点光

点光源的典型例子是太阳，其光线是四面八方蔓延.点光源在空间中具有独特的点，从而在各个方向上传播光线.可以使用镜面反射和漫反射属性控制光的颜色.

语法

以下是Point Light&minus的语法;

var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);

点光源和减号有三种不同的参数;

第一个参数是光的名称.
第二个参数是点光源所在的位置.
第三个参数是需要附加灯光的场景.

以下属性用于在上面和下面创建的对象上添加颜色;

light0.diffuse = new BABYLON.Color3(1, 0, 0);light0.specular = new BABYLON.Color3(1, 1, 1);

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true);         var createScene  = function() {            var scene = new BABYLON.Scene(engine);            scene.clearColor = new BABYLON.Color3( .5, .5, .5);                        var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);            camera.setPosition(new BABYLON.Vector3(0, 0, -100));            camera.attachControl(canvas, true);                        var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(1, 20, 1), scene);            pl.diffuse = new BABYLON.Color3(0, 1, 0);            pl.specular = new BABYLON.Color3(1, 0, 0);                        var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);            return scene;         };         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });

输出

Pointlight

BabylonJS - 定向光

在定向光中，光线由方向定义，并根据放置位置向每个方向发射.

var light0 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -1, 0), scene);

点光源有三种不同的参数;

1 ^st参数是灯的名称.
2 ^nd帕拉姆是这个职位.现在，在Y轴上放置负-1.
3 ^rd参数是要附加的场景.

在这里，您可以使用高光和漫反射属性添加颜色.

light0.diffuse = new BABYLON.Color3(0, 1, 0);light0.specular = new BABYLON.Color3(1,0, 0);

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true);         var createScene  = function() {            var scene = new BABYLON.Scene(engine);            scene.clearColor = new BABYLON.Color3( .5, .5, .5);                        var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);            camera.setPosition(new BABYLON.Vector3(0, 0, -100));            camera.attachControl(canvas, true);                        var pl = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(0, -10, 0), scene);            pl.diffuse = new BABYLON.Color3(0, 1, 0);            pl.specular = new BABYLON.Color3(1, 0, 0);                        var ground = BABYLON.Mesh.CreateGround("ground", 150, 6, 2, scene);            return scene;         };         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });

输出

上面的代码行生成以下输出 :

Directional Light

BabylonJS - 聚光灯

聚光灯是就像落在锥形的光一样.

语法

以下是Spot Light&minus的语法;

var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);

点光源和减号有五种不同的参数;

1 ^st Param是灯的名称.
2 ^nd param是职位.
3 ^rd param是方向.
4 ^th param是角度.
5 ^th param是指数.

这些值定义从该位置开始的光锥，发出走向方向.镜面和漫反射用于控制光的颜色.

light0.diffuse = new BABYLON.Color3(1, 0, 0);light0.specular = new BABYLON.Color3(1, 1, 1);

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true);         var createScene  = function() {            var scene = new BABYLON.Scene(engine);            scene.clearColor = new BABYLON.Color3( .5, .5, .5);                        var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);            camera.setPosition(new BABYLON.Vector3(0, 0, -100));            camera.attachControl(canvas, true);                        var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);            light0.diffuse = new BABYLON.Color3(0, 1, 0);            light0.specular = new BABYLON.Color3(1, 0, 0);                        var ground = BABYLON.Mesh.CreateGround("ground", 80,80, 2, scene);            return scene;         };         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });

输出

上面的代码行生成以下输出 :

Spot Light

BabylonJS - 半球光

半球形灯更多的是让环境变得轻松.光的方向是朝向天空.光线有3种颜色;一个用于天空，一个用于地面，最后一个用于镜面.

语法

以下是Hemispheric Light&minus的语法;

var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);

对于颜色

light0.diffuse = new BABYLON.Color3(1, 0, 0);light0.specular = new BABYLON.Color3(0, 1, 0);light0.groundColor = new BABYLON.Color3(0, 0, 0);

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true);         var createScene  = function() {            var scene = new BABYLON.Scene(engine);            scene.clearColor = new BABYLON.Color3( .5, .5, .5);                        var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);            camera.setPosition(new BABYLON.Vector3(0, 0, -100));            camera.attachControl(canvas, true);                        var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);            light0.diffuse = new BABYLON.Color3(1, 0, 0);            light0.specular = new BABYLON.Color3(0, 1, 0);            light0.groundColor = new BABYLON.Color3(0, 0, 0);                        var ground = BABYLON.Mesh.CreateGround("ground", 100,100, 2, scene);            return scene;         };         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });

输出

上面的代码行生成以下输出 :

Hemispheric Light