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

但是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,而应使用bottomIn SVG,在<g transform="scale(1, -1)">内的<g transform="translate(0, imageHeight)">内执行所有操作。但是,我觉得这对于开发人员来说会更加令人困惑,并且imageHeight必须始终保持最新,这是另一个负担。

  • 有没有人想出更好的东西?也许图书馆可以提供帮助?

    最佳答案

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

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

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

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



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

    10-05 20:39
    查看更多