マテリアルを使用すると、メッシュを色とテクスチャで覆うことができます。

なお、メッシュを表示するには光が必要です。

拡散マテリアル(Diffuse)と鏡面マテリアル(Specular)では、光源を作成する必要があります。

いきましょう!

f:id:hollywis:20200619152808p:plain

まずは、StandardMaterialでいきます。

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;

BABYLON.Color3はそれぞれ、赤、緑、青を0~1の間で設定します。0がなし、1が一番強い状態です。

  • diffuseColorは拡散色(光に対して反射する基本の色)
  • specularColorは鏡面反射(ハイライト的な反射)
  • emissiveColorは影の色(そのメッシュ自身がその色で反射する)
  • ambientColor 環境光の反射。シーンのアンビエントカラーが設定されている場合にのみ適用される

そして、定義してマテリアルは、mesh.materialでマテリアルを設定していきます

myMaterial.alpha = 0.5;

aplhaで透明度を変えられる

テクスチャ

メッシュに対して、画像を張れる.

f:id:hollywis:20200619152557p:plain

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;

ワイヤーフレーム

マテリアルに対して、ワイヤーフレーム表示

f:id:hollywis:20200619153209p:plain

myMaterial.wireframe = true;

まとめ

メッシュに対して、設定できるマテリアルについて紹介しました。

色マテリアルの場合は、まず光Lightをシーンに設定した上で

それぞれ、拡散光、鏡面反射、自身の発光、環境光を設定出来ました。

また、画像テクスチャを貼ることも出来ます。

そして、ワイヤフレーム表示もマテリアルで行いました。

次はカメラです。

hollywis.hatenablog.com

Receive the latest news in your email
Table of content
Related articles