【H5 3D应用开发】 Three.js 播放json模型动画并切换动画（一）

 

1、导入Js模型

var loader = new THREE.JSONLoader(true); //JSONLoader构造传入true，即showStatus=ture（显示加载进度） 
         loader.load("js/hero/Hero1.js",function(geometry){ 
                  mesh = newTHREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: 0xFFF7E0, ambient:0xFFF7E0,
                  vertexColors:THREE.VertexColors,morphTargets:true})); 
                  mesh.shading= THREE.SmoothShading;//平滑着色
             mesh.scale.set(0.8,0.8,0.8);//比例尺
             mesh.position.set(0,60,0); //位置
                 
                  scene.add(mesh );//添加模型
                  mixer = newTHREE.AnimationMixer( scene );
                  mixer.clipAction(geometry.animations[0], mesh )
                  .setDuration(5000 )               
                  .startAt( -Math.random() )
                  .play();//开始播放   animations[0]
                                                                     
                  MovingCube=mesh;               
 
         });

 

2、渲染动画

var delta = clock.getDelta(); // seconds.
    requestAnimationFrame(animate);
           if ( mixer ) { 
            THREE.AnimationHandler.update(delta);
       mixer.update(3500*delta);   //因为MorphAnimation类中this.duration=1000，即动画默认持续时间是1000毫秒，而delta是以秒为单位，所以乘以1000 
      } 
         render();    

      

 

3、有选择播放模型动画

 
var ActionPlay=0;//原先动作
//角色停止播放    停止动作 
function JStop(aa){
                   mixer.uncacheClip(MovingCube.geometry.animations[ActionPlay]);//要记住原先的动作序号注销 不然就叠加动作了
        mixer.clipAction(MovingCube.geometry.animations[aa], MovingCube )
                  .setDuration(5000 )
                  .play();
                  ActionPlay=aa;
}

 

效果如下：