BabylonJS - 基本元素

Babylon.js 是一個流行的框架，可以幫助開發者構建 3D 遊戲。它具有內建函式來實現 3D 功能。讓我們使用 Babylon.js 構建一個簡單的演示，並瞭解入門所需的基本功能。

我們首先建立一個包含 Babylon.js 基本元素的演示。此外，我們還將學習 Babylon.js 的各種功能。

示例演示 1

在本節中，我們將學習如何建立一個包含 BabylonJS 基本元素的演示。

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</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(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            
            cylinder.position = new BABYLON.Vector3(5, 0, 0);	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

要執行 BabylonJS，我們需要支援 WebGL 的現代瀏覽器。最新的瀏覽器 - Internet Explorer 11+、Firefox 4+、Google Chrome 9+、Opera 15+ 等都支援 WebGL，並且可以在相同的平臺上執行演示以檢視輸出。建立一個目錄來儲存 babylonjs 的檔案。從 BabylonJS 網站獲取最新的 BabylonJS 指令碼檔案。本教程中的所有演示連結均已使用 babylonjs 3.3 版本進行了測試。

步驟 1

建立一個簡單的 html 頁面幷包含 Babylon.js 檔案。
建立一個 canvas 標籤，該標籤用於在 body 標籤內由 BabylonJS 渲染內容，如下所示。
向 canvas 新增 css 以佔據螢幕的全部寬度和高度。

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   <body>
      <canvas id = "renderCanvas"></canvas>
   </body>
</html>

步驟 2

現在讓我們開始使用 BabylonJS 程式碼在 canvas 上渲染內容。

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</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);
      </script>
   </body>
</html>

現在，將 script 標籤新增到 html 結構中，並將 canvas 引用儲存在變數 canvas 中。

要開始使用 Babylon.js，請建立一個引擎例項並將 canvas 引用傳遞給它以在其上進行渲染。

<script type = "text/javascript">
   var canvas = document.getElementById("renderCanvas");
   var engine = new BABYLON.Engine(canvas, true);
</script>

BABYLON 全域性物件包含引擎中可用的所有 Babylon.js 函式。

步驟 3

在此步驟中，我們將首先建立一個場景。

場景是所有內容將顯示的地方。我們將建立不同型別的物件並將它們新增到場景中，以便在螢幕上可見。要建立場景，請將以下程式碼新增到已建立的 html 結構中。目前，我們將作為對上述 html 結構的延續新增到已建立的程式碼中。

var createScene  = function() {
   var scene = new BABYLON.Scene(engine);
   scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();

最終的 html 檔案如下所示：

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>MDN Games: Babylon.js demo - shapes</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(0, 1, 0);
            return scene;
         };
         var scene = createScene();
      </script>
   </body>
</html>

在上面的示例中，定義了 CreateScene 函式，而 var scene = createScene() 正在呼叫該函式。

CreateScene 函式在其內部建立了場景，下一行向場景新增顏色，這是使用 BABYLON.Color3(1, 0.8, 0.8) 完成的，這裡的顏色是粉色。

var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);

在瀏覽器中執行上述演示連結現在不會在瀏覽器螢幕上顯示任何內容。程式碼中還需要新增一個步驟，即步驟 4 中的 engine.runRenderLoop。

步驟 4

為了使場景實際可見，我們需要使用 engine.runRenderLoop 呼叫來渲染它。現在讓我們看看這是如何完成的。

渲染迴圈

engine.runRenderLoop(function() {
   scene.render();
});

Engine.runRenderLoop 函式呼叫 scene.render，這將渲染場景並使其對使用者可見。最終的 .html 將如下所示：

<!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(1, 0.8, 0.8);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

將上述檔案儲存為 basicscene.html 並檢查瀏覽器中的輸出。顯示的螢幕為粉紅色，如下所示：

步驟 5

現在我們有了場景，我們必須向其中新增相機。

新增相機和燈光

下面給出的程式碼將相機新增到場景中。Babylon 中可以使用許多型別的相機。

**ArcRotateCamera** 是一種圍繞目標旋轉的相機。它可以使用滑鼠、游標或觸控事件進行控制。所需的引數包括名稱、alpha、beta、radius、target 和場景。我們將在後續章節中討論相機的詳細資訊。

var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

現在，我們需要了解如何新增燈光。

燈光用於產生每個畫素接收到的漫反射和鏡面反射顏色。有很多型別的燈光。我們將在燈光部分學習不同型別的燈光。

在這裡，我在場景上使用 PointLight。PointLight 向各個方向發射光線，就像太陽一樣。引數是名稱、位置和要使用的場景。

要新增燈光，請執行以下程式碼：

var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);

步驟 6

現在讓我們看看如何新增形狀。

新增形狀

上面共享的演示添加了 4 個形狀。

球體
圓環
盒子
圓柱體

要新增球體，請執行以下程式碼：

var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);

新增球體後，程式碼如下所示：

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>MDN Games: Babylon.js demo - shapes</title>
      <script src = "babylon.js"></script>
      <style>
         html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
      </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(1, 0.8, 0.8);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            scene.activeCamera.attachControl(canvas);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

上述程式碼生成以下輸出：

現在讓我們新增其他形狀——圓環和盒子。執行以下程式碼以新增圓環形狀。

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);

我們將向盒子新增一個位置。BABYLON.Vector3(-5, 0, 0) 獲取 x、y 和 z 方向。

執行後，上述程式碼生成以下輸出：

現在讓我們新增上面螢幕截圖中顯示的最終形狀——圓柱體。

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);

位置被新增到圓柱體，即 x 方向 5。最終程式碼如下所示：

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo2</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(1, 0.8, 0.8);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
            
            var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
            
            var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
            
            var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
            
            var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
            box.position = new BABYLON.Vector3(-5, 0, 0); 
            
            var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
            cylinder.position = new BABYLON.Vector3(5, 0, 0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

執行後，上述程式碼將生成以下輸出：

形狀將根據您移動游標的方向移動；這使用相機的 attach control 到場景來完成。

scene.activeCamera.attachControl(canvas);

現在讓我們詳細討論每個形狀。

以下是所有形狀和語法的總結：


var box = BABYLON.Mesh.CreateBox(
   "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var sphere = BABYLON.Mesh.CreateSphere(
   "sphere", 10.0, 10.0, scene, 
   false, BABYLON.Mesh.DEFAULTSIDE);
var plane = BABYLON.Mesh.CreatePlane(
   "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var disc = BABYLON.Mesh.CreateDisc(
   "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
var cylinder = BABYLON.Mesh.CreateCylinder(
   "cylinder", 3, 3, 3, 6, 1, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var torus = BABYLON.Mesh.CreateTorus(
   "torus", 5, 1, 10, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var knot = BABYLON.Mesh.CreateTorusKnot(
   "knot", 2, 0.5, 128, 64, 2, 3, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var lines = BABYLON.Mesh.CreateLines("lines", [
   new BABYLON.Vector3(-10, 0, 0),
   new BABYLON.Vector3(10, 0, 0),
   new BABYLON.Vector3(0, 0, -10),
   new BABYLON.Vector3(0, 0, 10)
], scene);
var dashedlines = BABYLON.Mesh.CreateDashedLines(
   "dashedLines", [v1, v2, ... vn], 
   dashSize, gapSize, dashNb, scene);
var ribbon = BABYLON.Mesh.CreateRibbon(
   "ribbon", 
   [path1, path2, ..., pathn], 
   false, false, 0, 
   scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var tube = BABYLON.Mesh.CreateTube(
   "tube", 
   [V1, V2, ..., Vn], 
   radius, tesselation, 
   radiusFunction, 
   cap, scene, false, 
   BABYLON.Mesh.DEFAULTSIDE);
var ground = BABYLON.Mesh.CreateGround(
   "ground", 6, 6, 2, scene);
var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
   "ground", "heightmap.jpg", 200, 200, 250, 0, 10, 
   scene, false, successCallback);
var precision = {"w" : 2, "h" : 2};
var subdivisions = {'h' : 8, 'w' : 8};
var tiledGround = BABYLON.Mesh.CreateTiledGround(
   "Tiled Ground", -3, -3, 3, 3, 
   subdivisions, precision, scene, false);

序號	形狀	語法
1	盒子	var box = BABYLON.Mesh.CreateBox( "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
2	球體	var sphere = BABYLON.Mesh.CreateSphere( "sphere", 10.0, 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
3	平面	var plane = BABYLON.Mesh.CreatePlane( "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
4	圓盤	var disc = BABYLON.Mesh.CreateDisc( "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
5	圓柱體	var cylinder = BABYLON.Mesh.CreateCylinder( "cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);
6	圓環	var torus = BABYLON.Mesh.CreateTorus( "torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
7	紐結	var knot = BABYLON.Mesh.CreateTorusKnot( "knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
8	線網格	var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(-10, 0, 0), new BABYLON.Vector3(10, 0, 0), new BABYLON.Vector3(0, 0, -10), new BABYLON.Vector3(0, 0, 10) ], scene);
9	虛線	var dashedlines = BABYLON.Mesh.CreateDashedLines( "dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, scene);
10	飄帶	var ribbon = BABYLON.Mesh.CreateRibbon( "ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
11	管狀	var tube = BABYLON.Mesh.CreateTube( "tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);
12	地面	var ground = BABYLON.Mesh.CreateGround( "ground", 6, 6, 2, scene);
13	來自高度圖的地面	var ground = BABYLON.Mesh.CreateGroundFromHeightMap( "ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);
14	平鋪地面	var precision = {"w" : 2, "h" : 2}; var subdivisions = {'h' : 8, 'w' : 8}; var tiledGround = BABYLON.Mesh.CreateTiledGround( "Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);

基本元素 - 位置、旋轉和縮放

在本節中，我們將學習如何定位、旋轉或縮放迄今為止新增的元素。

我們建立了盒子、球體、圓柱體、紐結等。現在，我們將瞭解如何定位、縮放和旋轉形狀。

序號	元素和描述
1	位置隨著位置變化，網格將從一個位置更改為另一個位置。
2	旋轉旋轉後，網格將圍繞網格旋轉。
3	縮放網格的縮放可以相對於 x、y 或 z 軸進行。

基本元素 - 父子關係

使用父子關係，我們將建立網格之間的父子關係，並檢視它們的行為方式。因此，您對父級應用的任何轉換都將應用於子級。現在讓我們使用下面顯示的演示來理解這一點。

演示

<!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(0, 1, 0);
         
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            scene.activeCamera.attachControl(canvas);
         
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);

            var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
            boxa.position = new BABYLON.Vector3(0,0.5,0);

            var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
            boxb.position = new BABYLON.Vector3(3,0.5,0);		
            boxb.scaling = new BABYLON.Vector3(2,1,2);

            var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
            boxc.parent = boxb;
            boxc.position.z = -3;
         
            var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
            ground.position = new BABYLON.Vector3(0,0,0);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

解釋

我們在上述網格中建立了 3 個盒子。在演示中，應用了 boxb 縮放，並將其分配為 boxc 的父級，boxc 也進行縮放，因為它 boxb 的父級，並且也進行了縮放。您可以隨意使用該演示來了解父子連結的工作方式。

要製作網格，您必須使用另一個網格的父級：

child.parent = parentmesh;

基本元素 - 環境

現在讓我們在本節中討論場景環境。我們將討論場景中的**場景背景顏色、環境顏色、天空盒、霧模式**等。

我們已經看到我們在迄今為止建立的演示中的**場景背景顏色**。

場景背景顏色

現在讓我們看看場景背景顏色是如何工作的。

語法

以下是場景背景顏色的語法：

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();

上述屬性將更改場景的背景顏色。

場景環境顏色

現在讓我們看看場景環境顏色是如何工作的。

語法

以下是場景環境顏色的語法：

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

AmbientColor 與**StandardMaterial** 環境顏色和紋理一起使用。如果場景沒有 ambientColor，則**StandardMaterial.ambientColor** 和 **StandardMaterial.ambientTexture** 將不起作用。一旦應用了場景的 ambientColor，StandardMaterial ambientColor/ambientTexture 將處於活動狀態。預設情況下，場景被賦予 **scene.ambientColor** 並設定為 **Color3**(0, 0, 0)，這意味著沒有 ambientColor。

場景霧模式

我們現在將瞭解場景霧模式是如何工作的。

語法

以下是場景霧模式的語法。

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

以下是可以使用的霧模式列表：

**BABYLON.Scene.FOGMODE_NONE** - 預設值，霧已停用。
**BABYLON.Scene.FOGMODE_EXP** - 霧密度遵循指數函式。
**BABYLON.Scene.FOGMODE_EXP2** - 與上面相同，但速度更快。
**BABYLON.Scene.FOGMODE_LINEAR** - 霧密度遵循線性函式。

如果定義了霧模式 EXP 或 EXP2，則可以如下定義其密度：

scene.fogDensity = 0.01;

如果霧模式是 LINEAR，則可以定義霧的起始和結束位置，如下所示：

scene.fogStart = 20.0;
scene.fogEnd = 60.0;

要為霧著色，請執行以下程式碼：

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

天空盒

天空盒是在遊戲中建立背景的一種方式，它使場景看起來更逼真。它更像是圍繞螢幕的包裝器，其覆蓋的紋理用於材質。正確選擇影像以使您要建立的場景看起來更逼真。要建立天空盒，您必須建立一個盒子並將其應用到材質。我們將在後續章節中詳細討論不同的材質。

現在，我們將看到如何使用盒子和材質建立天空盒。

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

我們將建立一個大小為 100 的盒子，以便它覆蓋整個場景。我們將首先為盒子賦予材質，方法如下：

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

我們將為該材質分配屬性。

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);

我們必須使用反射紋理，它基本上用於建立類似鏡子的材質。反射紋理屬性使用CubeTexture，它以影像作為輸入。由於立方體有6個面，天空盒所需的影像必須是6個，即內部必須儲存為skybox_nx、skybox_ny、skybox_nz、skybox_px、skybox_py、skybox_pz。用於天空盒的影像貼上在下面；它們是立方體六個面上的面。當您將紋理應用於形狀時，它會提供所用影像的細節，並使場景看起來更逼真。我們使用SKYBOX_MODE作為座標模式，如下所示：

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

材質還使用了其他屬性，例如backfaceCulling、diffuseColor、specularColor、disableLighting等。這些屬性將在材質部分詳細解釋。

在本演示中，我們將展示一個使用天空盒建立的環境場景、一個在場景中旋轉的球體和一個四處移動的平面。霧應用於場景，旋轉時您會注意到。

演示環境場景

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title> Babylon.JS : Demo</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);
            var light = new BABYLON.PointLight("Omni", 
            new BABYLON.Vector3(10, 50, 50), scene);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
            camera.attachControl(canvas, true);

            var material1 = new BABYLON.StandardMaterial("mat1", scene);
            material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);

            var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
            sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
            sphere.material = material1;		

            // Fog
            scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
            scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
            scene.fogDensity = 0.01;

            //skybox		
            var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
            
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            
            skyboxMaterial.disableLighting = true;
            skybox.material = skyboxMaterial;


            var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
            
            var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
            plane.position.x = -2;
            plane.position.y = 2;	
            plane.position.z = 0;	


            var alpha = 0;
            var x = 2;
            var y = 0;
            scene.registerBeforeRender(function () {
               scene.fogDensity = Math.cos(alpha) / 10;
               alpha += 0.02;
               sphere.rotation.y += 0.01;
               y += 0.05; 
               if (x > 50) {
                  x = -2;
               }
               plane.position.x = -x;
               x += 0.02; 
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

解釋

在上面的示例中，我們使用以下程式碼實現了霧：

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;

scene.fogMode = BABYLON.Scene.FOGMODE_EXP − 此處，霧密度遵循指數函式。
scene.registerBeforeRender = 透過此函式，霧密度會發生如下變化：

var alpha = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
});

alpha的值在迴圈中不斷增加0.02，如上函式所示。

在這裡，我們添加了一個平面精靈影像，並使用scene.registerBeforeRender函式更改其位置，如下所示：

var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
   scene.fogDensity = Math.cos(alpha) / 10;
   alpha += 0.02;
   sphere.rotation.y += 0.01;
   y += 0.05; 
   if (x > 50) {
      x = -2;
   }
   plane.position.x = -x;
   x += 0.02; 
});
return scene;
};s

我們將更改平面的x軸，並在其超過50時重置它。

此外，球體沿y軸旋轉。這在上例中所示。值使用sphere.rotation.y更改。

球體使用的紋理是：images/tshphere.jpg。影像儲存在本地images/資料夾中，並在下面貼上以供參考。您可以下載您選擇的任何影像，並在演示連結中使用。

我們需要六張立方體影像。這些影像儲存在本地images/cubetexture/資料夾中。您可以下載任何您選擇的影像，但是當您儲存它時，請將其儲存為nameoftheimage_nx、nameoftheimage_ny、nameoftheimage_nz、nameoftheimage_px、nameoftheimage_py、nameoftheimage_pz。請注意，選擇的影像應按順序排列，以便背景看起來像天空盒所示的那樣逼真。

用於製作天空盒的影像是：images/cubetexture/skybox

skybox_nx

skybox_ny

skybox_nz

skybox_px

skybox_py

skybox_pz

列印頁面

序號	元素和描述
1	位置隨著位置變化，網格將從一個位置更改為另一個位置。
2	旋轉旋轉後，網格將圍繞網格旋轉。
3	縮放網格的縮放可以相對於 x、y 或 z 軸進行。