📘

THREE.OrthographicCameraのリサイズ時のaspect設定

2024/03/04に公開

PerspectiveCameraにはaspectがあるため、リサイズ処理は以下のようになる

function resize() {
  const width = window.innerWidth; // またはcanvas.width
  const height = window.innerHeight; // またはcanvas.height
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
}

OrthographicCameraにはaspectがない。そのため以下のようになる

function resize() {
  const width = window.innerWidth; // またはcanvas.width
  const height = window.innerHeight; // またはcanvas.height
  camera.left = width / -2;
  camera.right = width / 2;
  camera.top = height / 2;
  camera.bottom = height / -2;
  camera.updateProjectionMatrix();

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
}

参考:How set aspect ratio for orthographic camera

参考コード: https://github.com/mrdoob/three.js/blob/1a241ef10048770d56e06d6cd6a64c76cc720f95/examples/webgl_interactive_cubes_ortho.html#L98

Discussion