幅いっぱい

WebGLの話をもっとしたいところではありますが、思いっきり自分のタスク優先で調べ物を進めていきます。なんかサイトのファーストビューに一発インパクトのある3D描画が欲しいという話が出てきたので、画面サイズに合わせた描画ができる必要がありそうです。もちろん、PCのウィンドウだったらリサイズされることも考えないと。なんかCSS Canvas Drawingsとかいって、backgroundにcanvasを設定できなかったっけ？って調べたら、もう過去の話になってましたね？

resize();
window.addEventListener('resize', resize);

function resize() {
  const width = window.innerWidth;
  const height = 600;
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}

前回やったようにレンダラーのサイズを設定する処理を再実行して、最後にカメラにupdateProjectionMatrixしてもらえばいいようです。透視変換行列の数値がカメラの縦横アスペクト比と共に変更されるので更新しろ、ってとこですかね。まだ難しいことにならない、Three.js、偉い！