Babylon.js v6.3.1 Practiceめも③　glTF形式3Dモデルいろいろ表示

2023年7月3日 12:50

前回からのつづきです。　glTF形式の3Dモデルをいろいろ表示しています。　モデルによっては読込・表示までに時間のかかるものも。

　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCodePenのページを開き、サムネイル画像をクリックすると実行結果をフルスクリーンで表示するCodePenのページを開きます。

　現在CodePenに投稿しているBabylon.js v6.3.1のコードの一覧はCodePenのCollection機能で作成した「Babylon.js v6.3.1 Practice」で見ることができます。

Babylon.js v6.3.1 Practice#18 glTF 3D Model Display02

glTF形式の3DモデルをCDN経由で読み込んで表示しています。　コード内での処理は基本的に前回の Practice#17 で行っていることと同じです。

HTML

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Babylon Template</title>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/6.3.1/babylon.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/6.3.1/babylon.min.js"></script> -->


    <!-- <script src="https://cdn.jsdelivr.net/npm/babylonjs@6.3.1/babylon.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/babylonjs@6.3.1/babylon.min.js"></script>

    <!-- <script src="https://unpkg.com/babylonjs@6.3.1/babylon.js"></script> -->


    <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@6.3.1/babylonjs.loaders.min.js"></script>
    <!-- <script src="https://unpkg.com/babylonjs-loaders@6.3.1/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 -->

</body>

CSS

html, body {
    overflow: hidden;
    width   : 100%;
    height  : 100%;
    margin  : 0;
    padding : 0;
}

#renderCanvas {
    width   : 100%;
    height  : 100%;
    touch-action: none;
}

JavaScript

main = () => {

    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 = () => {

        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0, 1, 1);

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

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


        // Load and display 3D model in glTF file format
        BABYLON.SceneLoader.Append("https://rawcdn.githack.com/KhronosGroup/glTF-WebGL-PBR/e7d707f3618d7e7cd5a78ce7b1403960ee3f7173/models/AppleTree/glTF/", "AppleTree.gltf", scene, newMeshes => {
      
            const mesh = scene.meshes[0];

            //mesh.position.y  =  -2.5;
            //mesh.position.z  =  1.5;

            //mesh.rotation  = new BABYLON.Vector3([X-axis rotation], [Y-axis rotation], [Z-axis rotation]); 
            // Used to orient the 3D model

            //mesh.rotation  = new BABYLON.Vector3(0, Math.PI, 0); // 3DModel displayed from the behind
            //mesh.rotation  = new BABYLON.Vector3(0, Math.PI/2, 0); // 3DModel displayed from the side
            mesh.rotation  = new BABYLON.Vector3(0, 0, 0); // 3DModel displayed from the front

            scene.activeCamera = null;
            scene.createDefaultCameraOrLight(true);
            scene.activeCamera.attachControl(canvas, false);
        });

        return scene;
    }

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

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

    // Watch for browser/canvas resize events
    window.addEventListener("resize", () => {
        engine.resize();
    });

}

// Start processing after all DOM elements have been loaded
window.addEventListener("DOMContentLoaded", main);

JavaScript内の

// Load and display 3D model in glTF file format
BABYLON.SceneLoader.Append("https://rawcdn.githack.com/KhronosGroup/glTF-WebGL-PBR/e7d707f3618d7e7cd5a78ce7b1403960ee3f7173/models/AppleTree/glTF/", "AppleTree.gltf", scene, newMeshes => {
      
    const mesh = scene.meshes[0];

    //mesh.position.y  =  -2.5;
    //mesh.position.z  =  1.5;

    //mesh.rotation  = new BABYLON.Vector3([X-axis rotation], [Y-axis rotation], [Z-axis rotation]); 
    // Used to orient the 3D model

    //mesh.rotation  = new BABYLON.Vector3(0, Math.PI, 0); // 3DModel displayed from the behind
    //mesh.rotation  = new BABYLON.Vector3(0, Math.PI/2, 0); // 3DModel displayed from the side
    mesh.rotation  = new BABYLON.Vector3(0, 0, 0); // 3DModel displayed from the front

    scene.activeCamera = null;
    scene.createDefaultCameraOrLight(true);
    scene.activeCamera.attachControl(canvas, false);
});

で3Dモデルを読み込んで表示しています。

BABYLON.SceneLoader.Append("https://rawcdn.githack.com/KhronosGroup/glTF-WebGL-PBR/e7d707f3618d7e7cd5a78ce7b1403960ee3f7173/models/AppleTree/glTF/", "AppleTree.gltf", scene, newMeshes => {

で指定している3Dモデルファイルを読み込んで表示します。

あとは
mesh.position.x、mesh.position.y、mesh.position.z で位置、mesh.rotationで回転を指定して3Dモデルの見え方を調節しています。

このnoteのここ以降の残りのコードは、基本的にこれらのファイル、位置、回転等を変更していろいろな3Dモデルを表示しているものです。