Chapter 11

2-05: テクスチャを貼る (Add Texture)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.20に更新

このページの原文: https://doc.babylonjs.com/start/chap2/material

🖼 2-05: テクスチャを貼る (Add Texture)

メッシュに色とテクスチャを追加するために、メッシュにマテリアルを適用します。基本的なマテリアルは、このように作成された StandardMaterial です。

const material = new BABYLON.StandardMaterial("name", scene);

地面の色を草の色の緑にしましょう。

const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
ground.material = groundMat; // 地面の色のためのマテリアルのプロパティを指定

シーンはひとつしか無いので、そのパラメータを削除して、現在のシーンでそれをデフォルトにすることができます。

色を設定するには、赤、緑、青(r、g、b)の3つのパラメーターが必要です。それぞれ、0〜1 が入り、(0、0、0)は黒、(1、1、1)は白になります。
これらの色は、以下のようにも指定できます

new BABYLON.Color3.Red();
new BABYLON.Color3.Green();
new BABYLON.Color3.Blue();
new BABYLON.Color3.Black();
new BABYLON.Color3.White();
new BABYLON.Color3.Purple();
new BABYLON.Color3.Magenta();
new BABYLON.Color3.Yellow();
new BABYLON.Color3.Gray(),
new BABYLON.Color3.Teal();

ボックスと屋根のテクスチャも追加しましょう。

const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg", scene);
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png");

テクスチャの最初のパラメータは、使用する画像への相対 URL または絶対 URL です。いつものように、シーンパラメータはオプションであり、デフォルトで現在のシーンになります。

最後に、もちろん、マテリアルのプロパティをセットすることになります。

roof.material = roofMat;
box.material = boxMat;

→ Playgroundでライブデモとコードを確認

ドアも窓も無い石壁の家というのは良い見た目ではありませんね。また、よく見ると、各面が同じ画像を使用しており、一部の面では回転してしまっていることがわかります。

次は、これを改善していきましょう


参考)さらなる学びに

https://doc.babylonjs.com/divingDeeper/materials