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をサポートする最新のブラウザが必要です。最新のブラウザ-InternetExplorer 11以降、Firefox 4以降、Google Chrome 9以降、Opera 15以降などはWEBGLをサポートしており、同じプラットフォームでデモを実行して出力を確認できます。babylonjsのファイルを保存するディレクトリを作成します。BabylonJSサイトから最新のBabylonJSscriptsファイルを取得します。このチュートリアルのすべてのデモリンクは、babylonjsバージョン3.3でテストされています。

ステップ1

  • 簡単なhtmlページを作成し、Babylon.jsファイルを含めます。

  • 以下に示すように、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

キャンバスにコンテンツをレンダリングするための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);

上記のデモリンクをブラウザで実行しても、ブラウザの画面には現在何も表示されません。ステップ4と同様に、engine.runRenderLoopと呼ばれるコードに追加するステップがもう1つあります。

ステップ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

シーンができたので、それにカメラを追加する必要があります。

カメラとライトの追加

以下のコードは、シーンにカメラを追加します。バビロンで使用できるカメラには多くの種類があります。

ArcRotateCameraターゲットを中心に回転するカメラです。マウス、カーソル、またはタッチイベントで制御できます。必要なパラメータは、名前、アルファ、ベータ、半径、ターゲット、およびシーンです。次のセクションでカメラの詳細について説明しましょう。

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

ここで、それぞれの形状について詳しく説明します。

これがすべての形と構文の要約です-

シニア番号 形状 構文
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 HeightMapからの地面 
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 ポジション

位置を変更すると、メッシュが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の親として割り当てられます。これは、親boxbと同じものがスケーリングされるため、同じくスケーリングされます。デモを試して、親子リンクがどのように機能するかを確認できます。

メッシュを作成するには、別のメッシュの親を使用する必要があります-

  • child.parent = parentmesh;

基本要素-環境

このセクションでは、シーン環境について説明します。私たちはについて話しますscene background color, ambientcolor, skyboxes, fog modeシーンのなど。

私たちは見た scene background color is demos これまでに作成したものです。

シーンの背景色

シーンの背景色がどのように機能するかを見てみましょう。

構文

以下は、シーンの背景色の構文です。

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が適用されると、StandardMaterialambientColor / ambientTextureがアクティブになります。デフォルトでは、シーンが与えられますscene.ambientColor に設定します Color3 （0、0、0）、これはアンビエントカラーがないことを意味します。

シーンフォグモード

これで、シーンフォグモードがどのように機能するかを理解できます。

構文

以下は、シーンフォグモードの構文です。

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は、シーンをリアルに見せるためにゲームの背景を作成する方法です。これは、マテリアルに使用されているテクスチャでカバーする、画面のラッパーのようなものです。画像を適切に選択して、作成するシーンにリアルに見えるようにします。スカイボックスを作成するには、ボックスを作成してマテリアルを適用する必要があります。さまざまな資料については、次の章で詳しく説明します。

次に、ボックスとマテリアルを使用してスカイボックスを作成する方法を説明します。

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つの面があるため、skyboxに必要な画像は6である必要があります。つまり、内部的にはskybox_nx、skybox_ny、skybox_nz、skybox_px、skybox_py、skybox_pzとして保存する必要があります。スカイボックスに使用される画像は下に貼り付けられています。それらは、6つの側面すべてが立方体の面です。シェイプにテクスチャを適用すると、使用されている画像の詳細が表示され、シーンがリアルに見えます。以下に示すように、座標モードを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 /フォルダーに保存され、参照用に以下に貼り付けられます。任意の画像をダウンロードして、デモリンクで使用できます。

立方体には6つの画像が必要です。画像はローカルで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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved