Resize canvas with different aspect ratio

Questions
7

This is how I fixed it (the height was incorrect maybe because it was getting inquired before it changed)

const canvas = document.getElementById("three");
function getWidth() {
  return parseInt(window.getComputedStyle(canvas).width);
}

function getHeight() {
  return parseInt(window.getComputedStyle(canvas).height);
}
//? core
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
  //? set the renderer's background to be transparent
  alpha: true,
});

const camera = new THREE.PerspectiveCamera(75, getWidth() / getHeight(), 0.1, 1000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

addEventListener("resize",() => {
    camera.aspect = getWidth() / getHeight();
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
},false);

I ran into another issue though, the camera doesn’t fit the whole object now.

1 Like