babylon.jsのチュートリアルを学習していきます。

Materials

マテリアルはメッシュに光が当たったときの反応を色やテクスチャで設定します。
１コのマテリアルは複数のメッシュに設定できる。
光の反応の設定として、以下がある。

ディフューズ：拡散反射光
スペキュラー：鏡面反射光
エミッシブ：放射光
アンビエント：環境光

下記ページに簡潔な説明があります。3Dモデルの基礎知識ですね。
http://www.atelier-blue.com/program/mdirectx/3d/3d01-14.htm

Color

マテリアルの使い方の例。マテリアルを生成し、色を設定。メッシュに設定します。

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

myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

mesh.material = myMaterial;

会社でよく分からなくて、心が折れそうだと云っていたら、@dmystkさんがまとめて教えてくれました。光の反射設定はこちらの記事を読みましょう。
https://qiita.com/dmystk/items/fa2b6c2b84e48fd7d511#diffusecolor

透明度の設定

  greenMat.alpha = 1.0;

透明度のサンプル

See the Pen babylon101 Materials color alpha by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

Texture

マテリアルに画像を設定する場合

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

myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.specularTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.ambientTexture = new BABYLON.Texture("PATH TO IMAGE", scene);

mesh.material = myMaterial;

テクスチャの透明度の設定も同じ

mat.alpha = 1.0;

See the Pen babylon101 Materials texture alpha by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

テクスチャ画像の透明部分を有効にするかを設定するオプション

mat.diffuseTexture.hasAlpha = true;

Back Face Culling

テクスチャ画像の透明部分から反対側を透かして見えるかを設定するオプション

mat.backFaceCulling = true;

WireFrame

ワイヤフレーム表示を設定するオプション

mat.wireframe = true;

See the Pen babylon101 Materials Wireframe by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

Local File Access

google chromeは、ローカルファイルへのアクセスをデフォルトで許可していないので、アクセスしたい場合は、ターミナルから以下を実行する。

windows

start chrome --allow-file-access-from-files

mac

open -a "Google Chrome" --args --allow-file-access-from-files

linux

google-chrome --allow-file-access-from-files

babylon.jsチュートリアル４ - Materials