补偿 Three.js CSSRenderer 中的浏览器缩放

Question

我正在使用 CSSRenderer 在 three.js 中开发一个项目，并且有人告诉我，当浏览器的缩放不是 100% 时，我需要让它正确显示。据我所知：

• 没有办法强制浏览器回到 100%
• 无法检测浏览器的缩放比例（根据https://github.com/tombigel/detect-zoom）

我想如果我能检测到缩放，我可以在另一个方向做一个 css 缩放来补偿，有点像 Vijey 的帖子中建议的那样：Changing the browser zoom level

鉴于此，在非 100% 缩放时似乎无法正确显示 three.js 场景，而且我什至无法显示警告，告诉用户应用程序在浏览器缩放缩放时无法正常工作。有人可以证明我错了吗？有谁知道是否有任何措施可以解决这个问题？

Answer 1

Three.js 使用 matrix3d() 函数应用转换。 Chrome 中有一个known issue，其中使用 matrix3D 的 3d 转换在浏览器缩放下无法正确缩放。

您可以查看错误here 的示例。如果您更改缩放级别，您会注意到红色和蓝色框之间的边界发生了变化。

解决方案是分别使用旋转、平移和缩放变换来应用变换。此方法避免了 Chrome 错误并缩放为expected（框之间的边界在缩放级别上是一致的）。

这是一个更新的CSSRenderer，它使用了这种技术并且可以正确缩放。