如何同步Three.js和HTML/SVG坐标系(尤其是y轴)？

Question

我正在将3D内容与Three.js结合使用HTML和SVG内容.Three.js CSSLoader可以很好地同步3D世界中HTML和SVG内容的放置.

但是SVG/HTML坐标系是"左撇子",而Three.js坐标系是"右撇子".这基本上意味着它们的y轴是相反的.在SVG/HTML中,当你走到屏幕上时,y/ top会上升,而当你走下屏幕时,Three.js会使用更标准的数学惯例y.

我必须不断地从一个转换到另一个,这很容易出错.我知道我不是第一个碰到这个(例如,看这里).有人想出一个通用的解决方案吗？这是我试过的:

1. 做的一切Object3D有.scale.y = -1.正如您可能怀疑的那样,事实证明这是一场灾难.它将所有内容都由内到外,甚至不会尝试将相机放在那里.

2. 做的一切Object3D有.rotate.x = Math.PI.这更有希望,但z轴不再与z-index的HTML概念一致.不过,这就是我现在正在使用的.

3. 在HTML中,不要使用top,使用bottom.在SVG,做内部的一切<g transform="scale(1, -1)">内<g transform="translate(0, imageHeight)">.但是,我觉得这对开发人员来说会更加混乱,而且imageHeight必须始终保持最新状态,这是另一个负担.

有没有人想出更好的东西？也许是图书馆来帮助这个？

Answer 1

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

\n\n

基本上，您需要将转换添加到 SVG 中，在您的情况下，要更改 y 轴的方向，您可以执行“scale(1,-1)”。

\n\n

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

\n\n

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

\n\n

\n

大多数 ProjectedCRS 的北向由第二个轴的正\n 值表示，相反，SVG 具有 y 向下坐标系统。这就是为什么，为了遵循通常的方式来表示以北为顶部的地图，建议此类 ProjectedCRS 使用 \xe2\x80\x98svg:transform\xe2\ x80\x99 全局属性，具有\n \'scale(1, -1)\' 值，如下面的第三个示例所示。

\n

\n\n

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

\n