Three.js導入gltf模型和動畫

核心代碼

複雜的3D模型通常都是用第三方建模工具生成，而後加載到three中

three官方推薦使用gltf格式的文件，表明編輯器是blender

本文生成了自定義生成了一個blender模型，而且應用了動畫效果，核心代碼以下

var mixers = [];
var clock = new THREE.Clock();
(function(){
    var loader = new THREE.GLTFLoader();
    loader.load( './static/models/2.gltf', function( gltf ) {
        console.log(gltf);

        var axesHelper = new THREE.AxesHelper( 5 );
        scene.add( axesHelper );

        scene.add( gltf.scene ); // 將模型引入three


        // 調用動畫
        var mixer = new THREE.AnimationMixer( gltf.scene.children[2] ); 
        mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
        mixers.push( mixer );
    })
})();

var time;
var animate = function () {
    requestAnimationFrame(animate);

    var delta = clock.getDelta();
    for ( var i = 0; i < mixers.length; i ++ ) { // 重複播放動畫
        mixers[ i ].update( delta );
    }

    stats.begin();
    renderer.render( scene, camera );
    stats.end();
};
animate();