3

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)

I Heart Beats
  • 133
  • 6

1 Answers1

5

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 1
    Just note that for some reason clientWidth/Height will trigger [reflows](https://gist.github.com/paulirish/5d52fb081b3570c81e3a). An optional approach is to cache the width and height and only update on resize/scroll (`getBoundingClientRect()` can also be used with the element, but also this causes reflow :-/ ). –  Dec 01 '17 at 14:54