在本章中,我们将了解用于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);
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> 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(); }); </script> </body> </html>
在定向光中,光线由方向定义,并根据放置位置向每个方向发射.
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);
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> 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(); }); </script> </body> </html>
上面的代码行生成以下输出 :
聚光灯是就像落在锥形的光一样.
以下是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);
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> 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(); }); </script> </body> </html>
上面的代码行生成以下输出 :
半球形灯更多的是让环境变得轻松.光的方向是朝向天空.光线有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);
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> 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(); }); </script> </body> </html>
上面的代码行生成以下输出 :