Chapter 07

2-01: 地面 (Grounding the World)

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

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

🏡 2-01: 地面を追加 (Grounding the World)

現時点では、なにもない空間に浮かぶ箱になっています。シーンをより世界っぽくするために、地面を追加してみましょう。そして箱がその地面の上に建っている建物と考えてみましょう。

地面はMeshBuilder.CreateGroundで簡単に追加できます。

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});

いくつかの建物(ボックス)を配置するために十分な大きさの地面を作成する必要があるため、options パラメータには x 方向の width (幅) と z 方向の height (高さ) の 2 つのプロパティが設定されています。 (y が垂直方向のパラメータのため、プロパティ名は width (幅) と depth (奥行) とするのが適切だったかもしれませんね)

ただ、これだと箱が地面にめり込んでいますね。これは作成時にメッシュが原点に配置されるためです。箱の真ん中を地面が通り抜けていますね。

(→ Playgroundで確認)

箱を半分だけ上に上げたいので、位置を調節します。


高さは y 軸

box.position.y = 0.5;  // 箱のデフォルトの高さは 1 なので調節

(→ Playgroundで確認)

const createScene =  () => {
    const scene = new BABYLON.Scene(engine);
    // カメラとライトの設定
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
    // ボックス
    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    box.position.y = 0.5;
    // 地面
    const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});

    return scene;
}

これでちゃんと地面の上に立ちましたね。

現在、この世界は静かですね。次はサウンドを追加してみましょう。