このページの原文: https://doc.babylonjs.com/start/chap5/sky
☁ 5-02: 頭上の空 (Skies Above)
大きな skybox cube の内側に 6 つの適切な画像を適用することで、空の様子をシミュレートすることができます。
(画像は 3D オブジェクトよりもはるかに簡単かつ高速にレンダリングできます。空のほかに、遠くの風景にも適していますね。)
🈳 CubeTexture
Skybox
の画像は通常 CubeTexture
で読み込まれます。
コンストラクタ:
new BABYLON.CubeTexture("textures/skybox", scene);
CubeTexture
のコンストラクタは、ベースの URL (rootUrl
) を受け取り、
そのベース URL の後ろに
"_px.jpg", "_nx.jpg", "_py.jpg", "_ny.jpg", "_pz.jpg", "_nz.jpg" の続く画像を認識します。
それぞれ、+x, -x, +y, -y, +z, -z に面する画像として処理されます。
仮に skybox
という名称にしたなら、以下の 6 つの名前の画像をそれぞれ準備する必要があります:
px | nx |
---|---|
![]() |
![]() |
skybox_px.jpg | skybox_nx.jpg |
py | ny |
---|---|
![]() |
![]() |
skybox_py.jpg | skybox_ny.jpg |
pz | nz |
---|---|
![]() |
![]() |
skybox_pz.jpg | skybox_nz.jpg |
🔍 コードの解説
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:150}, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
// ↓ skybox がリフレクションマップ (反射マップ) (後述) でない場合でも、
// CubeTexture は ReflectionTexture を使用して適用する必要があります。
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
// ↓ coordinatesMode を SKYBOX_MODE に設定すると、
// 反射をシミュレートするのではなく、テクスチャを直接キューブ上にペイントします。
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
Reflections and Refractions ドキュメント
coordinatesMode ドキュメント
また、カメラが地面の下に行かないように調整 (制限) します。
camera.upperBetaLimit = Math.PI / 2.2;
👍 Playground 触って確認
↑ ぜひツイート内の動画を再生して見てください👀(gif アニメなので音声ありません)
👀 参考記事
Class CubeTexture ドキュメント
🌲 次は
今回、空をいい感じに作ったので、次の村改善タスクとして、木をいくつか育ててみましょう。