three.js javascript/raycasting代码与retina显示器Mac不兼容

Question

有人解释为什么下面的交互式多维数据集在视网膜显示Mac上不起作用吗？

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

该代码在非retina macbook中的Firefox、Safari和Chrome中有效，但在带有retina显示屏的macs中不起作用。

Mac电脑：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