three.js javascript/raycasting code not compatible with retina display macs

Question

Does anyone have an explanation as to why the interactive cubes below do not work on retina display macs?

http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

The code works in Firefox, Safari and Chrome in the non retina macbook, but does not work in the macs with a retina display.

Macs: macbook pro retina display,imac retina display, macbook pro 2011 (no retina display) all running Yosemite

Browser Versions: Firefox 36, Safari Version 8.0.3 (10600.3.18), Chrome Version 40.0.2214.115 (64-bit)

Answer 1

In renderer.setSize() , the renderer's domElement or canvas, is scaled by the pixel ratio.

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

Then, in the interactive cubes example , the normalized mouse coordinates are set like so:

mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

This will cause a problem with devices that have a pixel ratio not equal to 1.

Note that in the interactive particles example , the normalized mouse coordinates are computed differently, and there is no problem.

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

As a work-around, use the second pattern.

We may have to revisit how device pixel ratio is handled in future versions of the library.

EDIT: @mrdoob suggests the following pattern as a solution:

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

three.js r.70