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 站点获取最新的 BabylonJSscripts 文件。本教程中的所有演示链接均使用 babylonjs 3.3 版进行测试。

步骤 1

创建一个简单的 html 页面并包含 Babylon.js 文件。在 body 标签中创建一个用于由 BabylonJS 渲染内容的画布标签，如下所示。将 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

现在让我们从用于在画布上渲染内容的 BabylonJScode 开始。

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

现在，将脚本标记添加到 html 结构并将画布引用存储在变量 canvas 中。

要开始使用 Babylon.js，请创建一个引擎实例并传递画布引用以在其上进行渲染。

<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);

在浏览器中执行上面的演示链接现在不会在浏览器屏幕上显示任何内容。还有一个步骤要添加到代码中，称为 engine.runRenderLoop，如步骤 4 中所述。

步骤 4

为了使场景在屏幕上真正可见，我们需要使用 engine.runRenderLoop 调用来渲染它。现在让我们看看这是如何完成的。

Rendering Loop

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

现在我们有了场景，我们必须给它添加摄像头。

Adding Camera and Light

下面给出的代码将相机添加到场景中。可以在巴比伦上使用的相机有很多种。

ArcRotateCamera 是一个围绕目标旋转的相机。它可以通过鼠标、光标或触摸事件进行控制。所需的参数是名称、alpha、beta、半径、目标和场景。让我们在后续部分讨论相机的细节。

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 个形状。

Sphere Torus Box Cylinder

要添加球体，请执行以下代码-

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>

输出

执行后，上面的代码将生成以下输出-

形状将按照您移动光标的方向移动；使用相机的附加控件到场景中也是如此。

scene.activeCamera.attachControl(canvas);

现在让我们详细讨论每种形状。

这是所有形状和语法的摘要-

形状	语法
Box	var box = BABYLON.Mesh.CreateBox( "box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Sphere	var sphere = BABYLON.Mesh.CreateSphere( "sphere", 10.0, 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Plane	var plane = BABYLON.Mesh.CreatePlane( "plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Disc	var disc = BABYLON.Mesh.CreateDisc( "disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Cylinder	var cylinder = BABYLON.Mesh.CreateCylinder( "cylinder", 3, 3, 3, 6, 1, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Torus	var torus = BABYLON.Mesh.CreateTorus( "torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Knot	var knot = BABYLON.Mesh.CreateTorusKnot( "knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Line Mesh	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);
Dashes Lines	var dashedlines = BABYLON.Mesh.CreateDashedLines( "dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, scene);
Ribbon	var ribbon = BABYLON.Mesh.CreateRibbon( "ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Tube	var tube = BABYLON.Mesh.CreateTube( "tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);
Ground	var ground = BABYLON.Mesh.CreateGround( "ground", 6, 6, 2, scene);
Ground From HeightMap	var ground = BABYLON.Mesh.CreateGroundFromHeightMap( "ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);
Tiled Ground	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);

Basic Element - Position, Rotation and Scaling

在本节中，我们将学习如何定位、旋转或缩放我们目前添加的元素。

我们已经创建了长方体、球体、圆柱体、结等。现在，我们将了解如何定位、缩放和旋转形状。

元素和描述

Position

随着位置的变化，网格会从一个位置改变到另一个位置。

Rotation

随着旋转，网格将围绕网格旋转。

Scaling

网格的缩放可以相对于 x、y 或 z 轴进行。

Basic Element - Parenting

有了Parenting，我们将在网格之间创建父子关系并查看它们的行为。所以无论你对父级应用什么转换，同样的也将应用于子级。现在让我们通过下面显示的演示来理解相同的内容。

演示

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

Basic Element - Environment

现在让我们讨论本节中的场景环境。我们将讨论一个场景中的 场景背景色、环境色、天空盒、雾模式等。

我们已经看到了我们迄今为止创建的 场景背景颜色是演示。

Scene background-color

现在让我们看看场景背景颜色是如何工作的。

语法

以下是场景背景颜色的语法-

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

以上属性会改变场景的背景颜色。

Scene Ambient color

现在让我们看看场景环境颜色是如何工作的。

语法

以下是场景环境颜色的语法-

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

AmbientColor 与 StandardMaterial 环境颜色和纹理一起使用。如果场景没有ambientColor， StandardMaterial.ambientColor 和 StandardMaterial.ambientTexture 没有效果。一旦应用了场景的环境颜色，StandardMaterialambientColor/ambientTexture 将变为活动状态。默认情况下，场景被赋予 scene.ambientColor 并设置为 Color3 (0, 0, 0)，这意味着没有ambientColor。

Scene Fog mode

我们现在将了解场景雾模式的工作原理。

语法

以下是场景雾模式的语法。

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);

Skybox

Skybox 是一种在游戏中创建背景的方法，使场景看起来逼真。它更像是屏幕周围的包装纸，上面覆盖着用于材料的纹理。正确选择您的图像，使其看起来适合您要创建的场景。要创建天空盒，您必须创建一个盒子并为其应用材质。我们将在后续章节中详细讨论不同的材料。

现在，我们将看到如何使用盒子和材质创建天空盒。

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 等。这些属性在材质部分有详细说明。

在演示中，我们将展示一个使用天空盒创建的环境场景、一个在场景中旋转的球体和一个四处移动的平面。雾应用于场景，旋转时您会注意到。

Demo展示环境场景

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

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< BabylonJS 概述 BabylonJS 材料 >>

昵称：邮箱：