Three.js匯入gltf模型和動畫
阿新 • • 發佈:2018-11-09
核心程式碼
複雜的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();