three.js javascript/raycasting代码与视网膜显示器mac不兼容

Question

有没有人解释为什么下面的交互式立方体不适用于视网膜显示器mac？

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

该代码适用于非视网膜macbook中的Firefox,Safari和Chrome,但在具有视网膜显示的mac中不起作用.

Macs:macbook pro视网膜显示器,imac视网膜显示器,macbook pro 2011(无视网膜显示器)全部运行Yosemite

浏览器版本:Firefox 36,Safari版本8.0.3(10600.3.18),Chrome版本40.0.2214.115(64位)

Answer 1

在renderer.setSize(),渲染器domElement或画布,按像素比例缩放.

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

然后,在交互式立方体示例中,标准化鼠标坐标设置如下:

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

这将导致像素比率不等于1的设备出现问题.

请注意,在交互式粒子示例中,标准化鼠标坐标的计算方式不同,并且没有问题.

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

作为解决方法,使用第二种模式.

我们可能不得不重新审视在未来版本的库中如何处理设备像素比率.

编辑:@mrdoob建议以下模式作为解决方案:

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

three.js r.70