Chapter 05

1-04 : 最初の web アプリのセットアップ

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

このページの原文: https://doc.babylonjs.com/start/chap1/first_app

👀 何を学ぶの?

このページでは、(Babylon.js 実行環境 Playground ではなく) 自分自身の web アプリで Babylon.js を実行させるにはどうしたらいいのかのコピペ用コード を解説します。

💻 最初の web アプリのセットアップ (Setup Your First Web App)

Playground のコードに必要なテンプレートは次のとおりです。

var createScene = function() {
    var scene = new BABYLON.Scene(engine);

    // シーンにカメラを追加し、それを canvas にアタッチ
    // シーンにライト(光源)を追加

    // あなたのコード

    return scene;
};

この形式に従うことにより、以下をテンプレートとして使用して、独自の HTML ページにすばやくドロップ(コピペ)できます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Babylon Template</title>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>
   <body>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
    <script>
        // canvas 要素を取得
        const canvas = document.getElementById("renderCanvas"); 
        // BABYLON 3D エンジンを作成
        const engine = new BABYLON.Engine(canvas, true); 

        // Playground のフォーマットに合った自分のコードを追加

        // createScene を呼ぶ
        const scene = createScene(); 

        // シーンを継続的にレンダリングするためにレンダーループに登録する
        engine.runRenderLoop(function () {
                scene.render();
        });

        // ブラウザーのリサイズイベントを監視する
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>
   </body>
</html>

この行 <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> では、
あなたのシーンにモデルをインポートできる状態にしています。

また、この行 <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> では、
スクリーンにタッチできるようにしています。

1. 既存の箱のモデルをロードして表示しているだけの web アプリ

サンプル web ページのライブデモ:

https://doc.babylonjs.com/webpages/app1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>
   <body>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);  
            // ↓ここでモデルのロード
            BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>
   </body>
</html>

2. 箱のモデルを (コードで) 作成して表示している web アプリ

サンプル web ページのライブデモ:

https://doc.babylonjs.com/webpages/app2.html

(見た目的には箱が表示されているだけなのでさっきのやつと同じように見えますが、内部的には、さっきのは既存のモデルをロードして表示しているだけですが、こちらはコードでモデルが生成されて表示されています)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>
    <body>
        <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
        <script>
            const canvas = document.getElementById("renderCanvas"); // Get the canvas element
            const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

            // Add your code here matching the playground format
            const createScene = function () {
                const scene = new BABYLON.Scene(engine);  

                // 箱を生成
                BABYLON.MeshBuilder.CreateBox("box", {});

                const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
                camera.attachControl(canvas, true);
                const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

                return scene;
            };

            const scene = createScene(); // Call the createScene function

            // Register a render loop to repeatedly render the scene
            engine.runRenderLoop(function () {
                scene.render();
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

もっと Babylon.js のコードの使用について学び、より興味深いモデルを構築してみましょう。まず地面 (ground) を作るところから世界を作っていきます。


参考資料)さらなる学習に

https://doc.babylonjs.com/divingDeeper/developWithBjs/npmSupport

https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking