[PlayCanvas]横へのリサイズ時に配置したモデルなどが隠れてしまう件について

PlayCanvasのコンテンツを作るときですが、画面サイズやアス比が固定されていれば…
と、常々考えてしまうことがあります。

例えば、PlayCanvasのロゴをドーンとでっかく見せるコンテンツ

縦へのリサイズはFill ModeをFill Windowにしているし、

縦へのリサイズ時はカメラがズームアウトしてくれるので
ちゃんとコンテンツが映りますね

では横はどうだろうかと…

あれま
コンテンツが隠れてしまいました。

意外とこの問題にぶつかる人は多い気がします。

これを解決するには以下のスクリプトをアクティブカメラに付与してあげます。

let ResizeCameraFov = pc.createScript('resizeCameraFov');

ResizeCameraFov.prototype.initialize = function() {
    let self = this;
    let onWindowResize = function () {
        self._checkAspectRatio();
    };
    window.addEventListener('resize', onWindowResize, false);
    self._checkAspectRatio();
};

ResizeCameraFov.prototype._checkAspectRatio = function () {
    let height = this.app.graphicsDevice.height;
    let width = this.app.graphicsDevice.width;

    this.entity.camera.horizontalFov = height > width;
};

これで横にリサイズしてもコンテンツが表示されました。

---

実はこれ、
PlayCanvasの新規プロジェクト作成時のテンプレートにある「Model Viewer Starter Kit」にある

orbit-camera.jsで使われています。

このorbit-camera.jsをこのまま使うことがありますが、状況に応じて使わないこともありますからリサイズは気をつけたいですね。