补偿浏览器缩放Three.js CSSRenderer

Question

我正在使用CSSRenderer处理three.js中的项目，并且我被告知我需要在浏览器的缩放不是100％时正确显示它。从我可以告诉：

• 有没有办法强制浏览器返回到100％
• 有没有办法来检测一下缩放浏览器是（根据https://github.com/tombigel/detect-zoom）

我想也许如果我可以检测到变焦我可以做一个css放大到另一个方向来补偿，有点像在Vijey的帖子中提到的那样：Changing the browser zoom level

鉴于此，似乎不可能显示three.js场景适当地在非 - 100％缩放，我甚至无法显示警告，告诉用户应用程序将无法正常使用浏览器缩放比例。有人可以证明我错了吗？有谁知道是否有任何事情可以解决这个问题？

Answer 1

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

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

解决方案是独立应用转换，使用旋转，平移和缩放转换。这种方法避免了Chrome的bug，并且按照expected（框之间的边界在缩放级别之间是一致的）进行缩放。

这里是一个更新的CSSRenderer，它使用这种技术并正确扩展。