When using renderer.setSize()
, the renderer's domElement
or canvas is scaled according to the pixel ratio.
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
For example, in the interactive cubes demo, the normalized mouse coordinates are set as follows:
mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
This setup might encounter issues on devices with a non-unity pixel ratio.
It's worth noting that in the interactive particles demo, the normalized mouse coordinates are computed differently with no such problems.
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
To address this, opt for the latter approach for now.
We might need to reassess how device pixel ratio is managed in upcoming releases of the library.
EDIT: @mrdoob recommends the following method as a fix:
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
three.js r.70