📘
THREE.OrthographicCameraのリサイズ時のaspect設定
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);
}
Discussion