Three.js使用与踩坑(动画制作导出,Three.js加载模型与动画)

JavaScript021

Three.js使用与踩坑(动画制作导出,Three.js加载模型与动画),第1张

最近比较忙,公司有项目要求要搞WebAR,各种google后,得到结果是ARToolkit库加Three.js库,ARToolkit在这里就不说了,有兴趣的自己百度,或者 这里 了解一下,WEBAR已经有大牛实现了框架,可以看这里 AR.js. 这里我们重点了解Three.js。

Three.js可以加载json类型的模型文件与动画,Three.js提供的方案的是用Blender建模软件来导出json给Three.js加载。这里我尝试了加载json类型的文件,这里我参考了demo里的效果制作。结果也是正确的。但是在用自己模型在Blender导出json文件使用时就出现问题了,动画死活加载不出来。

具体分析问题后,觉得可能是资源的导出有问题,对比自己导出的json与demo给出的json,找到问题所在。看下图

刷新动画数据

看最后的效果:

微信小程序使用ThreeJs需要使用官方库 threejs-miniprogram ,API和原生ThreeJS基本一样,很好上手。喜欢数字孪生或者游戏的朋友,强烈推荐学习ThreeJs。该库入门简单,官方有很多优秀的demo可供参考,文档(包含中英文)也比较详细。有计划用ThreeJS做一个动物世界,模拟原始森林里各种各样的有趣的可爱的动物,包括它们声音和故事。有兴趣的或想加入这个计划的朋友可以在下面留言。

添加canvash画布,设置宽度100%,高度设置为屏幕高度减去状态栏高度和导航栏高度。

导入threejs,并创建threejs变量传入模型中,方便使用该变量。