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

Question

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

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

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

Mac:macbook pro retina display,imac retina display,macbook pro 2011 (no retina display) all running Yosemite

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

Answer 1

在 renderer.setSize() 中，渲染器的 domElement 或 Canvas 按像素比例缩放。

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

然后，在 interactive cubes example ，标准化的鼠标坐标设置如下:

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

这会导致像素比不等于 1 的设备出现问题。

请注意，在 interactive particles example 中，归一化的鼠标坐标计算方式不同，没有问题。

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