核心代码
复杂的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模型和动画
原文地址:https://www.cnblogs.com/ye-hcj/p/9819205.html