Babylonjs-basic-elements

提供：Dev Guides
移動先:案内、検索

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 Basic Elements

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構造にscriptタグを追加し、キャンバス参照を変数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を呼び出します。これはシーンをレンダリングし、ユーザーに見えるようにします。 最終的なlは次のようになります- 

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

上記のファイルをbasicscenelとして保存し、ブラウザで出力を確認します。 表示される画面は、以下に示すようにピンク色です-

ピンク出力ブラウザー画面

ステップ5

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

カメラとライトを追加する

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

*ArcRotateCamera* は、ターゲットを中心に回転するカメラです。 マウス、カーソル、またはタッチイベントで制御できます。 必要なパラメーターは、名前、アルファ、ベータ、半径、ターゲット、およびシーンです。 カメラの詳細については、次のセクションで説明します。
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);

次に、光を追加する方法を理解する必要があります。

ライトは、各ピクセルが受け取る拡散および鏡面反射色を生成するために使用されます。 ライトには多くの種類があります。 ライトセクションでは、さまざまなタイプのライトについて学習します。

ここでは、シーンでPointLightを使用しています。 PointLightは、theSunのようなあらゆる方向に放出されます。 パラメータは、名前、位置、使用するシーンです。

光を追加するには、次のコードを実行します- 

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

ステップ6

形状を追加する方法を見てみましょう。

図形の追加

上記で共有したデモには、4つの図形が追加されています。

  • 球体
  • トーラス
  • Box
  • シリンダー

球体を追加するには、次のコードを実行します- 

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

次に、各形状について詳しく説明します。

ここにすべての形状と構文の概要があります-

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

基本要素-位置、回転、スケーリング

このセクションでは、これまでに追加した要素を配置、回転、または拡大縮小する方法を学習します。

箱、球、円柱、結び目などを作成しました。 次に、形状の配置、拡大縮小、回転の方法を確認します。

Sr.No. Element & Description
1

Position

位置を変更すると、メッシュはある位置から別の位置に変更されます。

2

Rotation

回転すると、メッシュはメッシュの周りを回転します。

3

Scaling

メッシュのスケーリングは、x、y、またはz軸に関して実行できます。

基本要素-子育て

Parentingを使用して、メッシュ間に親子関係を作成し、メッシュの動作を確認します。 したがって、親にどのような変換を適用しても、子にも同じ変換が適用されます。 以下に示すデモでも同じことを理解しましょう。

Demo

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

シーンフォグモード

これで、シーンフォグモードの仕組みを理解できます。

構文

次に、シーンフォグモードの構文を示します。 

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

利用可能なフォグモードの次のリスト-

  • BABYLON.Scene.FOGMODE_NONE -デフォルトの1つ。フォグは非アクティブです。
  • 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つの面があるため、スカイボックスに必要な画像は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/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。

基本要素Tshphere

キューブには6つの画像が必要です。 画像は、images/cubetexture/フォルダーにローカルに保存されます。 任意のイメージをダウンロードできますが、保存するときに、nameoftheimage_nx、nameoftheimage_ny、nameoftheimage_nz、nameoftheimage_px、nameoftheimage_py、nameoftheimage_pzとして保存します。 選択した画像は、背景がスカイボックスに表示されているもののように現実的に見えるように、連続している必要があります。

スカイボックスの作成に使用される画像は次のとおりです- images/cubetexture/skybox 

*skybox_nx*

Basic Element Skybox-nx 

*skybox_ny*

Basic Element Skybox-nx 

*skybox_nz*

Basic Element Skybox-nx 

*skybox_px*

Basic Element Skybox-nx 

*skybox_py*

Basic Element Skybox-nx 

*skybox_pz*

Basic Element Skybox-nx

「https://www.finddevguides.com/index.php?title=Babylonjs-basic-elements&oldid=35027」から取得
Powered by MediaWiki