Resing ThreeJS canvas changes devicePixelRatio distorts overlayed html content

Questions
, ,
1

Hi everyone,
I’ve followed this tutorial for configuring a responsive ThreeJS canvas but now that I’ve added an html menu in front of it the resizing of the display for mobile purposes is actually disturbing the visualization of the html content itself. The resizing of the pixels is done but not for the object external to the ThreeJS canvas.

Here you can find the published webpage, you need to navigate as mobile and click the middle of the object to see the issue.

I’m sure it’s something in the Resize function but it’s not clear to me, as the resize is evoked, how I could compensate the whole…
Here the code:

function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;

const pixelRatio = window.devicePixelRatio;
const width  = canvas.clientWidth  * pixelRatio | 0;
const height = canvas.clientHeight * pixelRatio | 0;
const needResize = canvas.width !== width || canvas.height !== height;

if (needResize) {
  renderer.setPixelRatio( 0.7 );
  renderer.setSize(width, height, false);
}
return needResize;

}

function render(time) {

if (resizeRendererToDisplaySize(renderer)) {
  const canvas = renderer.domElement;
  camera.aspect = canvas.clientWidth / canvas.clientHeight;
  camera.updateProjectionMatrix();
}

...

renderer.render(scene, camera);
requestAnimationFrame(render);

}

Any suggestions?

Thanks in advance!

2 
const width = canvas.clientWidth  * pixelRatio | 0; 
[...]
renderer.setPixelRatio( 0.7 );

Consider not using pixelRatio at all in size calculations - you are creating a bit of an awkward complexity right now (with no actual gain.)

const width  = canvas.clientWidth;
const height = canvas.clientHeight;
const pixelRatio = 0.7;

renderer.setPixelRatio(pixelRatio);
renderer.setSize(width, height);
3

HI Mjurczyk!
I’ve got rid of that part as it wasn’t any necessary but this didn’t actually solved the issue with the DOM resizing.
But I’ve randomly noticed that I haven’t set the viewport to initial scale in the <head> as I did in another project.

Adding this string to the head of my page html page solved the issue with scaling in mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

All good!