ThreeJS CSS3DRenderer / CSS动画问题
我在寻找一种在threeJS场景中显示纯文本( 2d或3d )的方法，并将一些css效果应用到这些场景中，我环顾了一下，偶然发现了这。可能是我想要的..。现在的问题是，当我将css (css动画库)类转换为html元素时，CSS3D对象的位置会被重新定位和翻转(无法解释原因)。
'http://jsfiddle.net/kd9Tc/4/'注意：-i认为这个代码示例很好地说明了我想要做的事情，在webGL场景中应用css文本效果(我需要所有的相机移动和推特)。我首先尝试了THREE.TextGeometry，但我希望文本使用英语以外的语言，并将字体适当地转换为不允许使用的字体( displayd‘？)。(在我所有的测试中)，除此之外，我已经使用css转换一段时间了，我对它们相当满意，使用它们对我来说要容易得多。总的来说，我使用threeJS的主要原因是相机的移动能力。我很高兴我使用了threeJS，因为它打开了许多其他特性的大门，但是，我不确定我是否在这里使用正确的工具:-？
谢谢
回答 1
Stack Overflow用户
发布于 2015-04-13 08:54:22
当您在ThreeJS‘CSS3DRenderer绘制的元素上应用CSS转换时，它会重写最初由渲染器本身设置的初始平移和旋转。
在查看您的小提琴，然后查看CSS3DRenderer in GitHub之后，我可以评估渲染器在绘制元素之前对元素的转换和旋转进行了一些操作，以显示您期望的是什么(相对于TheeJS处理其坐标的方式是否符合逻辑)。
为了在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);(我没有花时间纠正X轴的翻译，但你应该明白我说的是什么意思。)
解决这个问题的另一种方法是以某种方式扩展CSS3DRenderer，这样它就可以动态地纠正旋转转换，而不仅仅是在实例化时。
为什么渲染者要这么做？
我最好的猜测是，当渲染器被编码时，他们期望通过JavaScript而不是CSS应用转换。
如果您对CSS转换更满意，我会说，继续使用您正在使用的内容。另一方面，如果你觉得更冒险，我建议使用TweenJS与ThreeJS动画。他们在一起玩得很好。我使用他们在我的网站(链接在我的个人资料)。
P.S.
@KianP Kudos在你放的小提琴上。我可以坦率地说，您正在开发一些非常有趣的东西，并且您正在使用一组我不会想到在一起使用的工具(Animate.css和ThreeJS)，但是似乎运行得很好(考虑到您纠正了上面解释的位置)。
https://stackoverflow.com/questions/25067262
复制相似问题
腾讯云开发者
