BabylonJS - ไฟ

ในบทนี้เราจะเรียนรู้เกี่ยวกับไฟที่ใช้สำหรับ BabylonJS เราจะเริ่มต้นด้วยการดูไฟประเภทต่างๆที่มีให้กับ babylonjs

ไฟมีจุดมุ่งหมายเพื่อสร้างสีที่กระจายและเป็นพิเศษที่ได้รับจากแต่ละพิกเซล ต่อมาใช้กับวัสดุเพื่อให้ได้สีสุดท้ายของแต่ละพิกเซล

มีไฟให้เลือก 4 แบบกับ babylonjs

  • จุดไฟ
  • ทิศทางแสง
  • ไฟส่องเฉพาะจุด
  • แสงซีกโลก

BabylonJS - ไฟจุด

ตัวอย่างคลาสสิกของแสงแบบจุดคือดวงอาทิตย์ซึ่งรังสีจะกระจายไปทุกทิศทาง ไฟจุดมีจุดเฉพาะในอวกาศซึ่งกระจายแสงไปทุกทิศทาง สีของแสงสามารถควบคุมได้โดยใช้คุณสมบัติเฉพาะและการกระจายแสง

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ Point Light -

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

มีสามพารามิเตอร์ที่แตกต่างกันสำหรับไฟจุด -

  • พารามิเตอร์ตัวที่ 1 คือชื่อของแสง

  • พารามิเตอร์ตัวที่ 2 คือตำแหน่งที่จุดไฟ

  • พารามิเตอร์ตัวที่ 3 คือฉากที่จำเป็นต้องติดแสง

คุณสมบัติต่อไปนี้ใช้เพื่อเพิ่มสีให้กับวัตถุที่สร้างด้านบน -

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 เซนต์พระรามเป็นชื่อของแสง

  • 2 ครั้งพระรามเป็นตำแหน่ง ตอนนี้มันถูกแทนที่ด้วยลบ -1 ในแกน Y

  • 3 ถนนพระรามเป็นฉากที่จะแนบ

ที่นี่คุณสามารถเพิ่มสีด้วยคุณสมบัติ 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 Light -

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คือตำแหน่ง
  • 3 rd param คือทิศทาง
  • 4 THพระรามเป็นมุม
  • 5 THพระรามเป็นเลขชี้กำลัง

ค่าเหล่านี้กำหนดรูปกรวยของแสงโดยเริ่มจากตำแหน่งที่เปล่งไปยังทิศทาง Specular และ diffuse ใช้เพื่อควบคุมสีของแสง

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 สี หนึ่งสำหรับท้องฟ้าหนึ่งสำหรับพื้นดินและสิ่งสุดท้ายสำหรับ specular

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับแสงซีกโลก -

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>

เอาต์พุต

บรรทัดโค้ดด้านบนสร้างผลลัพธ์ต่อไปนี้ -