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 变换时，它会覆盖最初由渲染器本身设置的初始平移和旋转。

在查看了您的小提琴，然后查看了 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 对你提出的小提琴表示敬意。老实说，您正在研究一些非常有趣的东西，并且您正在使用一组我不会想到一起使用的工具（Animate.css 和 ThreeJS），但似乎工作得很好（考虑到您是正确的如上所述的定位）。