最近比较忙，公司有项目要求要搞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,找到问题所在。看下图
image.png
这是在导出时错误设置，没导出有效动画。正确设置应该如下图
image.png
我在导出时把第二个选项也勾选了，加载一直出错。
重新导出资源后就正常了。加载的核心代码在这里。
//新建一个场景
var markerScene = new THREE.Scene()
smoothedRoot.add(markerScene)
mixer = new THREE.AnimationMixer( markerScene );//新建一个动画管理器
var loader = new THREE.JSONLoader();//加载导出的动画
loader.load( 'bear.js', function ( geometry, materials ) {
var material = materials[ 0 ];//设置材质
material.morphTargets = true;
var mesh = new THREE.Mesh( geometry, materials );//新建一个网格，加载模型数据
markerScene.add( mesh );//添加模型到场景
mixer.clipAction( geometry.animations[ 0 ], mesh )//添加动画到动画管理器
.setDuration( 1 )//设置动画间隔为每一秒
.play();//设置动画管理器状态（这里并没有播放。只是一个状态，播放我们需要去实时更新动画数据）
} );
刷新动画数据
//播放动画
onRenderFcts.push(function(delta){
if(mixer){
mixer.update(delta)//刷新动画渲染
}
})
看最后的效果：
x.gif
