我将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概念保持一致。尽管如此,这就是我现在正在使用的。 top
,而应使用bottom
。 In 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
此属性的第一个常见用法:
他们那里也有一些例子,我希望它能解决您的问题。 :)