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

有人解释为什么下面的交互立方体不能在视网膜显示Mac上工作吗

该代码适用于非视网膜macbook的Firefox、Safari和Chrome，但不适用于带有视网膜显示屏的macs

Macs:MacBookPro视网膜显示器、imac视网膜显示器、macbook pro 2011（无视网膜显示器）均运行优胜美地

浏览器版本：Firefox 36、Safari 8.0.3版（10600.3.18）、Chrome 40.0.2214.115版（64位）

在

渲染器中。渲染器的
doElement
或画布的setSize（）

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是否有效？如果是这样，我想这是一个设备像素比问题。演示在旧mac上工作。我链接的演示在带有视网膜显示器的mac上工作吗？您好WestLangley，我为延迟道歉，是的，您的演示在视网膜显示器mac上也工作得很好。请注意，出于某种原因，clientWidth/Height会触发。一种可选方法是缓存宽度和高度，并且仅在调整大小/滚动时更新（
getBoundingClientRect（）
也可以与元素一起使用，但这也会导致回流：-/）。