2013-07-21 103 views
0

我想從JSON文件運行動畫。我正在使用自定義的JSON加載器(即不包含three.js)。 所以我有一個名爲frames的對象,其中包含許多幀,所有幀都有形狀信息,以及一個simulation_matrix,它包含以4by4變換矩陣(由python腳本生成)形式的動畫所需的數據。 所以我使用this動畫代碼.. 和this是一個示例JSON腳本來加載。無法在three.js中應用矩陣

// This method is for adding static shapes 
    // This works perfectly fine .. 
    parent.add_shape = function(frame) 
{ 
    var material = new THREE.MeshLambertMaterial({ 
     color:    frame.shape.color, 
     wireframe:   true, 
     wireframeLinewidth: 0.1, 
     opacity: 0.5 
     }) 

    var geometry = new THREE.CylinderGeometry(frame.shape.radius,frame.shape.radius,frame.shape.height,50,50); 
    // mesh_dict dictionary maps a mesh(shape) to its frame 
    parent.mesh_dict[frame] = new THREE.Mesh(geometry,material); 
    var init_orientation = frame.simulation_matrix[0]; 
    var orienter = new THREE.Matrix4(); 
    orienter.elements = []; 
    //Since simulation_matrix is generated from python, it is a 
    // list of lists, We need to push it to the elemens of Matrix4 manually .. 

    for(var i in init_orientation) 
     { 
      for(var j in init_orientation[i]) 
      { 
       orienter.elements.push(init_orientation[i][j]) ; 
      } 
      } 
    parent.mesh_dict[frame].applyMatrix(new THREE.Matrix4()); 
    parent.mesh_dict[frame].applyMatrix(orienter); 
    parent.scene.add(parent.mesh_dict[frame]); 
    parent.renderer.render(parent.scene,parent.camera); 
    }     
    // This method basically takes the meshes defined in add_shape, and 
    // applies simulation matrix to it, and requests animation frame for 
    // animation. 
    parent.animate = function() 
{ 

    for(var frame in JSONObj.frames) 
     { 
      // defining simulation_matrix in a var. 
      var matrix = JSONObj.frames[frame].simulation_matrix[parent.animation_counter]; 
      var animation_matrix = new THREE.Matrix4(); 
      animation_matrix.elements = []; 
      // pushing it to a Matrix4 
      for(var i in matrix) 
       { 
       for(var j in matrix[i]) 
       { 
        animation_matrix.elements.push(matrix[i][j]) ; 
       } 
       } 
     console.log(animation_matrix); 
     console.log(animation_matrix.elements); 
     // Making sure we are not applying matrix to the earlier transform 
     //mesh_dict is a dictionary of meshes, used in creating shapes,mapped to the 
     //frame which contains them  
     parent.mesh_dict[JSONObj.frames[frame]].applyMatrix(new THREE.Matrix4()); 

     // now applying transform, after setting to identity matrix ... 
     parent.mesh_dict[JSONObj.frames[frame]].applyMatrix(animation_matrix);     

     }  

    console.log(parent.animation_counter);  
    //update timestep ... 
    parent.animation_counter++; 
    // This is to loop over again and again ... 
    // assuming 10 animations frames 
    if(parent.animation_counter == 10){ parent.animation_counter = 0; } 

    requestAnimationFrame(parent.animate); 

} 

的問題是,我能夠創建多個形狀,但是當我申請模擬矩陣他們在循環中,其中只有一個是動畫,那太非常意外的方式。

+1

對不起,我無法爲你調試你的代碼,但似乎你不明白'Object3D.applyMatrix(matrix)'將現有的對象矩陣乘以新的對象矩陣。你應該調用'mesh.matrix.set()'。研究源代碼,以便了解該庫在做什麼。 – WestLangley

回答

0

那麼我已經找出了什麼是錯的。不知何故,所有字典的parent.mesh_dict []鍵被映射到一個單一的對象,而不是所有的對象。現在我調試了它,它像魅力一樣工作。另外你的觀點是有效的@WestLangley,因爲我現在使用mesh.matrix.identity()來完成任務。謝謝,我現在要解決這個問題。