[PlayCanvas] 가로 조정 시 구성된 모델 등 숨겨진 것

플레이캔버스 콘텐츠를 만들 때 화면 크기와 AS 비율이 고정되면...
늘 그렇게 생각해요.
예를 들어, 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를 직접 사용하는 경우도 있지만 상황에 따라 사용하지 않는 경우도 있으니 사이즈의 크기에 주의해야 한다.