https://ics.media/tutorial-three/renderer_resize/

最適なリサイズ処理

何ができる

• あらゆるディスプレイで綺麗に表示
• 異なるディスプレイでも全画面3D表示を行える
• ブラウザのサイズを変更しても表示を全画面のまま崩さない

手順

• HTMLのmetaタグでviewportの設定

<meta name="viewport" content="width=device-width, initial-scale=1"/>

スマートフォンの自動拡大縮小機能のブロック設定。デバイスの最適な幅で表示

width=device-width

初期状態で拡大縮小をしていない状態にする

initial-scale=1

• CSSで余計な挙動を抑制

body {
  margin: 0;
  overflow: hidden;
}

• resizeイベントを監視

index.js

	// 初期化
  onResize();
  // リサイズイベント発生時に実行
  window.addEventListener('resize', onResize); // 初期化時とリサイズ時に呼び出す

  function onResize() {
    //サイズ取得
    const width = window.innerWidth;
    const height = window.innerHeight;

    // レンダラーのサイズを調整する
    renderer.setPixelRatio(window.devicePixelRatio); // デスクトップでのメイン、サブディスプレイで異なる可能性があるのでsetPixelRatioで更新
    renderer.setSize(width, height); // リサイズ時の調整

    // カメラアスペクト比を正す
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }

TOP PAGE