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;
}
 

效果如下：