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

最近比较忙，公司有项目要求要搞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