zoukankan      html  css  js  c++  java
  • 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();
    
    
    
    
    
  • 相关阅读:
    Linux下的邮件发送
    Linux下用户和raid练习题
    Linux centos7.5操作系统的安装
    Linux chattr文件锁
    Linux系统下root密码丢失解决方案
    周总结2
    课堂作业1
    开课博客
    阅读3
    作业8
  • 原文地址:https://www.cnblogs.com/ye-hcj/p/9819205.html
Copyright © 2011-2022 走看看