如何使用three.js实现中文字体显示并应用tween动画效果？

本文共计977个文字，预计阅读时间需要4分钟。

今天先生说一下如何在three中显示中文本体，然后结合tween实现文字位置的动画。

案例：点击chinese-font

1.生成中文本体

我们都使用过three.js的FontLoader加载typeface.json实现font的使用。

今天郭先生说一下如何在three中显示中文字体，然后结合tween实现文字位置的动画。线案例请点击chinese-font,

1. 生成中文字体

我们都使用过three.js的FontLoader加载typeface.json实现font的使用，但是很多案例都是英文字体，那么如何来生成中文字体呢？现在我们可以通过Facetype.js实现ttf向typeface.json的转换。 首先我们在网上下载ttf中文字体（或者在电脑的C:\Windows\Fonts直接复制一份中文的ttf字体），然后我们登陆Facetype.js网站，选中准备好的ttf文件，点击convert即可。得到的json文件就可以使用FontLoader加载了，其实还是挺简单的，中文ttf一般都比较大，所以在选择喜欢字体的同时，也要考虑好文件的大小。

2. tween操作文字动画

之前也说过tween动画，不过我觉得挺有意思的，我们就拿百家姓来作文字素材。

效果就是这样的，我们让tween实现从图一到图二到图三再到图一的动画，每个汉字除了位置的变化还有朝向（lookAt）的变化。这里的lookAt方法就是设置物体的朝向。好了开始上代码。