如何同步三.js和 HTML/SVG 坐标系(尤其是 y 轴）

How to synchronize the Three.js and HTML/SVG coordinate systems (especially w.r.t. the y-axis)?

本文关键字：坐标系 SVG 尤其是 HTML js 何同步 同步      更新时间：2023-09-26

我将3D内容与Three.js HTML和SVG内容相结合。Three.js CSSLoader 在同步 HTML 和 SVG 内容在 3D 世界中的位置方面做得很好。

但是SVG/HTML坐标系是"左撇子"的，而三.js坐标系是"右撇子"。这基本上意味着它们的 y 轴是相反的。在 SVG/HTML 中，y/top 随着屏幕向下移动而上升，而 Three.js 使用更标准的数学约定，即当您向下进入屏幕时y下降。

我必须不断地从一个转换到另一个，这很容易出错。我知道我不是第一个遇到这种情况的人(例如，看这里(。有人想出了一个通用的解决方案吗？这是我尝试过的：

  1. 用.scale.y = -1在Object3D做所有事情。正如您可能怀疑的那样，这被证明是一场灾难。它把所有东西都翻过来了，甚至不要试图把你的相机放在那里。

  2. 与.rotate.x = Math.PI一起在Object3D中做所有事情。这是更有希望的，但z轴不再与 z 索引的 HTML 概念一致。不过，这就是我现在正在使用的。

  3. 在HTML中，不要使用top，使用bottom。在 SVG 中，在<g transform="translate(0, imageHeight)">内执行<g transform="scale(1, -1)">内的所有操作。但是，我觉得这会让开发人员更加困惑，并且imageHeight必须始终保持最新状态，这是另一个负担。

有没有人想出更好的东西？也许有一个图书馆可以帮助解决这个问题？

我建议您使用 SVG 全局转换属性，如果您发布代码示例，我可以编辑答案并在此处发布示例，也许是 JSfiddle。

基本上你需要将变换添加到你的SVG中，在你的情况下，要改变y轴的方向，你可以做一个"scale(1，-1("。

请参阅以下链接中的示例的 W3 文档：http://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute

此属性的第一个常见用法：

大多数预测的CRS具有由正表示的北方方向 第二个轴的值，相反，SVG 具有 y 向下坐标 系统。这就是为什么，为了遵循通常的方式来表示 地图顶部为北方，推荐用于那种 ProjectedCRS 使用具有 "scale(1， -1("值，如下面的第三个示例所示。

他们在那里也有一些例子，我希望它能解决你的问题。 :)

相关文章：