Three.js使用与踩坑（动画制作导出，Three.js加载模型与动画）

JavaScript022

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变量传入模型中，方便使用该变量。