English 中文(简体)
BabylonJS Tutorial

BabylonJS Useful Resources

Selected Reading

BabylonJS - Lights
  • 时间：2025-03-17

BabylonJS - Lights

Previous Page Next Page  

In this chapter, we will learn about the pghts used for BabylonJS. We will start by taking a look at the different types of pghts available with babylonjs.

Lights are meant to produce the diffuse and specular color received by each pixel. Later, it is used on material to get the final color of each pixel.

There are 4 types of pghts available with babylonjs.

    Point Light

    Directional Light

    Spot Light

    Hemispheric Light

BabylonJS - Point Light

A classic example of point pght is the Sun, the rays of which are spread in all direction. Point pght has a unique point in space from where it spreads the pght in every direction. The color of pght can be controlled using the specular and diffuse property.

Syntax

Following is the syntax for Point Light −

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

There are three different params for point pght −

    The 1st param is the name of the pght.

    The 2nd param is the position where the point pght is placed.

    The 3rd param is the scene to which the pght needs to be attached.

Following properties are used to add color on the object created above −

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

Demo

<!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>

Output

Pointpght

BabylonJS - The Directional Light

In directional pght, the pght is defined by the direction and is emitted in every direction based on where you place it.

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

There are three different params for point pght −

    The 1st param is the name of the pght.

    The 2nd param is the position. Right now, it isplaced with negative -1 in the Y axis.

    The 3rd param is the scene to be attached.

Here, you can add color with the specular and diffuse property.

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

Demo

<!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>

Output

The above pne of code generates the following output −

Directional Light

BabylonJS - The Spot Light

Spot pght is just pke pght falpng in cone shape.

Syntax

Following is the syntax for the Spot Light −

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

There are five different params for point pght −

    1st Param is the name of the pght.

    2nd param is the position.

    3rd param is the direction.

    4th param is the angle.

    5th param is the exponent.

These values define a cone of pght starting from the position, emitting towards the direction. Specular and diffuse are used to control the color of the pght.

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

Demo

<!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 pght0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);
            pght0.diffuse = new BABYLON.Color3(0, 1, 0);
            pght0.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>

Output

The above pne of code generates the following output −

Spot Light

BabylonJS - The Hemispheric Light

A hemispheric pght is more of getting the environment pght. The direction of the pght is towards the sky. 3 colors are given to the pght; one for the sky, one for the ground and the last one for the specular.

Syntax

Following is the syntax for the Hemispheric Light −

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

For colors

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

Demo

<!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 pght0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);
            pght0.diffuse = new BABYLON.Color3(1, 0, 0);
            pght0.specular = new BABYLON.Color3(0, 1, 0);
            pght0.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>

Output

The above pne of code generates the following output −

Hemispheric Light Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全