Zenn
Open13

Babylon.js で村を作る

Babylon.js
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

最初のコード

Playground を開いて下記内容を入力する。

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", {});
    const ground = BABYLON.MeshBuilder.CreateGround(
        "ground",
        {
            width: 10,
            height: 10
        }
    );
    
    return scene;
}
薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

音楽を再生する

コード例
    const music = new BABYLON.Sound(
        "cello",
        "sounds/cellolong.wav",
        scene,
        null,
        {
            loop: true,
            autoplay: true
        }
    );

new を忘れて 5 分くらい浪費してしまった。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

任意のタイミングで再生する

コード例
    const bounce = new BABYLON.Sound(
        "bounce",
        "sounds/bounce.wav",
        scene
    );

    setInterval(() => bounce.play(), 3000);

第 3 引数の scena は省略できる。

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

メッシュの拡大縮小と並行移動

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;
}


実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

回転

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;
}


実行結果

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

家を作る

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 roof = BABYLON.MeshBuilder.CreateCylinder(
        "roof",
        {
            diameter: 1.3,
            height: 1.2,
            tessellation: 3,
        }
    );

    roof.scaling.x = 0.75;
    roof.rotation.z = Math.PI / 2;
    roof.position.y = 1.22;

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

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

色やテクスチャを貼る

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 groundMat = new BABYLON.StandardMaterial("groundMat");
    groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);

    const roofMat = new BABYLON.StandardMaterial("roofMat");
    roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");

    const boxMat = new BABYLON.StandardMaterial("boxMat");
    boxMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png");

    const light = new BABYLON.HemisphericLight(
        "light",
        new BABYLON.Vector3(1, 1, 0)
    );

    const box = BABYLON.MeshBuilder.CreateBox("box", {});

    box.material = boxMat;
    box.position.y = 0.5;

    const roof = BABYLON.MeshBuilder.CreateCylinder(
        "roof",
        {
            diameter: 1.3,
            height: 1.2,
            tessellation: 3,
        }
    );

    roof.material = roofMat;
    roof.scaling.x = 0.75;
    roof.rotation.z = Math.PI / 2;
    roof.position.y = 1.22;

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

    ground.material = groundMat;
    
    return scene;
}

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

キーボードショートカット

VSCode と同じでコーディングしやすい。

VSCode も Babylon.js も Microsoft 製だから自然の成り行きか。