Does anyone have an explanation as to why the interactive cubes below do not work on retina display macs?
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)
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;
©2020 All rights reserved.