javascript - 在 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() 函数应用转换。有一个 known issue使用 Chrome，使用 matrix3D 的 3d 转换在浏览器缩放下无法正确缩放。

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

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

这是更新的 CSSRenderer使用此技术并正确缩放。