これは Babylon.js アドベントカレンダー 2023 の記事です。
Babylon.jsでは、空間に並べた3Dモデルの大きさや位置などを直感的に調整できる機能があります。本日はこれを紹介します。
1. どんなことができるか
読み込んだ3Dモデルに対して、Gizmoを出して大きさや向きを変更できます。
上記のサンプルコードです。
https://playground.babylonjs.com/#5G9MC5
こちらにやり方が書かれています。
コードの記述方法です。メッシュを読み込んだ後に、こちらの記述を入れるだけです。
ここまでだと、Bounding Boxを表示させて拡大縮小、回転ができるのみです。
マウスドラッグで位置まで変更できるようにするためには、こちらの処理を追加します。
2. Playground上で任意のメッシュに変更してBounding Boxを表示させる
自分の持っているメッシュに変更しても動きました。
この方法を紹介します。
まず、Babylon.js Playgroundで外部のアセットを読み込むには、GitHubに格納しておいて、そのURLを指定する方法があります。
しかし、公式ドキュメントによると、少しURLを変更する必要があります。
例： https://github.com/BabylonJS/MeshesLibrary/blob/master/PBR_Spheres.glb を使うとします。
(1) URLから "/blob/"を削除します
(2) "https://github.com" を "https://raw.githubusercontent.com" に変更します。
(3) 完成です。この場合、 "https://raw.githubusercontent.com/BabylonJS/MeshesLibrary/master/PBR_Spheres.glb"というファイルパスになります。
今回のPlayground (https://playground.babylonjs.com/#5G9MC5) では、冒頭でこのように書かれています。
BABYLON.SceneLoader.LoadAssetContainer("https://models.babylonjs.com/", "seagulf.glb", scene, function (container) {
これをこのように変更します。
BABYLON.SceneLoader.LoadAssetContainer("https://raw.githubusercontent.com/flushpot1125/model_public/main/", "dram.glb", scene, function (container) {
3. おわりに
この機能を入れておくと、画面上のGUI操作で3Dモデルの位置を調整することが簡単にできて便利ですね。
