Babylon.js v6.3.1 Practiceめも④ glTF形式3Dモデルアニメーションいろいろ表示
前回からのつづきです。 今回は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
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);
});
で3Dモデルのアニメーションを読み込んで表示させています。 glTFファイルを読込・表示ということでは、基本は前回の Practice#18 や前々回の Practice#17 でやっていたこと、書いていたことと同じとなります。
Babylon.js v6.3.1 Practice#40 glTF 3D Model Animation Display 02
Babylon.js v6.3.1 Practice#40 glTF 3D Model Animation Display 02
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#41 glTF 3D Model Animation Display 03
Babylon.js v6.3.1 Practice#41 glTF 3D Model Animation Display 03
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#42 glTF 3D Model Animation Display 04
Babylon.js v6.3.1 Practice#42 glTF 3D Model Animation Display 04
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#43 glTF 3D Model Animation Display 05
Babylon.js v6.3.1 Practice#43 glTF 3D Model Animation Display 05
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#44 glTF 3D Model Animation Display 06
Babylon.js v6.3.1 Practice#44 glTF 3D Model Animation Display 06
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#45 glTF 3D Model Animation Display 07
Babylon.js v6.3.1 Practice#45 glTF 3D Model Animation Display 07
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#46 glTF 3D Model Animation Display 08
Babylon.js v6.3.1 Practice#46 glTF 3D Model Animation Display 08
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
Babylon.js v6.3.1 Practice#47 glTF 3D Model Animation Display 09
Babylon.js v6.3.1 Practice#47 glTF 3D Model Animation Display 09
HTML Practice#39と共通
CSS Practice#39と共通
JavaScript Practice#39とほぼ共通 → 読み込み対象となるglTFファイルの修正と、その表示のためのサイズ・角度 等が修正されている
次回
まとめ
この記事が気に入ったらサポートをしてみませんか?