Babylonjs-quick-guide
提供：Dev Guides
BabylonJS-はじめに
Babylon.jsは、ウェブ用の3Dアプリケーション/ビデオゲームの開発に使用されるjavascriptオープンソースフレームワークです。 BabylonJSの公式Webサイトはhttps://www.babylonjs.com/[www.babylonjs.com]です。
Babylon.jsフレームワークの使用はユーザーにとって簡単です。 3Dオブジェクト、特殊効果、サウンドなどを作成および管理するために必要なすべてのツールが含まれています。
Babylon.jsは最も人気のある3Dゲームエンジンの1つであり、開発者によって広く使用されています。 3Dライブラリであるため、組み込み関数を提供します。 これらの関数は、効率的で正確な方法で一般的な3D機能を実装するのに役立ちます。
WebGLとjavascriptに基づくTypeScript言語を使用して開発されています。
WebGLとは何ですか？
WebGL（Web Graphics Library）は、Web上の3Dグラフィックスの新しい標準です。 2Dグラフィックとインタラクティブな3Dグラフィックのレンダリングを目的に設計されています。 これは、電話やその他のモバイルデバイス向けの低レベル3D APIであるOpenGLのES 2.0ライブラリから派生しています。 WebGLはES 2.0（Embedded Systems）と同様の機能を提供し、最新の3Dグラフィックスハードウェアで良好に機能します。
TypeScript
定義では、「TypeScriptはアプリケーション規模の開発のためのJavaScriptです。」
TypeScriptは、強く型付けされたオブジェクト指向のコンパイル言語です。 TypeScriptは言語であり、ツールのセットでもあります。 TypeScriptは、JavaScriptにコンパイルされたJavaScriptの型付きスーパーセットです。 つまり、TypeScriptはJavaScriptといくつかの追加機能です。
TypeScript言語の目標は、JavaScriptコードの生成を改善および保護することです。BabylonJSはTypScriptを使用して開発されているため、堅牢で安全です。
BabylonJS-環境設定
この章では、BabylonJSの環境を設定する方法を学びます。
セットアップを開始するには、Babylon.jsの公式Webサイト（https://www.babylonjs.com/[www.babylonjs.com]）にアクセスしてください。 ダウンロードセクションに移動して、Babylon.jsの最新バージョンを選択し、フォルダーに保存します。
同じためのスクリーンショットは次のとおりです-
また、GITHUBに移動して、babylonjsプロジェクトのクローンを作成することもできます-
コマンドラインで次のように入力します-
git clone https://github.com/BabylonJS/Babylon.js.git
go to cd BabylonJS/
npm install必要なファイルは、BabylonJSフォルダーにあります。
VSCode（Microsoft Visual Studio Code）を編集に使用できます。コードには、エラーの強調表示、構文の強調表示などの機能が組み込まれています。 任意のエディターを使用できますが、VSCodeのみを使用することは必須ではありません。
BabylonJS-概要
*BabylonJS* は、HTML5とWEBGLを使用して3Dゲームを構築するためのオープンソースのJavascriptフレームワークです。githubでホストされています。BabylonJSの公式Webサイトはhttps://www.babylonjs.com/[www.babylonjs.com。]です。3Dアニメーションの世界では、形状は三角形で描画されます。WebGLでは、プロセスに関係する大量のコーディングによって複雑さが増します。 BabylonJSは、複雑さの増大を緩和するための取り組みが簡単なソリューションです。 ここでは、ライト、カメラ、エンジンのAPIを簡単に処理し、3Dオブジェクトを作成できます。
babylonJSのソースコードはtypescriptでコーディングされています。Javascriptにコンパイルされ、エンドユーザーが利用できるようになります。
Babylonjsでの作業を開始するには、babylonjsファイルをダウンロードし、最後にホストしてください。3Dコードを書き始める準備ができています。
BabylonJSは2016年にMicrosoftの従業員によって開発されました。MicrosoftのWindow＆Devices GroupのプリンシパルプログラムマネージャーであるDavid Catuheは、BabylonJsの開発と大成功を収めた主な人物です。
BabylonJSを実行するには、WEBGLをサポートする最新のブラウザーが必要です。 Internet Explorer 11以上、Firefox 4以上、Google Chrome 9以上、Opera 15以上などの最新のブラウザ WEBGLをサポートしており、デモを実行して出力を確認できます。
BabylonJsは、さまざまなタイプの3Dシーンの作成に役立つ以下の機能を提供します-
- 箱、球、円柱、円錐、高さのような形
- カメラ、ライト
- メッシュ、テクスチャ、マテリアル
- スプライト
- モーフィング
- メッシュ交差点と衝突検出
- 物理エンジンプラグイン
- アクションマネージャー
- SolidParticles
- インスタンスとパーティクル
- 骨とスケルトンのサポート
- シーンに音楽とサウンドを追加する
BabylonJSでは、独自のメッシュに加えて、Blender、FBX、3DS Maxなどのサードパーティの3Dソフトウェアから作成されたメッシュを使用することもできます。
ブレンダー
Blenderは、アニメーションシーン、3Dプリントモデル、ビデオゲームなどの作成に使用されるオープンソースの3Dコンピュータグラフィックスソフトウェア製品です。 Blenderが提供します。 バビロンでメッシュをレンダリングするために使用されるbablyonファイル。 ファイルをBlenderからBabylonに変換する方法は、このチュートリアルの後続の章で説明されています。
FBX
フィルムボックスとも呼ばれ、3Dアニメーションおよびテクスチャペイントソフトウェアに役立ちます。 FBXファイルは、拡張子.fbxで保存されます。
MAX
MAXソフトウェアは、ゲームで巨大な世界を作成し、デザインの魅力的なシーンを作成し、バーチャルリアリティの魅力的な体験を支援します。
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構造に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 |
|
| 2 | Sphere |
|
| 3 | Plane |
|
| 4 | Disc |
|
| 5 | Cylinder |
|
| 6 | Torus |
|
| 7 | Knot |
|
| 8 | Line Mesh |
|
| 9 | Dashes Lines |
|
| 10 | Ribbon |
|
| 11 | Tube |
|
| 12 | Ground |
|
| 13 | Ground From HeightMap |
|
| 14 | Tiled Ground |
|
基本要素-位置、回転、スケーリング
このセクションでは、これまでに追加した要素を配置、回転、または拡大縮小する方法を学習します。
箱、球、円柱、結び目などを作成しました。 次に、形状の配置、拡大縮小、回転の方法を確認します。
| Sr.No. | Element & Description |
|---|---|
| 1 |
位置を変更すると、メッシュはある位置から別の位置に変更されます。 |
| 2 |
回転すると、メッシュはメッシュの周りを回転します。 |
| 3 |
メッシュのスケーリングは、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/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
キューブには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*BabylonJS-材料
材料はオブジェクトの服のようなものです。 色、テクスチャを追加し、それでメッシュをラップできます。 同じマテリアルを使用して、多くのメッシュをカバーできます。 メッシュは、前の章の例で見たシーン、つまり空を通過する平面になります。
この章では、この章でメッシュの色、テクスチャ、反射を追加する方法を学びます。
作成済みのシーンにマテリアルを追加します。 作成したすべてのシェイプにマテリアルを追加して進めていきます。
いくつかの例を考えて、素材の追加がどのように機能するかを見てみましょう。
構文
var materialforshapes = new BABYLON.StandardMaterial("texture1", scene);上記の素材はデフォルトであるため、何も変更されません。 利用可能なプロパティを使用して、オブジェクトをより魅力的に見せます。
利用可能なプロパティは次のとおりです-
- リンク：/babylonjs/babylonjs_transparency [透明度]
- リンク：/babylonjs/babylonjs_diffuse [拡散]
- リンク：/babylonjs/babylonjs_emissive [Emissive]
- リンク：/babylonjs/babylonjs_ambient [環境光]
- リンク：/babylonjs/babylonjs_specular [鏡面反射光]
- リンク：/babylonjs/babylonjs_backface_culling [裏面カリング]
- リンク：/babylonjs/babylonjs_wireframe [WireFrame]
これらのプロパティがマテリアルに適用され、メッシュのルックアンドフィールがどのように変化するかを見てみましょう。
基本的な材料特性-FresnelParameters
フレネルは、BabylonJSによって standardmaterial に追加された新しいものです。 図形に適用される色を変更できます。 シンプルなフレネルを使用すると、ガラスのような反射を得ることができます。 フレネルを使用すると、すべてではなく中央部でエッジをより反射させることができます。
フレネルでは次のプロパティを使用できます
StandardMaterial.diffuseFresnelParameters
StandardMaterial.opacityFresnelParameters
StandardMaterial.reflectionFresnelParameters
StandardMaterial.emissiveFresnelParameters
StandardMaterial.refractionFresnelParametersDemo
<!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);
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.setPosition(new BABYLON.Vector3(0, 5, -10));
camera.attachControl(canvas);
camera.upperBetaLimit = Math.PI/2;
camera.lowerRadiusLimit = 4;
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.4, 128, 64, 2, 3, scene);
var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere", 16, 1.5, scene);
yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(3, 0, 0));
var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
yellowSphere.material = yellowMaterial;
//Ground
var ground = BABYLON.Mesh.CreateBox("Mirror", 1.0, scene);
ground.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
ground.material = new BABYLON.StandardMaterial("ground", scene);
ground.material.diffuseTexture = new BABYLON.Texture("images/rainbow.png", scene);
ground.material.diffuseTexture.uScale = 10;
ground.material.diffuseTexture.vScale = 10;
ground.position = new BABYLON.Vector3(0, -2, 0);
//Main material
var mainMaterial = new BABYLON.StandardMaterial("main", scene);
knot.material = mainMaterial;
var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(yellowSphere);
probe.renderList.push(ground);
mainMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0.5);
mainMaterial.refractionTexture = probe.cubeTexture;
mainMaterial.refractionFresnel<h3>Parameters</h3> = new BABYLON.Fresnel<h3>Parameters</h3>();
mainMaterial.refractionFresnel<h3>Parameters</h3>.bias = 0.5;
mainMaterial.refractionFresnel<h3>Parameters</h3>.power = 16;
mainMaterial.refractionFresnel<h3>Parameters</h3>.leftColor = BABYLON.Color3.Black();
mainMaterial.refractionFresnel<h3>Parameters</h3>.rightColor = BABYLON.Color3.White();
mainMaterial.indexOfRefraction = 1.05;
//Fog
scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR;
scene.fogColor = scene.clearColor;
scene.fogStart = 20.0;
scene.fogEnd = 50.0;
//Animations
scene.registerBeforeRender(function () {
yellowSphere.rotation.y += 0.01;
// greenSphere.rotation.y += 0.01;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
基本マテリアルプロパティ-FresnelParameters
説明
次のコードは、フレネル効果を適用します。 左と右の色がメッシュの端に適用されます。
mainMaterial.refractionFresnelParameters = new BABYLON.FresnelParameters();
mainMaterial.refractionFresnelParameters.bias = 0.5;
mainMaterial.refractionFresnelParameters.power = 16;
mainMaterial.refractionFresnelParameters.leftColor = BABYLON.Color3.Black();
mainMaterial.refractionFresnelParameters.rightColor = BABYLON.Color3.White();バイアスとパワープロパティは、表面のフレネル効果を制御します。
このデモでは、rainbow.pngという画像を使用しました。 画像はローカルのimages/フォルダーに保存されます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
BabylonJS-アニメーション
アニメーションはシーンをよりインタラクティブにし、リアルな外観を与える印象的なものにします。 アニメーションを詳細に理解しましょう。 図形にアニメーションを適用して、ある位置から別の位置に移動します。 アニメーションを使用するには、必要なパラメーターを使用してアニメーション上にオブジェクトを作成する必要があります。
同じものの構文を見てみましょう-
var animationBox = new BABYLON.Animation(
"myAnimation",
"scaling.x",
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);パラメーター
BabylonJSを使用したアニメーションに関連する以下のパラメーターを考慮してください-
アニメーションの名前。
形状のプロパティ–スケーリング、位置の変更など。 スケーリングは、構文に示されているものです。ここでは、x軸に沿ってボックスを拡大縮小します。
要求された1秒あたりのフレーム数：このアニメーションで可能な最高のFPS。
ここで、変更する値の種類を決定して入力します。それはフロートですか（例： 翻訳）、ベクトル（例： 方向）、またはクォータニオン。
正確な値は-
- BABYLON.Animation.ANIMATIONTYPE_FLOAT
- BABYLON.Animation.ANIMATIONTYPE_VECTOR2
- BABYLON.Animation.ANIMATIONTYPE_VECTOR3
- BABYLON.Animation.ANIMATIONTYPE_QUATERNION
- BABYLON.Animation.ANIMATIONTYPE_COLOR3
アニメーションの動作-アニメーションを停止または再開します。
以前の値を使用し、それをインクリメントします-
- BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
初期値から再起動-
- BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
最終的な価値を保つ
- BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
私たちは今、アニメーションオブジェクトを作成しましょう-
var animationBox = new BABYLON.Animation(
"myAnimation",
"scaling.x",
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
);アニメーションのデモ
<!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);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var box = BABYLON.Mesh.CreateBox("box", '3', scene);
box.position = new BABYLON.Vector3(-10,0,0);
var box1 = BABYLON.Mesh.CreateBox("box1", '3', scene);
box1.position = new BABYLON.Vector3(0,0,0);
var animationBox = new BABYLON.Animation("myAnimation", "scaling.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 20,
value: 0.2
});
keys.push({
frame: 60,
value: 0.4
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox.setKeys(keys);
box.animations = [];
box.animations.push(animationBox);
scene.beginAnimation(box, 0, 100, true);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 60,
value: 0.2
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox1.setKeys(keys);
box1.animations = [];
box1.animations.push(animationBox1);
scene.beginAnimation(box1, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 20,
value: 0.2
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox.setKeys(keys);
box.animations = [];
box.animations.push(animationBox);
scene.beginAnimation(box, 0, 100, true);//defines the start and the end on the target shape box.以下は、アニメーションオブジェクトで利用可能な他の機能です-
一時停止（）
再起動（）
やめる（）
reset（）
*beginAnimation* 参照を変数に保存し、参照を使用してアニメーションを停止、一時停止、またはリセットできます。
var newAnimation = scene.beginAnimation(box1, 0, 100, true);例えば、
newAnimation.pause();キーフレームを制御するために、アニメーションオブジェクトで使用できる機能があります。
BABYLON.Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
return startValue + (endValue - startValue) * gradient;
};
BABYLON.Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
};
BABYLON.Animation.prototype.vector3InterpolateFunction = function (startValue, endValue, gradient) {
return BABYLON.Vector3.Lerp(startValue, endValue, gradient);
};ここにあなたが変更できる機能のリストがあります-
- floatInterpolateFunction
- quaternionInterpolateFunction
- quaternionInterpolateFunctionWithTangents
- vector3InterpolateFunction
- vector3InterpolateFunctionWithTangents
- vector2InterpolateFunction
- vector2InterpolateFunctionWithTangents
- sizeInterpolateFunction
- color3InterpolateFunction
- matrixInterpolateFunction
クイックアニメーションを作成するために、直接使用できる機能が用意されています。
例えば、
Animation.CreateAndStartAnimation = function(name, mesh, tartgetProperty, framePerSecond, totalFrame, from, to, loopMode);ここでは、 start と end の2つのキーフレームのみを使用できます。
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);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var box = BABYLON.Mesh.CreateBox("box", '3', scene);
box.position = new BABYLON.Vector3(0,0,0);
BABYLON.Animation.CreateAndStartAnimation('boxscale', box, 'scaling.x', 30, 120, 1.0, 1.5);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
アニメーションブレンディング
enableBlending = true;を使用すると、アニメーションのブレンドを実現できます。
このブレンドされたアニメーションは、現在のオブジェクトの状態から変化します。
イージング機能
アニメーションをより印象的にするために、以前にcssで使用したイージング関数がいくつかあります。
イージング関数のリストは次のとおりです-
- BABYLON.CircleEase（）
- BABYLON.BackEase（振幅）
- BABYLON.BounceEase（バウンス、バウンス）
- BABYLON.CubicEase（）
- BABYLON.ElasticEase（振動、弾力性）
- BABYLON.ExponentialEase（指数）
- BABYLON.PowerEase（パワー）
- BABYLON.QuadraticEase（）
- BABYLON.QuarticEase（）
- BABYLON.QuinticEase（）
- BABYLON.SineEase（）
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);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var box1 = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
box1.position = new BABYLON.Vector3(0,0,0);
var animationBox1 = new BABYLON.Animation("myAnimation1", "scaling.z", 10, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//An array with all animation keys
var keys = [];
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 1
});
//At the animation key 20, the value of scaling is "0.2"
keys.push({
frame: 60,
value: 0.2
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 1
});
animationBox1.setKeys(keys);
box1.animations = [];
//box1.animations.push(animationBox1);
var easingFunction = new BABYLON.QuarticEase();
easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
animationBox1.setEasingFunction(easingFunction);
box1.animations.push(animationBox1);
scene.beginAnimation(box1, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
アニメーションイベント
アニメーションイベントで必要なことは何でも実行できます。 フレームが変更されたとき、またはアニメーションが完了したときに何かを変更したい場合は、アニメーションにイベントを追加することで実現できます。
var event1 = new BABYLON.AnimationEvent(50, function() { console.log("Yeah!"); }, true);
//You will get hte console.log when the frame is changed to 50 using animation.
animation.addEvent(event1);//attaching event to the animation.BabylonJS-スプライト
コンピューターグラフィックスでスプライトとは何を指しますか？ 基本的には、より大きなシーンに統合される2次元のビットマップです。 メモリを節約するために複数の小さな画像を単一のビットマップに結合する場合、結果の画像はスプライトシートと呼ばれます。 スプライトとその使用方法を始めましょう。
スプライトの使用を開始する最初のステップは、スプライトマネージャーを作成することです。
var spriteManagerTrees = new BABYLON.SpriteManager("treesManagr", "Assets/Palm-arecaceae.png", 2000, 800, scene);スプライトマネージャを作成するには、次のパラメータを考慮してください-
- 名前-このマネージャーの名前。
- URL -使用される画像のURL。
- マネージャの容量-このマネージャのインスタンスの最大数。たとえば、上記のインスタンスは2000本のツリーを作成します。
- セルサイズ-画像が取得したサイズ。
- Scene -マネージャーが追加されるシーン。
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManagr","Assets/Player.png", 2, 64, scene);上記のオブジェクトを見てください。プレーヤーの画像を指定し、現在2つのインスタンスを作成しています。 画像のサイズは64です。 スプライトの各画像は、64ピクセルの正方形に含まれている必要があります。
次に、スプライトマネージャにリンクされた同じインスタンスを作成しましょう。
var player = new BABYLON.Sprite("player", spriteManagerPlayer);他のシェイプやメッシュと同じように、このプレーヤーオブジェクトで遊ぶことができます。 位置、サイズ、角度などを割り当てることができます。
player.size = 0.3;
player.angle = Math.PI/4;
player.invertU = -1;
player.width = 0.3;
player.height = 0.4;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);
//Create camera and light
var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 8, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/tree.png", 1000, 400, scene);
for (var i = 0; i < 1000; i++) {
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
tree.position.x = Math.random() *100 - 50;
tree.position.z = Math.random()* 100 - 50;
tree.isPickable = true;
//Some "dead" trees
if (Math.round(Math.random() *5) === 0) {
tree.angle = Math.PI* 90/180;
tree.position.y = -0.3;
}
}
var spriteManagerTrees1 = new BABYLON.SpriteManager("trees1", "images/tree1.png", 1000,400, scene);
for (var i = 0; i < 1000; i++) {
var tree1 = new BABYLON.Sprite("tree1", spriteManagerTrees1);
if (i %2 == 0) {
tree1.position.x = Math.random() *100 - 50;
} else {
tree1.position.z = Math.random()* 100 - 50;
}
tree1.isPickable = true;
}
spriteManagerTrees.isPickable = true;
spriteManagerTrees1.isPickable = true;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 2, 200, scene);
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
player.position.x = 2;
player.position.y = 2;
player.position.z = 0;
var spriteManagerPlayer1 = new BABYLON.SpriteManager("playerManager1", "images/bird.png", 2, 200, scene);
var player1 = new BABYLON.Sprite("player", spriteManagerPlayer1);
player1.position.x = 1;
player1.position.y = 2;
player1.position.z = 0;
var spriteManagerPlayer2 = new BABYLON.SpriteManager("playerManager2", "images/bird.png", 2, 200, scene);
var player2 = new BABYLON.Sprite("player", spriteManagerPlayer2);
player2.position.x = 0;
player2.position.y = 1;
player2.position.z = 0;
scene.onPointerDown = function (evt) {
var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
if (pickResult.hit) {
pickResult.pickedSprite.angle += 1;
}
};
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
このデモでは、tree.png、tree1.pngという名前の画像を使用して木を表示し、bird.pngを使用してシーン内の鳥を表示しました。 これらの画像は、images/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
ツリーに使用される画像を以下に示します。
*images/tree.png**images/tree1.png**images/bird.png*スプライトバルーンを使用したもう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);
var light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", -3.4, 1.0, 82, new BABYLON.Vector3(0, -15, 0), scene);
camera.setPosition(new BABYLON.Vector3(30, 0,100));
camera.attachControl(canvas, true);
var spriteManagerTrees = new BABYLON.SpriteManager("trees", "images/balloon.png", 50, 450, scene);
var treearray = [];
for (var i = 0; i < 50; i++) {
var tree = new BABYLON.Sprite("tree", spriteManagerTrees);
tree.position.x = Math.random() *100 - 10;
tree.position.z = Math.random()* 100 - 10;
tree.position.y = -35;
tree.isPickable = true;
treearray.push(tree);
}
spriteManagerTrees.isPickable = true;
scene.onPointerDown = function (evt) {
var pickResult = scene.pickSprite(this.pointerX, this.pointerY);
if (pickResult.hit) {
pickResult.pickedSprite.position.y = -3000;
}
};
k = -35;
var animate = function() {
if (k > 3) return;
k += 0.05;
for (var i = 0; i < treearray.length; i++) {
treearray[i].position.y = k;
}
};
scene.registerBeforeRender(animate);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
このデモでは、ballon.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
*images/balloon.png*風船は空に浮かび上がり、いったん止まったら、クリックすると消えます。 これは、作成されたスプライトをクリックすると詳細を表示するpickSprite関数を使用して行われます。
onPointerDown関数は、マウスアクションが発生し、スプライトの位置が変更されたときに呼び出されます。
var animate = function() {
if (k > 3) return;
k += 0.05;
for (var i = 0; i < treearray.length; i++) {
treearray[i].position.y = k;
}
};
scene.registerBeforeRender(animate);関数animateはregisterBeforeRenderで呼び出され、バルーンを初期-35から+3に移動します。 .05ずつインクリメントすることにより、ゆっくりと移動します。
BabylonJS-パーティクル
パーティクルシステムは、従来のレンダリングテクニックでは再現が非常に難しい特定の種類の「ファジー」現象をシミュレートするために、多数の非常に小さなスプライト、3Dモデル、またはその他のグラフィックオブジェクトを使用するコンピューターグラフィックスのテクニックです。
パーティクルシステムを作成するには、次のようにクラスを呼び出す必要があります-
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);//2000 refers to the total number of particles to be produced.粒子システムでは、次の特性を考慮する必要があります-
particleSystem.particleTexture = new BABYLON.Texture("Flare.png", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);エミッタプロパティは、パーティクルを放出するメッシュを取得します。 color1 および color2 は粒子の色です。
*ColorDead* は、シーンから消える直前にパーティクルに適用される色であり、colorDeadと呼ばれます。particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;MinSizeとmaxSizeは、パーティクルに与えられたサイズです。 MinlifeTimeとmaxLifeTimeは、パーティクルに与えられた寿命です。
particleSystem.emitRate = 1500;emitRateは、パーティクルが放出されるレートです。
以下に示すデモではトーラスを使用しました。 パーティクルシステムとそのプロパティを使用して、トーラスの周りのすべてのパーティクルを取得しました。
デモ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);
//Setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var fountain = BABYLON.Mesh.CreateTorus("torus", 2, 1, 8, scene, false);
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = fountain;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
fountain.animations.push(animation);
scene.beginAnimation(fountain, 0, 100, true);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、dot.jpgという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
以下は、パーティクルテクスチャに使用される画像です。 images/dot.jpg
デモ2
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground 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);
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(-100, 0,-100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
ground.material = gmat;
gmat.wireframe = true;
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = ground;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
ground.animations.push(animation);
//scene.beginAnimation(ground, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
アニメーション付きデモ
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground 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);
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(-100, 0, -100));
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
var ground = BABYLON.Mesh.CreateGround("ground", 100, 100, 20, scene);
ground.material = gmat;
gmat.wireframe = true;
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
particleSystem.particleTexture = new BABYLON.Texture("images/dot.jpg", scene);
particleSystem.textureMask = new BABYLON.Color4(0.1, 0.8, 0.8, 1.0);
particleSystem.emitter = ground;
particleSystem.minEmitBox = new BABYLON.Vector3(-1, 0, 0);//Starting all from
particleSystem.maxEmitBox = new BABYLON.Vector3(1, 0, 0);//To...
particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
particleSystem.minSize = 0.1;
particleSystem.maxSize = 0.5;
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1.5;
particleSystem.emitRate = 1500;
particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
particleSystem.gravity = new BABYLON.Vector3(0, -9.81, 0);//gravity for the particle.
particleSystem.direction1 = new BABYLON.Vector3(-7, 8, 3);
particleSystem.direction2 = new BABYLON.Vector3(7, 8, -3);
//random direction for the particles on the scene
particleSystem.minAngularSpeed = 0;
particleSystem.maxAngularSpeed = Math.PI;
particleSystem.minEmitPower = 1;
particleSystem.maxEmitPower = 3;
particleSystem.updateSpeed = 0.005;
particleSystem.start();
var keys = [];
var animation = new BABYLON.Animation("animation", "rotation.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
//At the animation key 0, the value of scaling is "1"
keys.push({
frame: 0,
value: 0
});
//At the animation key 50, the value of scaling is "0.2"
keys.push({
frame: 50,
value: Math.PI
});
//At the animation key 100, the value of scaling is "1"
keys.push({
frame: 100,
value: 0
});
//Launch animation
animation.setKeys(keys);
ground.animations.push(animation);
scene.beginAnimation(ground, 0, 100, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
上記のデモでは、ワイヤフレームマテリアルのある地面を示しており、パーティクルシステムは中心から生成されています。
BabylonJS-カメラ
BabylonJSには、使用できるカメラがたくさんあります。 一度に、1つのシーンでアクティブになるカメラは1つだけです。
この章では、BabylonJSでカメラを使用する方法を学びます。
FreeCamera
FreeCameraの仕組みを見てみましょう。
構文
以下はFreeCameraの構文です-
var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 1, -15), scene);これは、カメラが配置される位置です-新しいBABYLON.Vector3（0、1、-15）。
方向を変えると方向も変わります。 値を変更して、シーンでのカメラの動作を確認できます。
以下はFreeCameraで使用されるパラメータです-
- Name
- ポジション
- シーン
ArcRotateCamera
このカメラは、指定されたターゲットピボットを中心に回転します。 カーソルとマウス、またはタッチイベントで制御できます。 パラメータは、名前、アルファ、ベータ、半径、およびターゲットです。
構文
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);*ArcRotateCamera* は+ x方向を指します。 カメラの位置を変更するには、 *setPosition* プロパティを使用します。camera.setPosition(new BABYLON.Vector3(0, 0, -100));ArcRotateCameraは、アニメーション化に最適なカメラです。 次のコマンドは、ターゲットの周りにカメラを回転させるのに役立ちます-
scene.activeCamera.alpha += .01;TouchCamera
タッチは「ジェスチャー」の一種です。 指、スタイラス、手袋、足、またはレーザーポインターを使用して、パッドまたはスクリーン上に置くことができます。 感知できるあらゆる動き… ジェスチャーと見なすことができます。
構文
以下はTouchCameraの構文です-
var camera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 1, -15), scene);ゲームパッドカメラ
このカメラは、ゲームパッドで使用するために特別に設計されています。
構文
ゲームパッドカメラの構文は次のとおりです-
var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 15, -45), scene);DeviceOrientationCamera
このカメラは、デバイスを前後または左右に傾けたときなど、デバイスの方向イベントに反応するように特別に設計されています。
構文
var camera = new BABYLON.DeviceOrientationCamera("DevOr_camera", new BABYLON.Vector3(0, 1, -15), scene);フォローカメラ
FollowCameraは、位置を持つ任意のシーンアイテムを追跡するように設計されています。 後方、前方、または任意の角度から追従できます。
構文
FollowCameraの構文は次のとおりです-
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 15, -45), scene);VirtualJoysticksCamera
このカメラは、仮想ジョイスティックイベントに反応するように設計されています。 仮想ジョイスティックは、カメラやその他のシーンアイテムの制御に使用される画面上の2Dグラフィックです。
構文
以下はVirtualJoysticksCameraの構文です-
var camera = new BABYLON.VirtualJoysticksCamera("VJ_camera", new BABYLON.Vector3(0, 1, -15), scene);アナグリフカメラ
AnaglyphCameraは、赤とシアンの3Dメガネで使用します。 後処理フィルタリング技術を使用します。
AnaglyphArcRotateCamera
以下は、AnaglyphArcRotateCameraの構文です-
var camera = new BABYLON.AnaglyphArcRotateCamera("aar_cam", -Math.PI/2, Math.PI/4, 20, new BABYLON.Vector3.Zero(), 0.033, scene);AnaglyphFreeCamera
以下は、 AnaglyphFreeCamera の構文です-
var camera = new BABYLON.AnaglyphFreeCamera("af_cam", new BABYLON.Vector3(0, 1, -15), 0.033, scene);VRDeviceOrientationFreeCamera
VRDeviceOrientationFreeCameraはFreeCameraを基礎として使用しているため、FreeCameraのプロパティとメソッドはVRDeviceOrientationFreeCameraにもあります。
構文
以下は VRDeviceOrientationFreeCamera の構文です-
var camera = new BABYLON.VRDeviceOrientationFreeCamera ("Camera", new BABYLON.Vector3 (-6.7, 1.2, -1.3), scene, 0);WebVRFreeCamera
WebVRFreeCameraはFreeCameraを基礎として使用しているため、FreeCameraのプロパティとメソッドはWebVRFreeCameraにもあります。
構文
以下は WebVRFreeCamera の構文です-
var camera = new BABYLON.WebVRFreeCamera("WVR", new BABYLON.Vector3(0, 1, -15), scene);ほとんどのデモでは、カメラがキャンバスに接続されている attachControl が表示されます。
例
camera.attachControl(canvas, true);BabylonJS-ライト
この章では、BabylonJSに使用されるライトについて学びます。 まずは、babylonjsで使用できるさまざまな種類のライトを見てみましょう。
ライトは、各ピクセルが受け取る拡散および鏡面反射色を生成するためのものです。 後で、各ピクセルの最終的な色を取得するためにマテリアルで使用されます。
babylonjsには4種類のライトがあります。
- ポイントライト
- 指向性ライト
- スポットライト
- 半球の光
BabylonJS-ポイントライト
ポイントライトの典型的な例は太陽で、その光線は全方向に広がります。 ポイントライトには、空間内にユニークなポイントがあり、そこからあらゆる方向に光が広がります。 光の色は、鏡面反射と拡散反射のプロパティを使用して制御できます。
構文
ポイントライトの構文は次のとおりです-
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(1, 10, 1), scene);ポイントライトには3つの異なるパラメータがあります-
- 最初のパラメーターはライトの名前です。
- 2番目のパラメーターは、ポイントライトが配置される位置です。
- 3番目のパラメーターは、ライトをアタッチする必要があるシーンです。
次のプロパティは、上記で作成したオブジェクトに色を追加するために使用されます-
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);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( .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);ポイントライトには3つの異なるパラメータがあります-
- 1 ^ st ^ paramはライトの名前です。
- 2 ^ nd ^パラメータは位置です。 現時点では、Y軸にマイナス-1が設定されています。
- 3 ^ rd ^パラメータは、アタッチするシーンです。
ここで、specularプロパティとdiffuseプロパティを使用して色を追加できます。
light0.diffuse = new BABYLON.Color3(0, 1, 0);
light0.specular = new BABYLON.Color3(1,0, 0);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( .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-スポットライト
スポットライトは、円錐形に落ちる光のようなものです。
構文
以下は、スポットライトの構文です-
var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene);ポイントライトには5つの異なるパラメータがあります-
- 1 ^ st ^ Paramはライトの名前です。
- 2 ^ nd ^ paramは位置です。
- 3 ^ rd ^ paramは方向です。
- 4 ^ th ^ paramは角度です。
- 5 ^ th ^ paramは指数です。
これらの値は、位置から始まって方向に向かって放射する光の円錐を定義します。 鏡面反射光と拡散反射光を使用して、光の色を制御します。
light0.diffuse = new BABYLON.Color3(1, 0, 0);
light0.specular = new BABYLON.Color3(1, 1, 1);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( .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色が光に与えられます。 1つは空用、もう1つは地面用、最後の1つは鏡面反射用です。
構文
以下は、半球光の構文です-
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);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( .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>出力
上記のコード行は、次の出力を生成します-
BabylonJS-パラメトリック形状
パラメトリック形状とは、ベンド、ツイストなどで描かれた線を使用して実現できるさまざまな形状を指します。 これは、放物線、正弦曲線、cos曲線、ベジェ曲線などの数学方程式で生成された2D形式です。 方程式を使用して、座標（x、y）を見つけて、同じ線を描くことができます。 この章では、リボン、線、破線、チューブ、押し出しなどの形状を確認します。 ボード上の線のフリーハンド描画は、以下で説明するパラメトリック形状を使用して実現できます。
| Sr.No. | Parametric Shape & Description |
|---|---|
| 1 |
リボンはパスの配列を入力として受け取り、それらのパスに沿って線を引きます。 複雑なロジックを使用して座標を取得します。 以下の例では、ベジェ曲線式を使用してリボンを描画しています。 ベジェ曲線は、主に3Dゲームで滑らかな曲線をモデル化するために使用されます。 曲線には制御点が必要で、曲線は制御点に沿って描かれます。 |
| 2 |
ラインは3Dゲームの基本要素です。 線を引くには、線を引くことができる2つのポイントが必要です。 |
| 3 |
チューブは、湾曲した円筒形です。 座標を取得するために適用される方程式（数学関数）に基づいて、さまざまなパラメトリック形状を与えることができます。 |
| 4 |
押し出しは、2Dシェイプをボリュームシェイプに変換するのに役立ちます。2Dで星を作成すると、x、y座標があり、zは0になります。2D座標を押し出すと、同じものが3Dに変換されます。したがって、押し出しを使用した2Dの開始は3Dになります。さまざまな2D形状を試して、3Dに変換できます。 |
BabylonJS-メッシュ
この章では、メッシュビルダーを使用してさまざまな形状を作成する方法を学習します。 前の章のいずれかで、シェイプの作成方法を既に学習しました。
違いは、meshbuilderを使用すると、色、画像を図形に追加する柔軟性が得られることです。
MeshBuilderを使用したCreateBox
MeshBuilderを使用してボックスを作成する方法を見てみましょう。
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, 0, 1);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0, 1, 0);
var texture = new BABYLON.Texture("images/cube.png", scene);
mat.diffuseTexture = texture;
var hSpriteNb = 3; //3 sprites per raw
var vSpriteNb = 2; //2 sprite raws
var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}
var options = {
width: 1.5,
height: 1.5,
depth: 1.5,
faceUV: faceUV
};
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
box.material = mat;
scene.registerBeforeRender(function() {
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
上記の例では、次のようにスプライト画像を使用しました。 水平に3列、垂直に2列あります。
このデモでは、cube.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 cube.pngはスプライト画像であり、スプライト画像は画像のコレクションであることに注意してください。 画像を立方体に表示したかったので、立方体のすべての側面を一緒にしたかったのです。 選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。
createBoxビルダーは、サイズのオプションを提供します。
例えば、
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);Demo
var hSpriteNb = 3; //3 sprites per raw ie colums horizontally as shown in the image
var vSpriteNb = 2; //2 sprite raws as shown in the image above.
var faceUV = new Array(6);//the cube has 6 sides so creating array for same.
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}
var options = {
width: 1.5,
height: 1.5,
depth: 1.5,
faceUV: faceUV
};これは、createBoxメソッドを使用してメッシュビルダーにテクスチャを適用することと呼ばれます。水平方向に3列、垂直方向に2行の画像 cube.png を使用しました。立方体またはボックスには6つの辺があります。
テクスチャを適用するには、optionsパラメーターを使用します。たとえば、
Var box = BABYLON.MeshBuilder.CreateBox ('box', options, scene);立方体の辺であるサイズ6のfaceUVと呼ばれる配列を定義しました。 この配列には、常にVector4要素が含まれます。 各Vector4（x、y、z、w）は次のように定義されます-
- x = Ubottom
- y = Vbottom
- z = Utop
- w = Vtop
ベクトルの範囲は[0、1]です。 UbottomとVbottomは、テクスチャの切り取りが開始される左下のポイントの2D座標です。 Utop、Vtopは、テクスチャの切り取りが終了する右上のポイントです。
var hSpriteNb = 3; //3 sprites per raw
var vSpriteNb = 2; //2 sprite raws
var faceUV = new Array(6);
for (var i = 0; i < 6; i++) {
faceUV[i] = new BABYLON.Vector4(i/hSpriteNb, i/vSpriteNb, (i+1)/hSpriteNb, (i+1)/vSpriteNb);
}デフォルトのテクスチャ、つまり、与えられた画像がボックスのすべての面に適用されると仮定します。 あなたが1つの面またはボックスの1つの側面のみを変更したい場合、以下に示すように値を直接割り当てることができます
var hSpriteNb = 3; //3 sprites per raw
var vSpriteNb = 2; //2 sprite raws
var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);例
<!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, 0, 1);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var pl = new BABYLON.PointLight("pl", BABYLON.Vector3.Zero(), scene);
pl.diffuse = new BABYLON.Color3(1, 1, 1);
pl.specular = new BABYLON.Color3(1, 1, 1);
pl.intensity = 0.8;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
var texture = new BABYLON.Texture("images/3d.png", scene);
mat.diffuseTexture = texture;
var hSpriteNb = 3; //3 sprites per raw
var vSpriteNb = 2; //2 sprite raws
var faceUV = new Array(6);
faceUV[4] = new BABYLON.Vector4(0, 0, 1/hSpriteNb, 1/vSpriteNb);
var options = {
width:3,
height:3,
depth: 3,
faceUV:faceUV
};
var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
box.material = mat;
scene.registerBeforeRender(function() {
pl.position = camera.position;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、3d.pngという画像を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 3d.pngはスプライト画像です。スプライト画像は画像のコレクションです。 立方体のすべての辺を一緒にして、立方体に画像を表示したかったのです。 選択した同様のスプライトイメージをダウンロードして、デモリンクで使用することもできます。
ボックスに使用されるテクスチャ- images/3d.png
メッシュシリンダー
このセクションでは、MeshCylinderの作成方法を確認します。
MeshCylinderを作成するには、BABYLON.MeshBuilder.CreateCylinderクラスを使用する必要があります。
クラスのパラメータは次のとおりです-
var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
height: 3,
diameter: 35,
tessellation: 52
}, scene);メッシュを使用するCreateCylinderとmeshbuilderの違いは、meshbuilderのオプションを使用できることです。 現在、シリンダーに渡すオプションとして高さ、直径、テッセレーションを使用しています。 このメッシュの素材として、ワイヤーフレーム付きの標準素材を使用しています。 ブラウザで出力を確認し、シリンダーを確認します。 ゲーム内で、シーン内で回転するホイールとして同様の構造を使用できます。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Babylon.js demo - Mesh Builder</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(0.8, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/6, 1.3, 40, new BABYLON.Vector3(0, -3, 0), scene);
var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseColor = new BABYLON.Color3(0.1, .5, 0);
mat.specularColor = new BABYLON.Color3(0, 0, 0);
mat.wireframe = true;
var meshcylinder = BABYLON.MeshBuilder.CreateCylinder("meshcylinder", {
height: 3,
diameter: 35,
tessellation: 52
}, scene);
meshcylinder.material = mat;
meshcylinder.position = new BABYLON.Vector3(0, 0, 0);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
メッシュビルダーで作成された多くの形状が、1つのデモで一緒に使用されるようになりました。 以下のデモリンクで説明されている形状は、後続のセクションにリストされています。
- リンク：/babylonjs/babylonjs_mesh_ground [地面]
- リンク：/babylonjs/babylonjs_mesh_cone [コーン]
- リンク：/babylonjs/babylonjs_mesh_plane [平面]
- リンク：/babylonjs/babylonjs_mesh_disc [ディスク]
- リンク：/babylonjs/babylonjs_mesh_torus [トーラス]
- リンク：/babylonjs/babylonjs_mesh_polyhedron [多面体]
- リンク：/babylonjs/babylonjs_mesh_icosphere [IcoSphere]
BabylonJS –メッシュ交差点
ゲームで2つのオブジェクトが交差するときに何をする必要があるかを知っているので、ゲームのメッシュ交差は重要です。 以下のデモでは、メッシュが交差するときにキャプチャする必要があるイベントについて、同じ概念を説明しています。
以下に示すデモでは、次の2つの概念を取り上げました-
- 交差メッシュ
- 交差点
<!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, 1, 1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var matcone = new BABYLON.StandardMaterial("mat1", scene);
matcone.alpha = 1.0;
matcone.diffuseColor = new BABYLON.Color3(0, 0, 0);
matcone.wireframe = true;
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {height : 10, diameterTop: 10,diameterBottom:10, tessellation: 5}, scene);
cone.position= new BABYLON.Vector3(12,1,0);
cone.material = matcone;
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
var balloon3 = BABYLON.Mesh.CreateSphere("balloon3", 5, 1.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon3.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(4, 2, 0);
balloon2.position = new BABYLON.Vector3(5, 1, 0);
balloon3.position = new BABYLON.Vector3(7, 0, 0);
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
var a = 0.01;
scene.registerBeforeRender(function () {
if (balloon1.intersectsMesh(cone, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon2.intersectsMesh(cone, false)) {
balloon2.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon2.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsMesh(cone, false)) {
balloon3.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}
a += 0.01;
balloon1.position.x += Math.cos(a)/10;
balloon2.position.x += Math.cos(a)/10;
balloon3.position.x += Math.cos(a)/10;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコードは、次の出力を生成します-
説明
上記のコードを使用して、ワイヤーフレームがtrueのシリンダーを作成しました。 3つの球体を作成しました。 球体の元の色は緑です。
*scene.registerBeforeRender* 関数では、ここで円柱であるメッシュとの交差に基づいて球体の色を変更します。*registerBeforeRender* の次のコードを考慮してください-if (balloon1.intersectsMesh(cone, false)) {
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
} else {
balloon1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
}*intersectsMesh* は、渡されたパラメーターで指定されたメッシュと交差する場合、trueまたはfalseを返します。例えば、
balloon1.intersectsMesh(cone, false);//cone refers to the cylinder mesh here.球体の色が赤に変わり、円柱と交差します。それ以外の場合、緑色です。
次のコードは、交差するポイントに使用されます-
var pointToIntersect = new BABYLON.Vector3(10, 0, 0);
if (balloon3.intersectsPoint(pointToIntersect)) {
balloon3.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
}ここで、 pointtoIntersect 変数は、x軸で10の位置ベクトルです。 球体が交差点と交差すると、球体の色が黒に変わります。
BabylonJS – MeshPickingコリジョン
実際に衝突を選択すると座標が得られ、メッシュをその場所に配置できます。 オブジェクトはマウスで選択され、マウスでクリックした場所に配置できます。ユーザーがマウスをクリックした場所にメッシュ（オブジェクト）を配置する必要があると考えてください。そのため、衝突を検出することで、クリックした場所の位置の座標を確認できます。
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(1, 1, 1);
//setup environment
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 10, 20), scene);
var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -30), scene);
var balloon1 = BABYLON.Mesh.CreateSphere("balloon1",5, 1.0, scene);
var balloon2 = BABYLON.Mesh.CreateSphere("balloon2", 5, 1.0, scene);
balloon1.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon2.material = new BABYLON.StandardMaterial("matBallon", scene);
balloon1.position = new BABYLON.Vector3(0, 0, -0.1);
balloon2.position = new BABYLON.Vector3(0, 0, -0.1);
balloon1.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
balloon2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);
//Wall
var wall = BABYLON.Mesh.CreatePlane("wall", 30.0, scene);
wall.material = new BABYLON.StandardMaterial("wallMat", scene);
wall.material.emissiveColor = new BABYLON.Color3(0.5, 1, 0.5);
//When pointer down event is raised
scene.onPointerDown = function (evt, pickResult) {
//if the click hits the ground object, we change the impact position
if (pickResult.hit) {
var dateValue = new Date();
var secondNumber = dateValue.getSeconds();
if (secondNumber % 2 == 0) {
balloon1.position.x = pickResult.pickedPoint.x;
balloon1.position.y = pickResult.pickedPoint.y;
} else {
balloon2.position.x = pickResult.pickedPoint.x;
balloon2.position.y = pickResult.pickedPoint.y;
}
}
};
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
説明
上記の例では、平面と2つの球体を使用しました。 この出力を生成するには、次のコードを使用します-
scene.onPointerDown = function (evt, pickResult) {
//if the click hits the ground object, we change the impact position
if (pickResult.hit) {
var dateValue = new Date();
var secondNumber = dateValue.getSeconds();
if (secondNumber % 2 == 0) {
balloon1.position.x = pickResult.pickedPoint.x;
balloon1.position.y = pickResult.pickedPoint.y;
} else {
balloon2.position.x = pickResult.pickedPoint.x;
balloon2.position.y = pickResult.pickedPoint.y;
}
}
};イベント scene.onPointerDown は、この例では pickResult である調整された-x、yおよびzを提供します。
グラウンドメッシュをクリックすると、pickResult.hitがtrueになります。 奇数/偶数秒を考慮し、球体の位置を変更して、上記のように結果のz座標とy座標を選択します。 位置が変更されると、マウスをクリックして配置した場所に球が配置されます。 上記のデモを同じように試すことができます。
BabylonJS –レイキャスト
レイキャストは太陽の光線に似ており、シーン内の衝突と交差を確認するために使用されます。
構文
var ray = new BABYLON.Ray(origin, direction, length);パラメーター
レイキャストの次のパラメータを考慮してください-
- Origin -光線が始まる場所。
- 方向-光線の方向は次のように計算されます-
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);次に、方向を取得するには、原点、ボックスの位置からそれを引きます-
- 長さ-光線の長さ。
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);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
//ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
中央にメインボックスがあり、レイキャストとして機能します。 いずれかのボックスを指すと、ボックスのサイズが大きくなります。 この概念は、ゲームをプレイしているときに、他のオブジェクトがどのオブジェクトに接触し、必要なアクションを実行できるかを知るのに役立ちます。
*box.isPickable = false;* を追加して、中央のメインボックスが考慮されないようにします。 接触する光線にオブジェクトを含めたくない場合は、 *box.isPickable = false;* を追加します。次のコードは、レイによって選択されるボックスのスケーリングを追加します。
scene.registerBeforeRender(function () {
var origin = box.position;
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});*var ray = new BABYLON.Ray（origin、direction、length）;* は光線を作成し、メインボックスの位置を原点とします。光線への方向は次のように計算されます-
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);次に、方向を取得するために、ボックスの位置である原点からそれを減算します。 関数 vecToLocal は、ベクトルにメッシュ行列を掛けることにより、メッシュの視点から位置を変換するように設計されています。
*var hit = scene.pickWithRay（ray）;* を使用して、レイからヒットポイントを取得します。光線がメッシュと一致する位置を示します。
スケーリングは、次のコード行を実行することによって選択されたメッシュに適用されます-
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}ブラウザで上記の例を試して、出力を確認してください。
述語関数を使用したレイキャスト
次に、述語関数を使用したレイキャストの動作と、rayhelperで表示される方向を見てみましょう。
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);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 10, scene);
var box = BABYLON.Mesh.CreateBox("box", 4.0, scene);
box.position.y = 2;
box.scaling.z = 2;
var matBox = new BABYLON.StandardMaterial("matBox", scene);
matBox.diffuseColor = new BABYLON.Color3(0.8, 0.1, 0.5);
box.material = matBox;
box.isPickable = false;
var box2 = BABYLON.Mesh.CreateBox("box2", 8.0, scene);
box2.position = new BABYLON.Vector3(-20, 4, 0);
var matBox2 = new BABYLON.StandardMaterial("matBox2", scene);
matBox2.diffuseColor = new BABYLON.Color3(1, 0, 0);
box2.material = matBox2;
var box3 = BABYLON.Mesh.CreateBox("box3", 8.0, scene);
box3.position = new BABYLON.Vector3(20, 4, 0);
var matBox3 = new BABYLON.StandardMaterial("matBox3", scene);
matBox3.diffuseColor = new BABYLON.Color3(1, 0, 0);
box3.material = matBox3;
var box4 = BABYLON.Mesh.CreateBox("box4", 8.0, scene);
box4.position = new BABYLON.Vector3(0, 0, 20);
var matBox4 = new BABYLON.StandardMaterial("matBox4", scene);
matBox4.diffuseColor = new BABYLON.Color3(0, 1, 0);
box4.material = matBox4;
var box5 = BABYLON.Mesh.CreateBox("box5", 8.0, scene);
box5.position = new BABYLON.Vector3(0, 0, -20);
var matBox5 = new BABYLON.StandardMaterial("matBox5", scene);
matBox5.diffuseColor = new BABYLON.Color3(0, 1, 0);
box5.material = matBox5;
//ray showing the direction
var ray = new BABYLON.Ray();
var rayHelper = new BABYLON.RayHelper(ray);
var localMeshDirection = new BABYLON.Vector3(0, 0, -1);
var localMeshOrigin = new BABYLON.Vector3(0, 0, -.4);
var length = 10;
rayHelper.attachToMesh(box, localMeshDirection, localMeshOrigin, length);
rayHelper.show(scene);
function mousemovef() {
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
var diffX = pickResult.pickedPoint.x - box.position.x;
var diffY = pickResult.pickedPoint.z - box.position.z;
box.rotation.y = Math.atan2(diffX,diffY);
}
}
scene.onPointerMove = function () {
mousemovef();
};
function vecToLocal(vector, mesh) {
var m = mesh.getWorldMatrix();
var v = BABYLON.Vector3.TransformCoordinates(vector, m);
return v;
}
scene.registerBeforeRender(function () {
var origin = box.position;
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}
var forward = new BABYLON.Vector3(0,0,1);
forward = vecToLocal(forward, box);
var direction = forward.subtract(origin);
direction = BABYLON.Vector3.Normalize(direction);
var length = 100;
var ray = new BABYLON.Ray(origin, direction, length);
//ray.show(scene, new BABYLON.Color3(1, 1, 0.1));
var hit = scene.pickWithRay(ray, predicate);
if (hit.pickedMesh) {
hit.pickedMesh.scaling.y += 0.01;
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
述語関数を使用したレイキャストは、必要なメッシュを選択するのに役立ちます。 メッシュを選択したくない場合は、同じものを無視できます。
function predicate(mesh) {
if (mesh == box2 || mesh == box || mesh == box5) {
return false;
}
return true;
}上記の関数は、光線によって選択されるメッシュを提供します。 選択されたメッシュがbox2、box、またはbox5の場合、falseを返します。それ以外の場合、true。
上記の例を同じように試すことができます。
BabylonJS –メッシュシャドウ
シャドウは、作成されたメッシュに光が当たる方法に基づいてレンダリングされます。 これらは、3Dの世界で出力をリアルに見せるために重要な役割を果たします。
babylonjsを使用して影を作成する方法を学びましょう。
構文
var shadowGenerator00 = new BABYLON.ShadowGenerator(shadowsize, light);パラメーター
メッシュの影に関連する次のパラメータを考慮してください-
- Shadowsize -影のサイズ。
- Light -シーンで使用されるライト。
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(1, 1, 1);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
//light1
var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);
light.position = new BABYLON.Vector3(20, 40, 20);
var ground01 = BABYLON.Mesh.CreateGround("Spotlight Hard Shadows", 24, 60, 1, scene, false);
var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("images/gr1.jpg", scene);
groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
groundMaterial.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
ground01.material = groundMaterial;
ground01.receiveShadows = true;
ground01.position.x = -5;
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position.x = -5;
box.position.y = 5;
var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);
shadowGenerator00.getShadowMap().renderList.push(box);
//shadowGenerator00.usePoissonSampling = true;
//shadowGenerator00.useExponentialShadowMap = true;
shadowGenerator00.useBlurExponentialShadowMap = true;
shadowGenerator00.bias = 0.01;
scene.registerBeforeRender(function() {
box.rotation.x += 0.01;
box.rotation.x += 0.01;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
説明
影を作成するには、shadowgeneratorを作成する必要があります。 以下に例を示します。
var shadowGenerator00 = new BABYLON.ShadowGenerator(512, light);シャドウが必要なメッシュを定義するには、上記のジェネレーターに同じものを追加する必要があります。
shadowGenerator00.getShadowMap().renderList.push(box);これで、地面とその上にボックスを作成しました。 箱の影が地面に落ちるようにします。 それを行うには、次のように行われている影を受け取るために地面がマークされていることを確認する必要があります-
ground01.receiveShadows = true;次のような影に利用可能ないくつかのフィルターがあります-
shadowGenerator.usePoissonSampling = true; - Called Poisson sampling
shadowGenerator.useExponentialShadowMap = true; - Exponential Shadow Map
shadowGenerator.useBlurExponentialShadowMap= true; - Blur Exponential Shadow Mapデモでは、shadowGenerator00.useBlurExponentialShadowMap = true;を使用しました。他のものを試して、出力がどのように見えるかを確認できます。
ここでは、gr1.jpgという画像を使用しました。 画像は、images/フォルダーにローカルに保存されます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
BabylonJS –メッシュ上の高度なテクスチャ
このセクションでは、メッシュの高度なテクスチャについて学習します。 さまざまなテクスチャを以下に示します-
- リンク：/babylonjs/babylonjs_mesh_cube_texture [キューブテクスチャ]
- リンク：/babylonjs/babylonjs_mesh_mirror_bump_texture [ミラーとバンプテクスチャ]
- リンク：/babylonjs/babylonjs_mesh_video_texture [ビデオテクスチャ]
ミラー、バンプ、ビデオ、屈折などの複雑なテクスチャをメッシュに適用しましょう。
| Sr.No. | Mesh & Description |
|---|---|
| 1 |
ハイライトレイヤーは、シーン内のメッシュをハイライトするために使用されます。 色を付けると、メッシュの境界に色が適用されます。 ハイライトしたいゲームの場合、メッシュハイライトレイヤーを同じように使用できます。 |
| 2 |
モーフィングは、何らかの遷移手段によってオブジェクトの形状を別の形状に変更します。 図形の更新可能なパラメーターを見てきました。それ以外の場合、パラメーターはfalseに設定されます。 モーフィングの場合、trueに設定され、メッシュが更新されて形状が変更されます。 |
| 3 |
アクションは、メッシュに相互作用を追加するために使用されます。 イベントは、メッシュをクリックしたとき、またはメッシュが交差または衝突したときにアクティブになります。 |
| 4 |
assestsmanagerクラスを使用すると、メッシュ、画像、およびバイナリファイルをシーンにロードできます。 |
| 5 |
Import Meshを使用して学習します。 |
| 6 |
線、リボン、多角形などの変形を見てきました。 さて、このデモでは球と箱のモーフィングが見られます。モーフターゲットを使用すると、球の形状が変更されます。これは以下のデモで見られます。 |
| 7 |
シーンに同一のメッシュを描画する場合は、インスタンスを使用します。 |
| 8 |
LODは距離の線を表します。 この機能を使用すると、ビューアの距離に基づいてメッシュを指定できます。 ビューアーからオブジェクトまでの距離が長くなると、LODを使用してメッシュの詳細レベルが明確に表示されます。 |
| 9 |
Mesh VolumemetricLightScatteringPost-process このプロセスは、以下の出力に示すように光を散乱させます。 ブラウザで同じことをテストすると、メッシュを通して光がどのように散乱するかがわかります。 |
| 10 |
EdgesRenderingは、上記の出力に示すように、メッシュの周囲にエッジを描画するために使用されます。 |
| 11 |
マテリアルのアルファモードを変更することにより、ブレンドモードを作成できます。 |
| 12 |
SolidParticleシステムはメッシュ上で更新されます。 メッシュで見たすべてのプロパティは、固体粒子で使用できます。 |
| 13 |
ファセットデータは大量のメモリを消費するため、この機能はデフォルトでは有効になっていません。 有効にするには、必要に応じてメッシュを作成し、ファセットデータを更新する必要があります。 |
BabylonJS-VectorPositionおよびRotation
ブラウザで以下に示すデモリンクを実行します。 以下のデモでは、x、y、z軸を描画しました。 正、負の方向のx、y、z軸にプロットされた数字があります。 ブラウザで同じことを実行し、必要に応じて値を変更し、シェイプ、メッシュを描画し、それらを配置し、x、y、z軸でどのようにレンダリングするかを確認します。メッシュの配置がどのように行われるかを確認すると役立ちます。
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( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
//show axis
var showAxis = function(size) {
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
};
showAxis(10);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
x、y、z軸に沿って座標を定義してみましょう。
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( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot", new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y=-10;y<=10;y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
//Lets draw a mesh along the axis.
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/bird.png", 1, 200, scene);
var player = new BABYLON.Sprite("player", spriteManagerPlayer);
player.position.x = 2;
player.position.y = 2;
player.position.z = 0;
var zChardot = makeTextPlane(".", "red", 1);
zChardot.position = new BABYLON.Vector3(1.8, 1.8,0);
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.position = new BABYLON.Vector3(-5,3,0);//center point of box x-axis is -5 and y axis is 3.
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.position = new BABYLON.Vector3(0,3,-3);//center point of box x-axis is -5 and y axis is 3.
var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 1, scene);//no position for sphere so by default it takes 0,0,0
showAxis(10);
returnscene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、画像bird.pngを使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
*Images/bird.png*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( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(5, 10, -10));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 10; y <= 10; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var kite = BABYLON.Mesh.CreateLines("kite", [
new BABYLON.Vector3(-4,0,0),
new BABYLON.Vector3(0,4,0),
new BABYLON.Vector3(4,0,0),
new BABYLON.Vector3(0,-4,0),
new BABYLON.Vector3(-4,0,0)
], scene);
kite.color = new BABYLON.Color3(1, 1, 1);
var path = [];
path.push(new BABYLON.Vector3(-4, 0, 0));
path.push(new BABYLON.Vector3(0, 0, 0));
path.push(new BABYLON.Vector3(4, 0, 0));
var lines1 = BABYLON.Mesh.CreateLines("lines",path, scene, true);
lines1.color = new BABYLON.Color3(1, 1, 1);
showAxis(10);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します。
ベクトル回転
次に、ベクトルの回転の仕組みを見てみましょう。
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( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 10; i <= 10; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 10; y <= 10; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 10; z <= 10; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var yellowSphere = BABYLON.Mesh.CreateSphere("yellowSphere",32, 1, scene);
yellowSphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
var yellowMaterial = new BABYLON.StandardMaterial("yellowMaterial", scene);
yellowMaterial.diffuseColor = BABYLON.Color3.Yellow();
yellowSphere.material = yellowMaterial;
var wheel1 = BABYLON.MeshBuilder.CreateTorus('t1', {diameter: 2.0}, scene);
wheel1.position.x = -2.0
wheel1.position.z = -2.0;
showAxis(10);
var k = 0.0;
var y = 0.0;
var x = 0.0;
scene.registerBeforeRender(function () {
wheel1.rotation.copyFromFloats(0.0, 0.0, Math.PI/2);
wheel1.addRotation(0.0, y, 0.0);
wheel1.addRotation(x, 0.0, 0.0);
yellowSphere.rotation.y += 0.01;
y += 0.05;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
BabylonJS-デカール
デカールは、オブジェクトに貼り付けられたステッカーのようなものです。 ステッカーの描画は、メッシュ（たとえば、ゲーム内のオブジェクト）に描画される2D画像を使用して行われます。 ゲームでは、弾丸を発射する軍隊があると考えてください。弾丸の印象はオブジェクト上で見る必要があります。 だから、Babylonjsでは、デカールを使用して行われます。オブジェクトをクリックすると、クリックした場所に2D画像が描画されます。
デカールは、作成されたメッシュの詳細を追加するために使用されます-弾丸、穴などの詳細 以下のデモリンクでは、画像を使用し、インポートしたメッシュに同じ画像を追加しています。
デカールを追加するには、次のコードを使用できます-
var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);次のコードを実行して、メッシュにデカールを追加します-
BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
var cat = newMeshes[0];//this is mesh shown on the screen.
//Set the target of the camera to the first imported mesh
camera.target = cat;
var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
decalMaterial.diffuseTexture.hasAlpha = true;
decalMaterial.zOffset = -2;
var onPointerDown = function (evt) {
if (evt.button !== 0) {
return;
}
//check if we are under a mesh
var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat;
//this will give all the meshes , but it will pick the mesh whch is same as cat and return true if it is found });
if (pickInfo.hit) {//if true
var decalSize = new BABYLON.Vector3(5, 5, 5);//size of decal is defined
var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);//decal is created
newDecal.material = decalMaterial;//decal material is added.
}
}
var canvas = engine.getRenderingCanvas();
canvas.addEventListener("pointerdown", onPointerDown, false);
scene.onDispose = function () {
canvas.removeEventListener("pointerdown", onPointerDown);
}
});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);
//Adding a light
var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);
//Adding an Arc Rotate Camera
var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
//The first parameter can be used to specify which mesh to import. Here we import all meshes
BABYLON.SceneLoader.ImportMesh("Shcroendiger'scat", "scenes/", "SSAOcat.babylon", scene, function (newMeshes) {
var cat = newMeshes[0];
//Set the target of the camera to the first imported mesh
camera.target = cat;
var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
decalMaterial.diffuseTexture = new BABYLON.Texture("images/impact1.jpg", scene);
decalMaterial.diffuseTexture.hasAlpha = true;
decalMaterial.zOffset = -2;
var onPointerDown = function (evt) {
if (evt.button !== 0) {
return;
}
//check if we are under a mesh
var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh === cat; });
if (pickInfo.hit) {
var decalSize = new BABYLON.Vector3(5, 5, 5);
var newDecal = BABYLON.Mesh.CreateDecal("decal", cat, pickInfo.pickedPoint, pickInfo.getNormal(true), decalSize);
newDecal.material = decalMaterial;
}
}
var canvas = engine.getRenderingCanvas();
canvas.addEventListener("pointerdown", onPointerDown, false);
scene.onDispose = function () {
canvas.removeEventListener("pointerdown", onPointerDown);
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>上記のデモリンクでは、SSAOcat.babylonメッシュを使用しています。 ここからSSAOcat.babylonのjsonファイルをダウンロードできます-
ファイルをscenes/フォルダーに保存します。 これは、次のように出力を取得するのに役立ちます。
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 impact1.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
*images/impact1.jpg*BabylonJS-Curve3
BabylonJSには、複雑な数学曲線を作成するためのAPIが組み込まれています。 パターンを描画し、メッシュに与えられたパスの座標を計算するために複雑な方程式を使用して作成されたリボン、ラインを見たことがあります。 ここには組み込みのAPIがあり、Curves APIのように複雑な計算を行わないようにします。
説明される曲線は次のとおりです-
- 二次ベジェ曲線
- 立方ベジェ曲線
- エルミートスプライン
- Catmull-Romスプライン
二次ベジェ曲線
このセクションでは、二次ベジェ曲線について学びます。
構文
var bezier = BABYLON.Curve3.CreateQuadraticBezier(origin, control, destination, nb_of_points);パラメーター
二次ベジェ曲線に関連する次のパラメーターを検討してください。
- Origin -曲線の原点。
- Control -曲線の制御点。
- 宛先-宛先ポイント。
- Noofpoints -配列内のポイント。
立方ベゼール曲線
このセクションでは、立方ベジェ曲線について学習します。
構文
var bezier3 = BABYLON.Curve3.CreateCubicBezier(origin, control1, control2, destination, nb_of_points)パラメーター
3次ベジェ曲線に関連する次のパラメーターを検討してください。
- Origin -原点。
- control1 -ベクトル形式の最初の制御点。
- control2 -ベクトル形式の2番目の制御点。
- Destination -ベクター形式の宛先ポイント。
- no_of_points -配列形式のポイントの数。
エルミートスプライン曲線
このセクションでは、エルミートスプライン曲線について学習します。
構文
var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);パラメーター
エルミートスプライン曲線に関連する次のパラメータを考慮してください-
- p1 -曲線の原点。
- t1 -原点の接線ベクトル点。
- p2 -宛先ポイント。
- t2 -宛先タンジェントベクトル。
- NbPoints -最終曲線のポイントの配列。
Catmull-Romスプライン曲線
このセクションでは、Catmull-Romスプライン曲線について学習します。
構文
var nbPoints = 20; //the number of points between each Vector3 control points
var points = [vec1, vec2, ..., vecN]; //an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);パラメーター
Catmull-Romスプライン曲線に関連する次のパラメータを考慮してください-
- ポイント-Vector3の配列、曲線は制御点を通過する必要があります。
- NbPoints -各Vector3コントロールポイント間のポイントの数。
var path = catmullRom.getPoints();//getPoints() returns an array of successive Vector3.
var l = catmullRom.length();//method returns the curve length.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( .5, .5, .5);
//camera
var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 0, new BABYLON.Vector3(5, 3, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 0, -100));
camera.attachControl(canvas, true);
//lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
light.intensity = 0.8;
var spot = new BABYLON.SpotLight(
"spot",
new BABYLON.Vector3(25, 15, -10),
new BABYLON.Vector3(-1, -0.8, 1), 15, 1, scene);
spot.diffuse = new BABYLON.Color3(1, 1, 1);
spot.specular = new BABYLON.Color3(0, 0, 0);
spot.intensity = 0.2;
//material
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
mat.backFaceCulling = false;
//mat.wireframe = true;
var makeTextPlane = function(text, color, size) {
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
dynamicTexture.hasAlpha = true;
dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
plane.material.backFaceCulling = false;
plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
plane.material.diffuseTexture = dynamicTexture;
return plane;
};
//show axis
var showAxis = function(size) {
var axisX = BABYLON.Mesh.CreateLines("axisX", [
new BABYLON.Vector3(-size *0.95, 0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3(-size *0.95, -0.05* size, 0),
new BABYLON.Vector3(-size, 0, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, 0.05* size, 0),
new BABYLON.Vector3(size, 0, 0),
new BABYLON.Vector3(size *0.95, -0.05* size, 0)
], scene);
axisX.color = new BABYLON.Color3(1, 0, 0);
var xChar = makeTextPlane("X", "red", size/10);
xChar.position = new BABYLON.Vector3(0.9 *size, -0.05* size, 0);
var xChar1 = makeTextPlane("-X", "red", size/10);
xChar1.position = new BABYLON.Vector3(-0.9 *size, 0.05* size, 0);
var xcor = [];
for (i =- 20; i <= 20; i++) {
xcor[i] = makeTextPlane(i, "red", size/10);
xcor[i].position = new BABYLON.Vector3(i, 0, 0);
}
var axisY = BABYLON.Mesh.CreateLines("axisY", [
new BABYLON.Vector3( -0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3(0.05 *size, -size* 0.95, 0),
new BABYLON.Vector3(0, -size, 0),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( -0.05 *size, size* 0.95, 0),
new BABYLON.Vector3(0, size, 0),
new BABYLON.Vector3( 0.05 *size, size* 0.95, 0)
], scene);
axisY.color = new BABYLON.Color3(0, 1, 0);
var yChar = makeTextPlane("Y", "green", size/10);
yChar.position = new BABYLON.Vector3(0, 0.9 *size, -0.05* size);
var yChar1 = makeTextPlane("-Y", "green", size/10);
yChar1.position = new BABYLON.Vector3(0, -0.9 *size, 0.05* size);
var ycor = [];
for (y =- 20; y <= 20; y++) {
xcor[y] = makeTextPlane(y, "green", size/10);
xcor[y].position = new BABYLON.Vector3(0, y, 0);
}
var axisZ = BABYLON.Mesh.CreateLines("axisZ", [
new BABYLON.Vector3( 0 , -0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3( 0 , 0.05 *size, -size* 0.95),
new BABYLON.Vector3(0, 0, -size),
new BABYLON.Vector3.Zero(),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0 , -0.05 *size, size* 0.95),
new BABYLON.Vector3(0, 0, size),
new BABYLON.Vector3( 0, 0.05 *size, size* 0.95)
], scene);
axisZ.color = new BABYLON.Color3(0, 0, 1);
var zChar = makeTextPlane("Z", "blue", size/10);
zChar.position = new BABYLON.Vector3(0, 0.05 *size, 0.9* size);
var zChar1 = makeTextPlane("-Z", "blue", size/10);
zChar1.position = new BABYLON.Vector3(0, 0.05 *size, -0.9* size);
var zcor = [];
for (z =- 20; z <= 20; z++) {
xcor[z] = makeTextPlane(z, "green", size/10);
xcor[z].position = new BABYLON.Vector3(0, 0, z);
}
};
var quadraticBezierVectors = BABYLON.Curve3.CreateQuadraticBezier(
BABYLON.Vector3.Zero(),
new BABYLON.Vector3(10, 5, 5),
new BABYLON.Vector3(5, 10, 0), 15);
var quadraticBezierCurve = BABYLON.Mesh.CreateLines("qbezier", quadraticBezierVectors.getPoints(), scene);
quadraticBezierCurve.color = new BABYLON.Color3(1, 1, 0.5);
var cubicBezierVectors = BABYLON.Curve3.CreateCubicBezier(
BABYLON.Vector3.Zero(),
new BABYLON.Vector3(10, 5, 20),
new BABYLON.Vector3(-50, 5, -20),
new BABYLON.Vector3( -10, 20, 10), 60);
var cubicBezierCurve = BABYLON.Mesh.CreateLines("cbezier", cubicBezierVectors.getPoints(), scene);
cubicBezierCurve.color = new BABYLON.Color3(1, 0, 0);
var continued = cubicBezierVectors.continue(cubicBezierVectors).continue(quadraticBezierVectors);
var points = continued.getPoints();
var nbPoints = 60;
var l = continued.length()/2;
var p1 = points[points.length - 1];
var t1 = (p1.subtract(points[points.length - 2])).scale(l);
var p2 = points[0];
var t2 = (points[1].subtract(p2)).scale(l);
var hermite = BABYLON.Curve3.CreateHermiteSpline(p1, t1, p2, t2, nbPoints);
continued = continued.continue(hermite);
var points = continued.getPoints();
var continuedCurve = BABYLON.Mesh.CreateLines("continued", points, scene);
continuedCurve.position = new BABYLON.Vector3(20, -20, 20);
continuedCurve.color = new BABYLON.Color3(0, 0, 0);
var nbPoints = 20; //the number of points between each Vector3 control points
var points = [new BABYLON.Vector3(10, 5, 20),
new BABYLON.Vector3(-20, 5, -20),
new BABYLON.Vector3(-25, 5, -20),
new BABYLON.Vector3( -30, 20, 10),]; //an array of Vector3 the curve must pass through : the control points
var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(points, nbPoints);
var path = catmullRom.getPoints();
var l = catmullRom.length();
var finalcatmullCurve = BABYLON.Mesh.CreateLines("continued", path, scene);
var mySinus = [];
for (var i = 0; i < 30; i++) {
mySinus.push( new BABYLON.Vector3(i, Math.sin(i/10), 0) );
}
var mySinusCurve3 = new BABYLON.Curve3(mySinus);
var myFullCurve = mySinusCurve3.continue(cubicBezierVectors).continue(quadraticBezierVectors);
var points1 = myFullCurve.getPoints();
var curve3d = BABYLON.Mesh.CreateLines("continued", points1, scene);
curve3d.color = new BABYLON.Color3(0.9, 1, 0.2);
showAxis(20);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
BabylonJS-動的テクスチャ
BabylonJSの動的テクスチャはキャンバスを作成し、テクスチャに簡単にテキストを書き込むことができます。 また、キャンバスを操作して、html5キャンバスで使用可能なすべての機能を使用して、動的テクスチャで使用することもできます。
テクスチャにテキストを書き込む方法を示し、作成するメッシュにベジェ曲線を描画する例に取り組みます。
構文
以下は、動的テクスチャを作成するための構文です-
var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);パラメーター
以下は、動的テクスチャを作成するために必要なパラメータです-
- name -動的テクスチャの名前
- option -動的テクスチャの幅と高さがあります
- scene -作成されたシーン
構文
以下は、テクスチャにテキストを書き込むための構文です-
myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);パラメーター
以下は、テクスチャにテキストを書き込むために必要なパラメータです-
- text -書き込まれるテキスト。
- x -左端からの距離。
- Y -invertYに応じて、上端または下端からの距離。
- font -font-style、font-size、font_nameの形式のフォント定義。
- invertY -デフォルトではtrueで、yは上からの距離です。falseの場合、yは下からの距離で、文字が反転します。
- update -デフォルトではtrueで、動的テクスチャはすぐに更新されます。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "https://end3r.github.io/MDN-Games-3D/Babylon.js/js/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);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(0, 0, -5);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", {width:512, height:256}, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
box.material = materialGround;
//Add text to dynamic texture
var font = "bold 60px Arial";
textureGround.drawText("Box", 200, 150, font, "green", "white", true, true);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
動的テクスチャは、次のように動的テクスチャのhtml5キャンバスメソッドとプロパティを操作することもできます-
構文
var ctx = myDynamicTexture.getContext();Demo
<!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);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
var textureContext = textureGround.getContext();
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;
//Draw on canvas
textureContext.beginPath();
textureContext.moveTo(75,40);
textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
説明
グラウンドメッシュを作成し、ダイナミックテクスチャを追加しました。
//ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: 20, height: 10, subdivisions: 25}, scene);
//Create dynamic texture
var textureGround = new BABYLON.DynamicTexture("dynamic texture", 512, scene);
//adding dynamic texture to ground using standard material
var materialGround = new BABYLON.StandardMaterial("Mat", scene);
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;動的テクスチャでキャンバスを操作するには、最初にキャンバスメソッドを呼び出す必要があります-
var textureContext = textureGround.getContext()キャンバスに、次のようにbezierCurveを追加します-
textureContext.beginPath();
textureContext.moveTo(75,40);
textureContext.bezierCurveTo(75,37,70,25,50,25);
textureContext.bezierCurveTo(20,25,20,62.5,20,62.5);
textureContext.bezierCurveTo(20,80,40,102,75,120);
textureContext.bezierCurveTo(110,102,130,80,130,62.5);
textureContext.bezierCurveTo(130,62.5,130,25,100,25);
textureContext.bezierCurveTo(85,25,75,37,75,40);
textureContext.fillStyle = "red";
textureContext.fill();
textureGround.update();BabylonJS-視差マッピング
視差マッピングは、オフセットマッピングとも呼ばれます。 ジオメトリの表面のレリーフの効果を強調するために、マテリアルのテクスチャにオフセットとして適用される高さマップを使用します。 3Dワールドでは、深さを適用した石の壁はより見た目がよく、エンドユーザーにはリアルに見えます。 急角度のビュー角度では、テクスチャ座標がより変位し、ビューの変化に伴う視差効果により奥行きの錯覚を与えます。
Parallexマッピングは標準マテリアルで使用されます。 これについては、標準の素材の章で学びました。
パラレックスマッピングには3つのプロパティがあります。
- material.useParallax = true; -これは、視差マッピングを有効にします。 このプロパティを使用するには、最初にマテリアルにバンプテクスチャを割り当てる必要があります。
- material.useParallaxOcclusion = true; -このプロパティを使用するには、useParallaxをtrueに設定する必要があります。 パララックスオクルージョンを有効にします。
- material.parallaxScaleBias = 0.1; -深さのスケーリング係数をメッシュに適用します。Parallaxの場合、.05〜.1の値が適切です。 オクルージョンの場合、0.2に到達できます。
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() {
//This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
//This creates and positions a free camera (non-mesh)
var camera = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI/2, 100, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, false);
//This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
//This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
//Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
var mesh = BABYLON.Mesh.CreateBox("box01", 25, scene);
mesh.position = new BABYLON.Vector3(0, 0, 0);
var brickWallDiffURL = "images/a1.png";
var brickWallNHURL = "images/a2.png";
var stoneDiffURL = "images/pebble.jpg";
var stoneNHURL = "images/a3.png";
var stoneDiffuseTexture = new BABYLON.Texture(stoneDiffURL, scene);
var stoneNormalsHeightTexture = new BABYLON.Texture(stoneNHURL, scene);
var wallDiffuseTexture = new BABYLON.Texture(brickWallDiffURL, scene);
var wallNormalsHeightTexture = new BABYLON.Texture(brickWallNHURL, scene);
var normalsHeightTexture = stoneNormalsHeightTexture;
var material = new BABYLON.StandardMaterial("mtl01", scene);
material.diffuseTexture = stoneDiffuseTexture;
material.bumpTexture = stoneNormalsHeightTexture;
material.useParallax = true;
material.useParallaxOcclusion = true;
material.parallaxScaleBias = 0.1;
material.specularPower = 1000.0;
material.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
mesh.material = material;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 a1.png、a2.png、pebble.jpg および a3.png を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/a1.png
Images/a2.png
Images/pebble.jpg
images/a3.png
BabylonJS-スクリーンショットの作成
現在作業中の画面をキャプチャするために、印刷画面キーを使用して高解像度のスクリーンショットを撮ることはできません。 BabylonJSはcreatescreenshot APIを提供します。 ファイルはpng形式で保存され、画像の品質は犠牲になりません。
構文
画面のスクリーンショットを撮るには、以下に示すようにエンジン、カメラ、サイズを提供する必要があります。
BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {
var img = document.createElement("img");
img.src = data;
document.body.appendChild(img);
});ユーザーがクリックすると、スクリーンショットAPIを呼び出すボタンが配置されます。
スクリーンショットAPIに渡されるエンジンに変更が加えられます。
var engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true, stencil: true
});*preserveDrawingBuffer* や *stencil* などのオプションをtrueに設定する必要があります。次のようにボタンが追加されます-
ssButton = document.createElement("input");
document.body.appendChild (ssButton);クリックイベントが上のボタンに追加され、 createscreenshot が呼び出されます。 スクリーンの最後にスクリーンショットを更新します。 画像srcに使用されるデータには、スクリーンショットのURLが作成されています。
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, { preserveDrawingBuffer: true, stencil: true });
var createScene = function() {
var scene = new BABYLON.Scene(engine);
//Setup environment
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
var gmat = new BABYLON.StandardMaterial("mat1", scene);
gmat.alpha = 1.0;
//gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
var texture = new BABYLON.Texture("images/mat.jpg", scene);
gmat.diffuseTexture = texture;
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
ground.material = gmat;
var mat = new BABYLON.StandardMaterial("mat1", scene);
mat.alpha = 1.0;
mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
var texture = new BABYLON.Texture("images/rugby.jpg", scene);
mat.diffuseTexture = texture;
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
sphere.position= new BABYLON.Vector3(15,1,0);
sphere.material = mat;
var faceColors = new Array();
faceColors[1] = new BABYLON.Color4(0,1,0,1); //green front
var matcone = new BABYLON.StandardMaterial("mat1", scene);
matcone.alpha = 1.0;
matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
var texture = new BABYLON.Texture("images/cone.jpg", scene);
matcone.diffuseTexture = texture;
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
cone.position= new BABYLON.Vector3(12,1,0);
cone.material = matcone;
var matplane = new BABYLON.StandardMaterial("matplane", scene);
matplane.alpha = 1.0;
matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);
var texture = new BABYLON.Texture("images/board.jpg", scene);
matplane.diffuseTexture = texture;
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);
plane.position= new BABYLON.Vector3(9,2.5,0);
plane.material = matplane;
var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);
disc.position= new BABYLON.Vector3(5,1,0);
var mattorus = new BABYLON.StandardMaterial("matoct", scene);
mattorus.alpha = 1.0;
var texture = new BABYLON.Texture("images/ring.jpg", scene);
mattorus.diffuseTexture = texture;
var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);
torus.position= new BABYLON.Vector3(3,1,0);
torus.material = mattorus;
var matoct = new BABYLON.StandardMaterial("matoct", scene);
matoct.alpha = 1.0;
var texture = new BABYLON.Texture("images/d1.png", scene);
matoct.diffuseTexture = texture;
var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);
octahedron.position= new BABYLON.Vector3(-2,5,0);
octahedron.material = matoct;
var matico = new BABYLON.StandardMaterial("matico", scene);
matico.alpha = 1.0;
var texture = new BABYLON.Texture("images/diamond.jpg", scene);
matico.diffuseTexture = texture;
var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);
icosphere.position= new BABYLON.Vector3(-13,3,0);
icosphere.material = matico;
//add screenshot button
var ssButton = document.getElementById("takescreenshot");
if (ssButton == null) {
ssButton = document.createElement("input");
document.body.appendChild(ssButton);
}
ssButton.id = "takescreenshot";
ssButton.type = "button";
ssButton.style.position = "fixed";
ssButton.style.right = "0px";
ssButton.style.top = "100px";
ssButton.value = "create screenshot";
ssButton.onclick = function () {
BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 },
function (data) {
var img = document.createElement("img");
img.src = data;
document.body.appendChild(img);
});
};
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 mat.jpg、rugby.jpg、cone.jpg、board.jpg、ring.jpg、d1.png、diamond.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/mat.jpg
Images/rugby.jpg
Images/cone.jpg
Images/board.jpg
Images/ring.jpg
Images/d1.png
Images/diamond.jpg
ダイヤモンド画像 Babylonjs-reflection-probes
BabylonJS-標準レンダリングパイプライン
StandardRenderingPipelineには、実世界に関連する一連のポストプロセスエフェクトが用意されています。 ライト効果やイルミネーション効果など、さまざまなポストプロセス効果があります。
以下の例では、レンズ効果、ライトの後処理効果などのさまざまな効果を確認できます。
HDRキューブテクスチャを使用し、テクスチャは.hdrである必要があります。 このテクスチャは、カメラを回転させているときに見られるパノラマ効果を提供します。
var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);標準のレンダリングパイプラインクラスは、次のコード行で効果を得るために呼び出されます-
//Create rendering pipeline
var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0/devicePixelRatio, null, [camera]);
pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene)以下に示すデモでは、cubetexture環境を作成します。 同じためにグラウンドメッシュを使用し、標準レンダリングパイプラインをシーン全体に適用します。
テクスチャは、画像であるlensTextureを使用して与えられ、シーンを移動すると同じテクスチャを見ることができます。
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);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/4, Math.PI/2.5, 200, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.minZ = 0.1;
//Light
new BABYLON.PointLight("point", new BABYLON.Vector3(0, 40, 0), scene);
//Environment Texture
var hdrTexture = new BABYLON.HDRCubeTexture("images/GravelPlaza_REF.hdr", scene, 512);
//Skybox
var hdrSkybox = BABYLON.Mesh.CreateBox("hdrSkyBox", 1000.0, scene);
var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skyBox", scene);
hdrSkyboxMaterial.backFaceCulling = false;
hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
hdrSkyboxMaterial.microSurface = 1.0;
hdrSkyboxMaterial.cameraExposure = 0.6;
hdrSkyboxMaterial.cameraContrast = 1.6;
hdrSkyboxMaterial.disableLighting = true;
hdrSkybox.material = hdrSkyboxMaterial;
hdrSkybox.infiniteDistance = true;
//Create mesh
var woodbox = BABYLON.MeshBuilder.CreateBox("plane", {
width: 40,
height: 50,
depth: 65
}, scene);
var wood = new BABYLON.PBRMaterial("wood", scene);
wood.reflectionTexture = hdrTexture;
wood.directIntensity = 1.5;
wood.environmentIntensity = 0.5;
wood.specularIntensity = 0.3;
wood.cameraExposure = 0.9;
wood.cameraContrast = 1.6;
wood.reflectivityTexture = new BABYLON.Texture("images/reflectivity.png", scene);
wood.useMicroSurfaceFromReflectivityMapAlpha = true;
wood.albedoColor = BABYLON.Color3.White();
wood.albedoTexture = new BABYLON.Texture("images/albedo.png", scene);
woodbox.material = wood;
//Create rendering pipeline
var pipeline = new BABYLON.StandardRenderingPipeline("standard", scene, 1.0/devicePixelRatio, null, [camera]);
pipeline.lensTexture = new BABYLON.Texture("images/lensdirt.jpg", scene);
//Return scene
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>imagesフォルダーを作成し、その中に.hdrファイルを保存します。 www.hdrlabs.comのimages/GravelPlaza_REF.hdrを使用しました。
選択した.hdrタイプのファイルをダウンロードして、デモリンクで使用できます。
出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 images/GravelPlaza_REF.hdr、images/reflectivity.png、images/albedo.png、images/lensdirt.jpg を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 任意の画像をダウンロードして、デモリンクで使用できます。 .hdrファイルのサイズは非常に大きいため、ここに貼り付けることは困難です。
Images/reflectivity.png
Images/albedo.png
Images/lensdirt.png
BabylonJS-シェーダー素材
シェーダーマテリアルは、出力としてマテリアルを提供します。 このマテリアルを任意のメッシュに適用できます。 基本的に、シーンからのデータを頂点シェーダーとフラグメントシェーダーに渡します。
シェーダー素材を取得するには、次のクラスが呼び出されます-
var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);パラメーター
シェーダー素材に関連する次のパラメータを考慮してください-
- Name -シェーダーに名前を付ける文字列。
- Scene -シェーダーが使用されるシーン。
- ルート-3つの方法のいずれかでシェーダーコードへのルート-
object - {
vertex: "custom",
fragment: "custom"
}, used with
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]object - {
vertexElement: "vertexShaderCode",
fragmentElement: "fragmentShaderCode"
},
used with shader code in <script> tagsstring - "./COMMON_NAME",最後に述べた構文は、indexlフォルダー内の外部ファイルCOMMON_NAME.vertex.fxおよびCOMMON_NAME.fragment.fxで使用されます。
- オプション-属性を含むオブジェクトと、名前を文字列として含むユニフォーム配列。
値を持つシェーダー構文は次のようになります-
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});属性は配列形式でなければなりません。 これらには、vector3 3D浮動小数点ベクトルである位置、法線、uvが含まれます。
- vec2 -浮動小数点数の2次元ベクトル。
- vec3 -浮動小数点数の3次元ベクトル。
- mat4 -4列4行の浮動小数点数の行列。
- gl_Position -画面座標の位置データを提供します。
- gl_FragColor -画面上のファセットの表現に色データを提供します。
上記はGLSL言語の組み込み変数です。
頂点の位置はできるだけ正確である必要があるため、すべての浮動小数点数は高精度として設定する必要があります。 これは、各シェーダーのコードの開始時に- precision highp float を使用して行われます。 精度highp floatは、floatに使用される精度を決定します。
次のデモは、最初のオブジェクトメソッドに基づいています。
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">
//downloaded HDR files from :http://www.hdrlabs.com/sibl/archivel
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera(
"Camera", Math.PI/4, Math.PI/4, 4, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
BABYLON.Effect.ShadersStore["customVertexShader"] = "\r\n" +
"precision highp float;\r\n" +
"//Attributes\r\n" +
"attribute vec3 position;\r\n" +
"attribute vec2 uv;\r\n" +
"//Uniforms\r\n" +
"uniform mat4 worldViewProjection;\r\n" +
"//Varying\r\n" +
"varying vec2 vUV;\r\n" +
"void main(void) {
\r\n" +
"gl_Position = worldViewProjection * vec4(position, 1.0);\r\n" +
"vUV = uv;\r\n"+"
}
\r\n";
BABYLON.Effect.ShadersStore["customFragmentShader"] = "\r\n"+
"precision highp float;\r\n" +
"varying vec2 vUV;\r\n" +
"uniform sampler2D textureSampler;\r\n" +
"void main(void) {
\r\n"+
"gl_FragColor = texture2D(textureSampler, vUV);\r\n"+"
}
\r\n";
var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});
var mainTexture = new BABYLON.Texture("images/mat.jpg", scene);
shaderMaterial.setTexture("textureSampler", mainTexture);
shaderMaterial.backFaceCulling = false;
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
box.material = shaderMaterial;
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 mat.jpg を使用しました。 画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
Images/mat.jpg
BabylonJS-骨とスケルトン
Babylonjsは、スケルトンとボーンを作成するAPIを提供します。
構文
さまざまな関数の構文を見てみましょう。
スケルトン用
BABYLON.Skeleton = function (name, id, scene)骨用
BABYLON.Bone = function (name, skeleton, parentBone, matrix)*Skeletons and Bones* はブレンダーを使用して作成でき、同じものを.babylonjsにエクスポートできます。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);
//Adding a light
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
//Adding an Arc Rotate Camera
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
BABYLON.SceneLoader.ImportMesh(
"him", "scenes/Dude/", "Dude.babylon", scene, function (newMeshes, particleSystems, skeletons) {
var dude = newMeshes[0];
console.log(dude);
dude.rotation.y = Math.PI;
dude.position = new BABYLON.Vector3(0, 0, -80);
scene.beginAnimation(skeletons[0], 0, 100, true, 1.0);
})
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>上記のデモリンクでは、Dude.babylonメッシュを使用しています。 Dude.babylonのjsonファイルはここからダウンロードできます-
以下に示すように、ファイルをシーンに保存して出力を取得します。
出力
上記のコード行は、次の出力を生成します-
説明
インポートメッシュには、babylonjsの男メッシュを使用しました。
メッシュはスケルトンを提供します。 たとえば、skeleton = skeletons [0];
スケルトンから骨を取得するには、次のコマンドを実行します-
skeleton.bones;//it gives a array.上記のデモでは、2つの球体を作成し、メッシュに渡しました。 このために、次のコマンドを実行しました-
sphere.attachToBone(skeleton.bones[30], dude);And,
sphere1.attachToBone(skeleton.bones[40], dude);*attachToBone* は、骨に任意のメッシュを与えることができる関数です。*Skeleton.bones [30]* および *skeleton.bones [40]* は、スケルトンの手を指します。BabylonJS-物理エンジン
Babylon.jsには、シーンにインタラクションを追加するのに役立つ物理エンジン用のプラグインシステムがあり、2つのオブジェクト間の衝突と跳ね返りを実生活のインタラクションのように表示します。ビリヤードなどのゲームでも同じ動作が見られ、プレーヤーはスティックでボールを打ったり、ボールが他のボールと衝突したりします。ここで、物理エンジンはボールのリアルな表示を試みます。地面にぶつかると衝突して跳ね返ります。 エンジンには、インパルス、フォース、ベロシティの変更、コールバック関数を適用するのに役立つクラスとAPIがあり、必要に応じて、またメッシュが他のメッシュと衝突した場合に特定のアクションを実行する必要があるときに呼び出されます。
使用できる3つの物理プラグインがあります-
- Cannon.js
- Oimo.js *Energy.js
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Ball/Ground Demo</title>
<script type = "text/javascript" src="https://cdn.babylonjs.com/Oimo.js"></script>
<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 v3 = BABYLON.Vector3;
var createScene = function () {
//This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.86, 1.37, 250, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas);
camera.maxZ = 5000;
camera.lowerRadiusLimit = 120;
camera.upperRadiusLimit = 430;
camera.lowerBetaLimit =0.75;
camera.upperBetaLimit =1.58 ;
new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
var randomNumber = function (min, max) {
if (min == max) {
return (min);
}
var random = Math.random();
return ((random* (max - min)) + min);
};
var mat = new BABYLON.StandardMaterial("ground", scene);
var t = new BABYLON.Texture("images/gr1.jpg", scene);
t.uScale = t.vScale = 10;
mat.diffuseTexture = t;
mat.specularColor = BABYLON.Color3.Black();
var g = BABYLON.Mesh.CreateBox("ground", 200, scene);
g.position.y = -20;
g.position.x = 0
g.scaling.y = 0.01;
g.material = mat;
scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());
g.physicsImpostor = new BABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);
var getPosition = function(y) {
return new v3(randomNumber(-100, 100), y, randomNumber(-100, 100));
};
var allspheres = [];
var y = 50;
var max = 50;
for (var index = 0; index < max; index++) {
var redSphere = BABYLON.Mesh.CreateSphere("s" + index, 32, 8, scene);
redSphere.position = getPosition(y);
redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(redSphere, BABYLON.PhysicsImpostor.SphereImpostor,{
mass: 1, restitution:0.9
}, scene);
redSphere.physicsImpostor.applyImpulse(new BABYLON.Vector3(1, 2, -1), new BABYLON.Vector3(1, 2, 0));
var redMat = new BABYLON.StandardMaterial("ground", scene);
redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
redMat.emissiveColor = BABYLON.Color3.Red();
redSphere.material = redMat;
//push all spheres in the allspheres variable
allspheres.push(redSphere);
y += 10;//increment height
}
scene.registerBeforeRender(function() {
allspheres.forEach(function(obj) {
//if the sphers falls down its updated again over here
//If object falls
if (obj.position.y < -100) {
obj.position = getPosition(200);
}
});
})
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
このデモでは、画像 images/gr1.jpg を使用しました。 画像はimages/フォルダーにローカルに保存され、参照用に以下に貼り付けられます。 選択した任意の画像をダウンロードして、デモリンクで使用できます。
images/gr1.jpg
説明
scene.enablePhysics(new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin());上記の行は、物理プラグインを有効にします。 任意のプラグインを使用できます。 OimoJsplugin（）を使用しました。
g.physicsImpostor = newBABYLON.PhysicsImpostor(g, BABYLON.PhysicsImpostor.BoxImpostor, {
mass: 0,
restitution: 0.9
}, scene);相互作用のために、物理エンジンは偽者を使用します。 詐欺師に適用された場合、オブジェクトの形状は変更できません。 変更した場合、新しい詐欺師を作成する必要があります。
球のために、示されているようにバウンス効果のために偽者を設定し、それにインパルスも追加します-
redSphere.physicsImpostor = new BABYLON.PhysicsImpostor(
redSphere, BABYLON.PhysicsImpostor.SphereImpostor, {
mass: 1,
restitution:0.9
}, scene
);
redSphere.physicsImpostor.applyImpulse(
new BABYLON.Vector3(1, 2, -1),
new BABYLON.Vector3(1, 2, 0)
);physicsImposterのパラメーター
物理効果のために次のパラメータを考慮してください-
対象
ここで、オブジェクトは、インタラクションを適用する対象です。 たとえば、球体、箱など。
Type
タイプは次のいずれかです-
- BABYLON.PhysicsImpostor.SphereImpostor;
- BABYLON.PhysicsImpostor.BoxImpostor;
- BABYLON.PhysicsImpostor.PlaneImpostor;
- BABYLON.PhysicsImpostor.MeshImpostor;
- BABYLON.PhysicsImpostor.CylinderImpostor;
- BABYLON.PhysicsImpostor.ParticleImpostor;
- BABYLON.PhysicsImpostor.HeightmapImpostor;
Mass
唯一の必須パラメーターは質量であり、これはオブジェクトのkg単位の質量です。 値として0は、静的な詐欺師を作成します-床に適しています。
払戻し
これは、衝突時にボディが「戻す」力の量です。 値が低いとバウンスが発生せず、値が1の場合は非常に弾みのある相互作用になります。
scene.registerBeforeRender(function() {
allspheres.forEach(function(obj) {
//if the sphers falls down its updated again over here
//If object falls
if (obj.position.y < -100) {
obj.position = getPosition(200);
}
});
})上記のコードは、地面に落ちた球体を戻します。 落下した球体の地面を更新し続けます。 ブラウザで上記のデモを試して、物理効果を確認してください。
BabylonJS-サウンドと音楽の再生
音と音楽がなければ、ゲームは不完全です。 BabylonJSサウンドエンジンには、ゲームにサウンドエフェクトを追加するのに役立つAPIが付属しています。 ゲームで戦闘が発生した場合、銃声を発する必要があります。これは、babylonjsサウンドエンジンを使用してここでも達成できます。 ゲームのキーボード/マウスコントロールの効果に基づいてサウンド効果を取得できます。 サウンドエンジンは、アンビエントサウンド、特殊サウンド、指向性サウンドを提供します。 エンジンは.mp3および.wavサウンド形式をサポートしています。
構文
var music = new BABYLON.Sound(
"Music", "sound.wav", scene, null, {
loop: true,
autoplay: true
}
);パラメーター
サウンドエンジンに関連する次のパラメータを考慮してください-
- 名前-サウンドの名前。
- URL -再生されるサウンドのURL。
- シーン-サウンドを再生するシーン。
- Callbackfunction -サウンドを再生する準備ができたときに呼び出されるコールバック関数。現在、nullです。 いくつかの例を見て、その使用方法を学びます。
- * Jsonオブジェクト*-このオブジェクトには、実行する必要があるものの基本的な詳細があります。
- sound.autoplay -これにより、ファイルがダウンロードされるとサウンドが自動的に再生されます。
- loop：true -これは、サウンドがループで連続して再生されることを意味します。
プロジェクトディレクトリにサウンドフォルダーを作成し、サンプルオーディオファイルをダウンロードして出力をテストします。
すでに作成したシーンにサウンドを追加しましょう。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</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);
camera.attachControl(canvas, true);
var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, {
loop: true,
autoplay: true
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
*callback* 関数がどのように機能するかを確認しましょう。 サウンドを自動再生したくない場合、または必要なときにのみサウンドを再生する場合は、コールバック関数を使用して実行できます。例えば、
Var music = new BABYLON.Sound ("Music", "music.wav", scene, function callback() {music.play();});Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</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);
camera.attachControl(canvas, true)
var music = new BABYLON.Sound(
"sound", "sounds/scooby.wav", scene, function callback() { setTimeout(function() {music.play();}, 5000)});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>コールバックでは、setTimeoutを使用します。 つまり、特定の時間後にのみサウンドを再生する必要があります。 5sをタイマーとして追加したため、ファイルScooby.wavがダウンロードされて5sが完了すると、サウンドが再生されます。
キーボードのクリックとキーで音を鳴らす
シーンの任意の場所をクリックすると、爆発的な効果音が聞こえます。矢印キー（左、右、上または下）を押すと、爆発的な効果音が再生されます。
クリックのために、イベントを onmousedown にウィンドウにアタッチし、キーのために、keydownイベントを使用します。 キーコードに基づいて、サウンドが再生されます。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</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);
camera.attachControl(canvas, true)
var sound = new BABYLON.Sound("gunshot", "sounds/explosion.wav", scene);
window.addEventListener("mousedown", function (evt) {
if (evt.button === 0) {//onclick
sound.play();
}
});
window.addEventListener("keydown", function (evt) {//arrow key left right up down
if (evt.keyCode === 37 || evt.keyCode === 38 || evt.keyCode === 39 || evt.keyCode === 40) {
sound.play();
}
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
最初に出会ったjsonオブジェクトのサウンドの音量を制御できます。
例えば、
Var music = new BABYLON.Sound("sound", "sounds/scooby.wav", scene, null, {
loop: true,
autoplay: true,
volume:0.5
});サウンドファイルがいつ終了したかを知るために、次のように使用できるイベントがあります-
music.onended = function () {
console.log("sound ended");
//you can do the required stuff here like play it again or play some other sound etc.
};SetVolumeプロパティは、コンストラクター以外にサウンドを制御する場合にも使用できます。
例えば、
music.setVolume(volume);シーンで複数のサウンドを再生している場合、作成されたすべてのサウンドにグローバルサウンドを設定できます。
例えば、
BABYLON.Engine.audioEngine.setGlobalVolume(0.5);空間3Dサウンドの作成
サウンドを空間サウンド（空間サウンドに似たサウンド）に変換する場合は、サウンドコンストラクターにオプションを追加する必要があります。
例えば、
var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, {
loop: false,
autoplay: true,
spatialSound: true
});以下は、空間音のさまざまなオプションです-
- DistanceModel -デフォルトでは「線形」方程式を使用しています。 他のオプションは「逆」または「指数」です。
- MaxDistance -100に設定されています。 これは、リスナーがサウンドから100ユニット以上離れると、ボリュームが0になることを意味します。 もう音が聞こえない
- PanningModel -「HRTF」に設定されます。 仕様は、それが人間の被験者から測定されたインパルス応答との畳み込みを使用した高品質の空間化アルゴリズムであると述べています。 ステレオ出力を指します。
- MaxDistance -distanceModelが線形の場合にのみ使用されます。逆関数または指数関数では使用されません。
空間音を使ったデモ
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</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);
camera.attachControl(canvas, true);
var music = new BABYLON.Sound(
"music", "sounds/explosion.wav", scene, null, {
loop: false, autoplay: true, spatialSound: true, distanceModel: "exponential"
}
);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>メッシュへのサウンドの付加
BABYLON.Soundを使用して、メッシュにサウンドを添付できます。 メッシュが動いている場合、音はそれに沿って動きます。 * AttachtoMesh（mesh）*は使用する方法です。
Demo
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Scene- Playing sounds and music</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);
camera.attachControl(canvas, true);
var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
var box = BABYLON.Mesh.CreateBox("box", '2', scene);
box.material = materialforbox;
materialforbox.ambientColor = new BABYLON.Color3(1, 0, 0.2);
var music = new BABYLON.Sound("music", "sounds/explosion.wav", scene, null, {
loop: false,
autoplay: true,
spatialSound: true,
distanceModel: "exponential"
});
music.attachToMesh(box);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>出力
上記のコード行は、次の出力を生成します-
