css - ThreeJS CSS3DRenderer/CSS 动画问题

Question

我正在寻找一种在 ThreeJS 场景中显示纯文本(2d 或 3d)的方法，并对它们应用一些 css 效果，我环顾四周，发现了 this 。可能是我想要的.. 现在的问题是，当我将 animate.css (众所周知的 css 动画库)类应用到 html 元素时，我的 CSS3D 对象的位置被重置并翻转(无法解释原因)

   'http://jsfiddle.net/kd9Tc/4/'

注意: -我认为这个代码示例很好地说明了我正在尝试做的事情，在 webGL 场景中应用 css 文本效果(我需要所有相机移动和补间)。 我首先尝试了 THREE.TextGeometry，但我希望文本采用英语以外的语言，并将字体正确转换为无处可去(在我的所有测试中显示“??????”)，除此之外，我还使用 css 转换已经有一段时间了，我对它们非常满意，并且使用它们对我来说要容易得多。 总的来说，我使用 ThreeJS 的主要原因是相机移动能力。 我很高兴我使用了 ThreeJS，因为它也打开了许多其他功能的大门，但是，我不确定我在这里使用了正确的工具:-？

谢谢

Answer 1

当您对 ThreeJS 的 CSS3DRenderer 绘制的元素应用 CSS 转换时，它会覆盖渲染器本身最初设置的初始平移和旋转。

在查看了您的 fiddle ，然后查看了 GitHub 中的 CSS3DRenderer 后，我可以评估渲染器在绘制元素之前对其中的 CSS 翻译和旋转进行了一些操作，以显示您所期望的内容开箱即用(相对于考虑到 TheeJS 处理坐标的方式的逻辑)。

Here are the specific lines which I'm referring to. (ThreeJS GitHub)

为了在 CSS3DRenderer 中有效应用 CSS 变换，请确保不覆盖平移和旋转变换。简而言之，将以下内容考虑为每个变换的相对原点:

translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg)

例如:

-webkit-transform: none;
transform: none;

会变成这样:

-webkit-transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);

Here's a modified version of your fiddle which now works somewhat as expected.

(我没有花时间纠正 X 轴平移，但您应该明白我所说的要点。)

解决此问题的另一种方法是以某种方式扩展 CSS3DRenderer，以便它即时纠正旋转变换，而不是仅在实例化时纠正。

渲染器为什么要这样做？

我最好的猜测是，当渲染器编码时，他们期望通过 JavaScript 而不是 CSS 应用转换。

如果您确实对 CSS 转换更满意，我会说直接使用您正在使用的内容。另一方面，如果您想更具冒险精神，我建议您使用 TweenJS 和 ThreeJS 来制作动画。他们在一起玩得很好。我在我的网站上使用它们(我的个人资料上的链接)。

附注

@KianP 对你提出的 fiddle 表示赞赏。我可以诚实地说，您正在研究一些非常有趣的东西，并且您正在使用一组我不会想到一起使用的工具(Animate.css 和 ThreeJS)，但似乎工作得很好(考虑到您的正确性)定位如上所述)。