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();
巴特西

Three.js导入gltf模型和动画

核心代码

最新文章

热门文章
