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

2023-12-06  本文已影响0人  alue

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

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

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

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

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

image.png
上一篇下一篇

猜你喜欢

热点阅读