BabylonJS - Огни - CoderLessons.com

В этой главе мы узнаем об источниках света, используемых для BabylonJS. Мы начнем с рассмотрения различных типов источников света, доступных в babylonjs.

Свет предназначен для создания диффузного и зеркального цвета, получаемого каждым пикселем. Позже, он используется на материале, чтобы получить окончательный цвет каждого пикселя.

Есть 4 типа светильников, доступных с babylonjs.

Point Light
Направленный свет
Прожектор
Свет полушария

BabylonJS — Point Light

Классическим примером точечного света является Солнце, лучи которого распространяются во всех направлениях. Точечный свет имеет уникальную точку в пространстве, откуда он распространяется во всех направлениях. Цвет света можно контролировать, используя зеркальное и рассеянное свойство.

Синтаксис

Ниже приводится синтаксис для Point Light —

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>

Выход

BabylonJS — Направленный свет

В направленном свете, свет определяется направлением и излучается в каждом направлении в зависимости от того, где вы его разместили.

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

Есть три разных параметра для точечного света —

Первый параметр — это название света.
Второй параметр — это позиция. Прямо сейчас он размещен с отрицательным -1 на оси Y.
^Третий параметр — это сцена, которая будет прикреплена.

Первый параметр — это название света.

Второй параметр — это позиция. Прямо сейчас он размещен с отрицательным -1 на оси Y.

^Третий параметр — это сцена, которая будет прикреплена.

Здесь вы можете добавить цвет с помощью свойства specular и diffuse.

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>

Выход

Выше строка кода генерирует следующий вывод —

BabylonJS — точечный свет

Точечный свет похож на свет, падающий в форме конуса.

Синтаксис

Ниже приводится синтаксис для Spot Spot —

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

Есть пять различных параметров для точечного света —

1- ^й Парам — это имя света.
Второй параметр — это позиция.
3- ^й параметр — это направление.
4- ^й параметр — угол.
5- ^й параметр — показатель степени.

Эти значения определяют конус света, исходящий из положения, излучающего в направлении. Зеркальный и рассеянный используются для управления цветом света.

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>

Выход

Выше строка кода генерирует следующий вывод —

BabylonJS — свет полушария

Полусферный свет — это больше света окружающей среды. Направление света в сторону неба. 3 цвета даны свету; один для неба, один для земли и последний для зеркального.

Синтаксис

Ниже приводится синтаксис для света полушария —

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>

Выход

Выше строка кода генерирует следующий вывод —

BabylonJS — Огни

BabylonJS — Point Light

Синтаксис

демонстрация

Выход

BabylonJS — Направленный свет

демонстрация

Выход

BabylonJS — точечный свет

Синтаксис

демонстрация

Выход

BabylonJS — свет полушария

Синтаксис

Для цветов

демонстрация

Выход

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности