失败狮计划再现——threejs实现文字环绕动画

Posted 2023-02-26

参考技术A 说到环绕动画，18年初的时候我曾写过一版太阳系动画，当然，那时完全是慢慢调试坐标然后用css动画写上去的，后来有同事把这个太阳系动画使用threejs改写了，动画变得更加顺滑流畅了，那时我只是对three有个印象，没想到3年后我也有使用到它的一天。（然鹅也并没有真的派上用场）具体需求也很简单明了：文字围绕着中心的图片进行绕转，但是文字和一个球体的区别还是蛮大的。

先看我实现出来的效果：（本来想实现环球影城那种效果的，自行脑补universal系列电影的开头文字环绕地球，可惜学艺不精的我就只能搞出来这种僵硬的效果了）

效果虽一般，但是通过这个过程我对threejs的使用也算是入了点门了，再来看实现过程：

按照threejs中文网的说法，一共有五种创建文字的方法：
http://www.webgl3d.cn/threejs/docs/#manual/zh/introduction/Creating-text

其中第一种只是创建了一个说明性的文字定位到了图上，和three并无关系。第二种没找到相关的例子，我怀疑用第二种想让文字动起来还要用点别的操作。第三种不谈了。第四种和第五种是网上比较推崇的方法，搜到的示例也都是这两种居多，但是我试了一下第四种，生成文字需要一种json文件（有ttf文件转换的方法），而中文文件普遍大于20mb，在项目中使用也是three直接读取json，里面的内容应该是无法压缩了，不说生产环境，我在开发环境读取本地文件都要1秒多，这要是上线了应该10秒起步，而且这个页面还是网站的首页，所以直接pass，第五种方法同理，对中文的支持也不是很好。

到此看起来出路都被堵住了，不过老话说得好，山穷水尽疑无路，柳暗花明又一村。我在找资料时找到了一篇 文章 ，介绍了使用three的canvas2drenderer渲染将中文作为贴图显示，并做出的动态弹幕的效果，然后我在源码中并没有发现这个渲染器，正如这篇文章所说的canvas2drenderer已经被废弃了......不过既然是废弃了，应该是有替代品的，果然我发现了一个css2drenderer和css3drenderer。
（见 https://github.com/mrdoob/three.js/tree/dev/examples/jsm/renderers ）
之后最重点的部分来了：在three中文网的示例中我终于找到了一个 行星绕转 的例子，由此文字公转的公式我算是在这个例子的源码中找到了：x坐标做正弦改变，z坐标做余弦改变。因为行星绕转即使不需要自转用户也看不出太大的区别，但是文字不一样，文字是一个长方形，公转的同时还需要缓慢自转，公转一周之时自转也需要恰好一周。所以需要一个沿y轴的自转角度用来处理自转变化(通过2d渲染器无法实现自转，按照CSS2DRenderer的描述，唯一支持的变换是位移，可能旋转变化不属于位移？？)，最后我参考了几个3d渲染器的示例来实现自转变化（其实就是改变3d对象的rotation属性，2d对象没有找到这个属性）。

最后需要说明一下这个实现方法算是另辟蹊径吧，因为threejs本身是靠WEBGL作为渲染器的，而我使用的是CSS3DRenderer渲染器，正如官网所说： CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。......然而，这一渲染器也有一些十分重要的限制：1.它不可能使用three.js中的材质系统。2.同时也不可能使用几何体。 本质上我用的其实还是css3动画，只不过使用了three提供的一些api方便了实现过程罢了。

首先安装three什么的就不说了，先看引入方式

创建threejs基本的场景需要“三件套” 渲染器，照相机，场景对象。执行渲染器的render方法就能渲染出three的场景，如果周期改变属性再渲染就能实现动画了。

说明：

这个动画的结局当然是被产品经理否决了，最终在我建议下改成了文字块进行小范围平面上下移动——这也是在很多网站中能看到的效果。不过这么折腾了几天我也算对threejs有了一个初步的了解吧。这种东西对我来说很难通过所谓的爱好来驱动学习......另外，上一次在文章中提到失败狮这个词的时候我还是海军提督，没想到3年后的现在却成为魔法师了(～￣▽￣)～

three.js 用中文字作为贴图
three官网案例1
three官网案例2