码迷,mamicode.com
首页 > Web开发 > 详细

Three.js导入gltf模型和动画

时间:2018-10-19 22:45:11      阅读:2424      评论:0      收藏:0      [点我收藏+]

标签:clock   render   shel   children   自定义   camera   应用   []   fun   

核心代码

复杂的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模型和动画

标签:clock   render   shel   children   自定义   camera   应用   []   fun   

原文地址:https://www.cnblogs.com/ye-hcj/p/9819205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!