Babylon.js v6.3.1 Practiceめも④　glTF形式3Dモデルアニメーションいろいろ表示

2023年7月3日 15:05

前回からのつづきです。　今回は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#39 glTF 3D Model Animation Display 01

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/mrdoob/three.js/1a560a3426e24bbfc9ca1f5fb0dfb4c727d59046/examples/models/gltf/BotSkinned/glTF-MaterialsUnlit/", "Bot_Skinned.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); 
            //mesh.rotation  = new BABYLON.Vector3(0, Math.PI/2, 0); 
            mesh.rotation  = new BABYLON.Vector3(0, 0, 0); 

            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/mrdoob/three.js/1a560a3426e24bbfc9ca1f5fb0dfb4c727d59046/examples/models/gltf/BotSkinned/glTF-MaterialsUnlit/", "Bot_Skinned.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); 
            //mesh.rotation  = new BABYLON.Vector3(0, Math.PI/2, 0); 
            mesh.rotation  = new BABYLON.Vector3(0, 0, 0); 

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