页面高级感之插入3D人物
2023-12-06 本文已影响0人
alue
如今,在页面上插入3D人物已经变得非常简单。
第一步,获取人物3D模型。现在已经不需要自己去建模了,网上很多免费的建模工具,例如 readyplayer,我们只要上传人物头像,就能在线生成 glb 格式的文件。
第二步,在页面上加载模型。如果用vue的话,简单场景推荐直接使用 troisjs,只用几行代码,就能实现3D模型的加载,不用之前那样,写一堆three.js的环境搭建周边工作。
第三步,让模型动起来。readyplayer 生成的 glb 文件,虽然没有animations,但是具有morph属性,能够让人物产生微动作 —— 例如微笑、张嘴等。我们只需要动态调整morph参数的值就能让模型不那么呆板。
这三步下来,可能连十分钟都不要,这在以前是难以想象的。
![](https://img.haomeiwen.com/i25380/14946229538ca9ab.png)