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

Posted 2023-02-27

【中文标题】three.js javascript/raycasting 代码与视网膜显示 mac 不兼容

【英文标题】：three.js javascript/raycasting code not compatible with retina display macs

【发布时间】：2015-05-03 12:08:40

【问题描述】：

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

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（无 Retina 显示器）都运行 Yosemite

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

【问题讨论】：

this three.js demo 有效吗？如果是这样，我认为这是设备像素比问题。

演示在旧 Mac 上运行。

我链接的演示是否可以在带有视网膜显示器的 Mac 上运行？

您好 WestLangley，我为延迟道歉，是的，您的演示在视网膜显示 mac 上也可以正常工作。

【参考方案1】：

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

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

【讨论】：

请注意，由于某种原因，clientWidth/Height 会触发reflows。一种可选方法是缓存宽度和高度，仅在调整大小/滚动时更新（getBoundingClientRect() 也可以与元素一起使用，但这也会导致回流：-/）。