Threejs最新版本应用实例加载GLTF外部模型，同时加载动画

Threejs中有很多支持外部模型导入的库。在这里我将使用GLTF模型作为展示。
首先，先要引入官方给的引入库。

<script src="js/GLTFLoader.js"></script>

然后就是普普通通的搭建一个实验场地，一个控制器，方便观察

    var Scene,camera,renderer;
    init();
    initcamera();
    function  init() {
        Scene=new THREE.Scene();
        camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        renderer = new THREE.WebGLRenderer({alpha: true,antialias:true});
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
    }
    function initcamera() {
        camera.position.x=5;
        camera.position.y=5;
        camera.position.z=5;
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.autoRotate = true;
    }

接着实例化一个加载器，导入模型，同时开启动画。

    var mixer;
    function initEarth() {
        var loder=new THREE.GLTFLoader();
        loder.load("Model/Earth/Hologram.gltf",function (obj) {
            //获取模型，并添加到场景
            var model=obj.scene;
            Scene.add(model);
            //将模型绑定到动画混合器里面
            mixer = new THREE.AnimationMixer( model );
            //同时将这个外部模型的动画全部绑定到动画混合器里面
            for (var i=0;i<obj.animations.length;i++){
                mixer.clipAction(obj.animations[i]).play();
            }
        })
    }
    initEarth();

最后需要再方法里面刷新绑定好的动画

var clock = new THREE.Clock();
    var animate = function () {
        requestAnimationFrame( animate );
        var time = clock.getDelta();
        if (mixer) {
            mixer.update(time);
        }
        renderer.render( Scene, camera );
    };
    animate();