gltf (.glb)ファイルをbabylon.jsを使ってWebサイト上に表示する方法

“3Dデータにおけるjpeg”と呼ばれる gltf を、Babylon.jsを使ってWeb上で表示する方法について紹介します。

サンプル

Babylon.jsではcanvas要素を利用して3Dレンダリングを行います。
以下のように、背景を透過させることが出来ます。

※読み込みに少し時間がかかります。

基本形

<!DOCTYPE html>
<html lang="ja">

<head>
    <title>gltf Babylon</title>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
</head>

<body>

    <canvas id="renderCanvas"></canvas>
    <script>
        const actcanvas = document.getElementById("renderCanvas");
        const babyengine = new BABYLON.Engine(actcanvas, true)

        const createScene = function () {
            const scene = new BABYLON.Scene(babyengine);
            //透過させる
            scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, 5));
            camera.lowerRadiusLimit=2;
            camera.attachControl(actcanvas, true);

            const light = new BABYLON.PointLight(
                "light",
                new BABYLON.Vector3(20, 20, 0),
                scene
            );

            // gltf ファイルを指定する
            BABYLON.SceneLoader.Append("", "!gltf-file!", scene, function (scene) {
                scene.createDefaultCameraOrLight(true, true, true);
                scene.activeCamera.alpha += Math.PI;
            });

            return scene;
        };

        const sample3d = createScene();

        function renderLoop() {
            sample3d.render();
        }

        babyengine.runRenderLoop(renderLoop);
        window.addEventListener("resize", function () {
            babyengine.resize();
        });
    </script>

</body>
</html>

カメラについては下記の記事を確認してください。

ちなみに、上記のコードでは複数のcanvasの埋め込みに対応できません。
もし複数の gltf ファイルを表示したいのであれば、iFrameを埋め込んでしまったり、以下のように複数のcanvasに対応した技術を使うのが良いでしょう。