Chapter 09

2-03: メッシュを設置 (Place and Scale a Mesh)

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

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

🔨 2-03: メッシュを設置 (Place and Scale a Mesh)

👀 サイズ

ボックスなどの一部のメッシュには、作成中に変更するように設定できるプロパティがあります。

const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, height: 1.5, depth: 3})

作成後、サイズ設定オプションがないメッシュの場合、メッシュをスケーリングすることでサイズを変更できます。

const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling.x = 2;
box.scaling.y = 1.5;
box.scaling.z = 3;
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling = new BABYLON.Vector3(2, 1.5, 3);

ご覧の通り、スケーリングは x, y, z のプロパティを持つベクトルオブジェクトです。
上記の 3 つのコードセットはすべて、同じサイズのボックスを生成します。

📍 位置

大部分のメッシュでは、position プロパティはそのメッシュの中心に配置されています。
Positionは、プロパティ x, y, z を持つベクトルオブジェクトでもあるため、次の 2 つのコードセットはボックスを同じ場所に配置します。

box.position.x = -2;
box.position.y = 4.2;
box.position.z = 0.1;
box.position = new BABYLON.Vector3(-2, 4.2, 0.1);

これで、positions を使用して、3 つの異なる方法で、サイズを指定したボックスを Playground に配置しました。 いずれの場合も、ボックスの高さは 1.5 であるため、ボックスの位置ごとに (その半分の高さの) y = 0.75 で地面に配置します。

→ 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 box1 = BABYLON.MeshBuilder.CreateBox("box1", {width: 2, height: 1.5, depth: 3});
    box1.position.y = 0.75;

    const box2 = BABYLON.MeshBuilder.CreateBox("box2", {});
    box2.scaling.x = 2;
    box2.scaling.y = 1.5;
    box2.scaling.z = 3;
    box2.position = new BABYLON.Vector3(-3, 0.75, 0);

    const box3 = BABYLON.MeshBuilder.CreateBox("box3", {});
    box3.scaling = new BABYLON.Vector3(2, 1.5, 3);
    box3.position.x = 3;
    box3.position.y = 0.75;
    box3.position.z = 0;

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

    return scene;
}

⇔ 向き

スケーリングと位置に関しては、メッシュの rotation プロパティは x, y, z プロパティを持ったベクトルオブジェクトでした。ただし、私たちの最初につくるワールドでは、3 つの軸すべてを回転軸に設定すると混乱する可能性があるため、ひとつの軸での回転のみを考慮します。

回転はラジアン (radians) で示されます。度 (degrees) で作業することが好きな場合、Babylon.js は変換ツールを提供しています。

以下のコードは両方とも同じ回転を生成します

box.rotation.y = Math.PI / 4;
box.rotation.y = BABYLON.Tools.ToRadians(45);

→ 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;
    box.rotation.y = Math.PI / 4;

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

    return scene;
}

☞ 次

これで、メッシュのサイズ、位置、向きを変更して、建物としてのボックスにもう少しバリエーションを追加できます。
シーンにさらにボックスを配置する前に、それらをもう少し建物のようにすることができるかどうかを確認しましょう。