ThreeJS CSS3DRenderer / CSS动画问题

Question

我正在寻找一种在threeJS场景中显示纯文本（2d或3d）的方法，并对它们应用一些css效果，我环顾了一会儿，我遇到了this。可能是我想要的...... 现在的问题是，当我将一个animate.css（熟知css动画库）类转换为html元素时，我的CSS3D对象的位置被重置和翻转（无法解释原因）

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

注意： -i认为这个代码示例很好地说明了我要做的事情，在webGL场景中应用css文本效果（我需要所有的摄像机移动和补间）。 我首先尝试了THREE.TextGeometry，但我希望文本使用英语以外的语言并正确地转换字体让我无处（在我的所有测试中显示＆＃39; ??????＆＃39;）除此之外，我现在已经使用css变换了一段时间，我对它们非常熟悉，并且使用它们对我来说更容易。 总的来说，我使用threeJS的主要原因是相机移动能力。 我很高兴我使用了三个JS，因为它打开了许多其他功能的大门，但是，我还不确定我在这里使用正确的工具： - ？

谢谢

Answer 1

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

在查看你的小提琴，然后在GitHub中查看CSS3DRenderer之后，我可以评估渲染器在绘制之前使用CSS转换和元素内部旋转来进行一些操作，以便显示你的内容。 d期望开箱即用（考虑到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制作动画。他们在一起玩得很好。我在我的网站上使用它们（链接在我的个人资料中）。

<强> P.S。

@KianP感谢你提出的小提琴。我可以诚实地说你正在研究一些非常有趣的东西，并且你正在使用一组我不会想到的工具（Animate.css和ThreeJS），但似乎工作得很好（Take）考虑到你纠正了如上所述的定位。）