2021-09-10.md

publish_date
2021-09-10

• There is some standard boilerpate code to ensure the canvas used for three.js is reactive to screen sizes

// get height and width from the window object
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", (e) => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  //both the camera and renderer needs to notified and refreshed
  camera.updateProjectionMatrix();
  renderer.setSize(sizes.width, sizes.height);

  // importantly the aspect of also camera also needs to be udpated
  camera.aspect = sizes.width / sizes.height;

  // important for retina screen or an screens that have a pixel ration higher than 2. No need to accomdate for anything higher than 2
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});