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

我将3D内容与Three.js与HTML和SVG内容相结合。 Three.js CSSLoader在3D世界中同步放置HTML和SVG内容的功能非常出色。如何同步Three.js和HTML/SVG坐标系（尤其是y轴）？

但SVG/HTML坐标系是'左撇子'，而Three.js坐标系是'右撇子'。这基本上意味着他们的y轴是相反的。在SVG/HTML中，当你沿着屏幕前进时，y/top会上升，Three.js使用更为标准的数学公约y。

我必须不断地从一个转换到另一个，这很容易出错。我知道我不是第一个遇到这个问题的人（例如，look here）。有人提出了一个通用的解决方案？下面是我的尝试：

不要在Object3D与.scale.y = -1一切。正如你可能会怀疑的那样，这真是一场灾难。它将所有内容都转化为内容，甚至不会尝试将相机放在那里。
尽一切在Object3D与.rotate.x = Math.PI。这是更有希望的，但z轴不再符合z-index的HTML概念。不过，这是我现在使用的。
在HTML中，请勿使用top，请使用bottom。 In SVG，在<g transform="translate(0, imageHeight)">内部做一个<g transform="scale(1, -1)">。不过，我觉得这会让开发人员感到困惑，并且必须始终保持最新状态，这又是一个负担。

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

2014-12-05 mhelvens

我认为解决方案是使用THREE.js约定为SVG/HTML创建一个世界坐标系。所以屏幕的中心（称为视口）是0,0,0。因此，SVG/HTML中的对象通过viewport.center（0,0,0）+ viewport.halfWidth进行转换。 – beiller 2014-12-16 15:36:58

@beiller：我不明白这是如何解决翻转的y轴问题，这是我的问题。： - /我错过了什么？ – mhelvens 2014-12-16 16:30:17

也许你是，或者它可能不适合你的情况。例如：你在世界坐标（2,0,0）处有一个CSS精灵。要绘制精灵，您可以使用以下公式：pos.x + viewportCenter.x + viewportHalfWidth.x - object.halfWidth.x。这意味着假设（0,0,0）视口和10x10精灵和800x600尺寸，您可以从窗口左侧的397px处绘制x。 – beiller 2014-12-16 20:30:55

我建议你使用SVG全局变换属性，如果你发布你的代码的例子，我可以编辑答案并在这里发布的例子，也许JSfiddle。

基本上你需要添加转换到你的SVG，在你的情况下改变y轴的方向，你可以做一个“scale（1，-1）”。

查看与在下面的链接例子W3文档： http://www.w3.org/TR/SVG/coords.html#SVGGlobalTransformAttribute

第一公共使用该属性的：

大多数ProjectedCRS具有由第二轴的正值表示正北方向相反，SVG有一个y坐标系系统。这就是为什么，为了遵循通常的方式来表示顶部为North的地图，建议这种类型的 ProjectedCRS使用'svg：transform'全局属性和 '比例尺（1， - 1）'的值如下面的第三个例子。

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

来源

2014-12-17 11:44:56 Jacobi

任何文字都会颠倒。 – 2014-12-17 12:11:33

这是我尝试过的事情（参见原始问题）。它有一些问题。而@RobertLongson是对的：事情会颠倒 - 不仅是文字，而且是我放入的每一个元素。尽管如此，恐怕这可能是罪恶的一小部分。也许如果有一种方法可以自动纠正这种情况，即本地缩小每个子元素？ – mhelvens 2014-12-17 19:11:14

嗨，是的，事实上，每一件事都会颠倒，我认为在你的第3号中你没有尝试过全球。我也查看了互联网，但没有找到任何其他方式来做你想做的事，不幸的是我认为现在还没有一个简单的解决方案，抱歉，看起来很好。 – Jacobi 2014-12-19 11:50:21

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

回答

相关问题