Chapter 16

2-10: Viewer (Changing the Viewer's Camera)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.05.20に更新

このページの原文: https://doc.babylonjs.com/start/chap2/viewer2

👀 2-10: Viewer (Changing the Viewer's Camera)

今回は Babylon.js が用意してくれている専用のビューアライブラリ Babylon.js Viewer を使って web サイトに .glb モデルを表示してみましょう。

https://doc.babylonjs.com/extensions/babylonViewer

配置してみる

前のページで .glb で出力した村 3D ファイル Village.glb
web サイトの viewer に配置するとどうなりますか?

デモサイト「Viewer をデフォルトの状態のまま使った村」

https://doc.babylonjs.com/webpages/page2.html
    <!-- Babylon.js Viewer ライブラリの読み込み --->
    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
</head>
<body>
    <!-- モデル village.glb の表示 --->
    <babylon model="https://assets.babylonjs.com/meshes/village.glb"></babylon>

地面がちらついて見えますね。なぜでしょうか?

これは、Viewer によって既に(よしなに)追加してくれているデフォルトの地面と、私たちの作った地面が衝突 (Z-fighting) しているからです。

良い具合に配置する

これを克服するために、 <babylon> 要素に extends 属性を入れ、それを minimal (最小限) に設定します。

<babylon extends="minimal" model="モデルのパス"></babylon>

これにより、デフォルトの地面が削除されています。
同時に、左下と右下の Babylon.js リンクやフルスクリーンアイコンも消えます。

デモサイト「minimal Viewer を使用した村」

https://doc.babylonjs.com/webpages/page3

🎥 カメラの位置の改善

デフォルトの Viewer はモデルの範囲を計算し、それに応じてカメラを計算しています。
extends="minimal" を指定したことで、カメラは村モデルの中心に寄ることになったのです。

カメラを近づけたい場合は、コードを追加する必要があります。

カメラを動かすには、その radius (半径) プロパティを調整する必要があります。

また、これは、モデルがロードされる前に完了している必要があります。モデルが Viewer にロードされると、プロパティを変更することはできません。

カメラの radius (半径) を変更する前にモデルが読み込まれないよう、<babylon> 要素から model 属性を削除する必要があります。

また、<babylon> 要素には、スクリプト (カメラのプロパティを変更する JS スクリプト。これから書く) から参照する ID も指定する必要があります。

<babylon id="myViewer" extends="minimal"></babylon>

次のコードがカメラの radius (半径) を (良い感じの伏角アングルに) セットしてから モデルをロードするものとなります。

<script>
    BabylonViewer.viewerManager.getViewerPromiseById('myViewer').then((viewer) => {
        viewer.onSceneInitObservable.add(() => {
            viewer.sceneManager.camera.radius = 15; // カメラの半径をセット
            viewer.sceneManager.camera.beta = Math.PI / 2.2; // 伏角
        });
        viewer.onEngineInitObservable.add((scene) => {
            viewer.loadModel({
                url: "モデルのパス"
            });
        });
    });
</script>

デモサイト「カメラを調節した村」

https://doc.babylonjs.com/webpages/page4.html

デモサイトのソースコード
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Viewer 1 Example</title>
    <!-- ビューアライブラリを読み込み -->
    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <script>
        BabylonViewer.viewerManager.getViewerPromiseById('myViewer').then((viewer) => {    
            viewer.onSceneInitObservable.add(() => {
                viewer.sceneManager.camera.radius = 15; //set camera radius
                viewer.sceneManager.camera.beta = Math.PI / 2.2; //angle of depression 
            });
            viewer.onEngineInitObservable.add((scene) => {
                viewer.loadModel({
                    url: "https://assets.babylonjs.com/meshes/village.glb"
                });
            });
        });
    </script>
    <!-- stylesheet は省略 -->
</head>
<body>
    <div id = "header">
        Viewer News
    </div>
    <div class= "cell babylon">
        <babylon id = "myViewer" extends = "minimal"></babylon>
    </div>
    <div class = "cell">
        Lorem ipsum dolor sit amet,サンプルテキスト
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,サンプルテキスト
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,サンプルテキスト
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,サンプルテキスト
    </div>
    <div class= "cell">
        Lorem ipsum dolor sit amet,サンプルテキスト
    </div>
</body>

🚴‍♀️ 次は? - Web アプリのレイアウト

Web ゲームやアプリを開発しているときは、おそらく Viewer が提供できる以上の柔軟性が必要です。HTML テンプレートの使用をもう一度見てみましょう。