页面高级感之插入3D人物

如今，在页面上插入3D人物已经变得非常简单。

第一步，获取人物3D模型。现在已经不需要自己去建模了，网上很多免费的建模工具，例如 readyplayer，我们只要上传人物头像，就能在线生成 glb 格式的文件。

第二步，在页面上加载模型。如果用vue的话，简单场景推荐直接使用 troisjs，只用几行代码，就能实现3D模型的加载，不用之前那样，写一堆three.js的环境搭建周边工作。

第三步，让模型动起来。readyplayer 生成的 glb 文件，虽然没有animations，但是具有morph属性，能够让人物产生微动作 —— 例如微笑、张嘴等。我们只需要动态调整morph参数的值就能让模型不那么呆板。

这三步下来，可能连十分钟都不要，这在以前是难以想象的。

image.png