添加3d动画到threejs并显示在mapbox上

说实在的不知道为啥threejs的内容出到了第3期。写出来防止大家踩坑。
threejs可以添加我们所需要的3d动画，因为单纯的靠threejs本身的对象并不能真正满足我们的动画需求。所以threejs提供了许多的加载器来加载到threejs图层上。方法都大同小异，只要掌握好一种差不多就都能掌握了。废话不多说我们来看如何加载各种类型的文件：
1、FBX
fbx最大的用途是用在诸如在max、maya、softimage等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥max和maya等软件的优势。可以说，fbx方案是最好的互导方案。所以先来看下FBX导入的办法。

 <!--FBX加载器-->
    <script src="js/FBXLoader.js"></script>
    <script src="js/inflate.min.js"></script>

这里我们需要添加2个fbx所需要的js文件其中。这些在threejs源码里面都有。
之后我们添加THREE的FBX加载器。

var loader3 = new THREE.FBXLoader();//新建THREE的FBX加载器
        //加载对象模型，是异步加载的，参数是模型的地址，回调函数，家在进度以错误处理，前两个是必须的
        loader3.load("fbx/Samba Dancing.fbx",function(object){//产生回调函数返回模型对象
            object.mixer = new THREE.AnimationMixer(object);//添加该对象的动画混合器
            mixers3.push(object.mixer);//把动画添加到数组中
            object.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));//选装模型，因为mapbox坐标系与threejs坐标系不同
            var action = object.mixer.clipAction(object.animations[0]);//获取对象的第一个动画
            action.play();//启动动画
            AddThreejs.addAtCoordinate(id,"9",object,"Samba",origin3);//把对象加到我们的mapbox地图上
        });

上述代码中AnimationMixer是场景中特定对象的动画播放器，当场景中有多个对象独立播放动画，那么每个对象对应一个动画播放器。其中参数是该对象。

并且由于之前文章提到过mapbox的坐标是地理坐标系，而threejs的是xzy坐标系（左手坐标系），所以我们添加到地图上时需要将模型进行旋转，参数是一个欧拉角度（Euler）其参数是（x,y,z,order）分别是x，y，z轴角度（单位为弧度），然后是一个用来表示旋转顺序的字符串，默认为“XYZ”（必须是大写）。最后mixer.clipAction返回一个可以控制动画的AnimationAction对象，参数需要一个AnimationClip对象，最后启动我们的动画。
在threejs动画帧渲染中加入我们的动画

if ( mixers3.length > 0 ) {

                            for ( var i = 0; i < mixers3.length; i ++ ) {

                                mixers3[ i ].update( AddThreejs.clock.getDelta());

                            }

                        }

2、MMD
我们来试着添加V家的3d模型，添加所需的js文件

<!--MMD加载器-->
    <script src="js/mmdparser.min.js"></script>
    <script src="js/ammo.js"></script>
    <script src="js/MMDLoader.js"></script>
    <script src="js/MMDAnimationHelper.js"></script>
    <script src="js/CCDIKSolver.js"></script>
    <script src="js/MMDPhysics.js"></script>

添加好头文件后，我们来添加加载的代码

/////////////////////MMD
        var MMDAnimationHelper = new THREE.MMDAnimationHelper({afterglow: 2.0});//添加MMD动画管理器
        var ikHelper,physicsHelper;//骨骼辅助以及物理辅助
        var modelFile = 'mmd/miku/miku_v2.pmd';//添加mmd模型
        var vmdFiles = [ 'mmd/vmds/wavefile_v2.vmd' ];//模型动作文件
        var loader4 = new THREE.MMDLoader();//添加mmd加载器
        loader4.loadWithAnimation(modelFile, vmdFiles, function ( mmd ){//加载模型和动作
           var meshmiku = mmd.mesh;//获取mmd的Mesh对象
           meshmiku.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));
           meshmiku.scale.set(10,10,10);//设置尺寸
           AddThreejs.addAtCoordinate(id,"10",meshmiku,"miku",origin3);//把他添加到mapbox地图上0
           MMDAnimationHelper.add(meshmiku,{//把对象以及动作传到动画管理器中
               animation:mmd.animation,//添加mmd动画
               physics:true,//打开物理
           });
            //骨骼辅助显示
            ikHelper = MMDAnimationHelper.objects.get( meshmiku ).ikSolver.createHelper();
            ikHelper.visible = false;//不显示
            AddThreejs.addAtCoordinate(id,"11",ikHelper,null,origin3);//添加到地图
            //物理刚体辅助显示
            physicsHelper = MMDAnimationHelper.objects.get( meshmiku ).physics.createHelper();
            physicsHelper.visible = false;//不显示
            AddThreejs.addAtCoordinate(id,"12",physicsHelper,null,origin3);//添加到地图
        });

之后添加我们的动画

                        MMDAnimationHelper.update(AddThreejs.clock.getDelta());

3、GLTF
GLTF是图形语言交换格式。它是一种3D内容的格式标准。
首先先加载我们的js文件。

<!--GLTF加载器-->
    <script src="js/GLTFLoader.js"></script>

接着添加模型以及动画

var loader = new THREE.GLTFLoader();//GLTF加载器
        loader.load("gltf/Horse.glb",function (gltf){//添加模型，并暴露接口
            var meshHorse = gltf.scene.children[0];//获取其中对象，对象放在scene下面
            //meshHorse.position.set(100, 0, 100);

            meshHorse.scale.set(0.5,0.5,0.5);//设定尺寸
            meshHorse.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));//模型旋转
           // AddThreejs.scene.add(meshHorse);
            AddThreejs.addAtCoordinate(id,"6",meshHorse,"Horse",origin1);//添加对象到地图中
            mixer = new THREE.AnimationMixer(meshHorse);//添加动画管理器
            mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();//设置对象动作

        });

if ( mixer ) {

                            var time = Date.now();

                            mixer.update( ( time - prevTime ) * 0.001 );

                            prevTime = time;

                        }

4、Collada
COLLADA™ 是面向交互式 3D 应用程序的基于 XML 的数字资产交换方案，使 3D 创作应用程序可以自由地交换数字资产而不损失信息 - 使多种DCC和3D处理可以组合成强大的工具链管道。

<!--Collada加载器-->
    <script src="js/ColladaLoader.js"></script>

添加模型

 var loader5 = new THREE.ColladaLoader();//添加Collada加载器
        loader5.load("collada/stormtrooper/stormtrooper.dae", function ( collada ){//添加文件并获取回调函数逇返回值
            var meshavatar = collada.scene;//collada对象放在scene中

            meshavatar.rotation.copy(new THREE.Euler(0.2,0,0, "XZY"));//旋转对象
            meshavatar.scale.set(30,30,30);//设置尺寸
            meshavatar.traverse(function (node) {//获取其中对象
                if(node.isSkinnedMesh){
                    node.frustumCulled = false;
                }
            });

            mixer4 = new THREE.AnimationMixer(meshavatar);//动作管理器
            var action = mixer4.clipAction(collada.animations[0]);//设置动作
            action.play();
            AddThreejs.addAtCoordinate(id,"13",meshavatar,"stormtrooper",origin1);//添加对象
        });

最后设定动作时间

                        if ( mixer4 !== undefined ) {

                            mixer4.update(clock1.getDelta()  );

                        }

最后的效果图：

效果图

我们仔细品味代码可以发现，加载模型以及动画的代码都大同小异。
1、添加js头文件

2、添加模型以及动作
2.1添加XX加载器
2.2设定URL，从回调函数中回去模型
2.3设置动作管理器
2.4配置动作以及执行动作
2.5把模型加载到场景中

3、设定动作变化

写的不好之处，请多见谅