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

Question

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

cubes.html

该代码在Firefox、Safari和Chrome的非视网膜macbook中工作，但在带有视网膜显示器的macs中不起作用。

Mac电脑: macbook视网膜显示器，imac视网膜显示器，macbook 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