three.jsを使用して複数のJSONをロードできません

Question

次のloadmodel関数を使用してjsonをhtmlにロードしています。

(function init(){ 

    console.log("Init") 
    loadmodel('object1'); 
    loadmodel('object2'); 
    loadmodel('object3'); 
    loadmodel('object4'); 

    requestAnimationFrame(rotate); 
})(); 

function loadmodel(str){ 


    var json = "{% static 'three/' %}" + str + '.json.gz'; 
    var loader = new THREE.JSONLoader(); 
    loader.load(json, function(geometry, materials){ 

      alfaromeo = new THREE.Mesh(
      geometry, new THREE.MeshFaceMaterial(materials) 
     ); 
    alfaromeo.name = str; 
    names.push(str); 
    scene.add(alfaromeo); 
    }); 
} 

（jsonsはブレンダーから輸出された）私の問題は、私はロードするために、複数のJSONを持っていると私はそれぞれのJSONのために、この関数を呼び出すとき、最初のものだけが読み込まなっていると、他の人ではないということです。私の友人のコンピュータでも同じコードがうまくいきます。すべてのjsonsがうまく読み込まれています。

紛失しているものはありますか？

Answer 1

JSONLoaderは非同期ですので、既にダウンロード済みのものをレンダリングする最良の方法は、onLoad methodでJSONファイルをダウンロードした後にレンダリングをトリガーすることです。

実際に私がお勧めするのは、loadmodelを呼び出して1つのJSONファイルをロードすることです。最初のダウンロードトリガーの後にもう一度新しいダウンロードが行われた後、最後のJSONファイルダウンロードがシーンレンダリングをトリガーします。あなたのコードから

(function init(){ 

console.log("Init") 
loadmodel('object1'); 
//this should be called when your last object has been added to the scene 
//requestAnimationFrame(rotate); 
})(); 

だけで簡単にnは汚い例：実際の順序を変更する

function loadmodel(str) 
{ 
    var json = "{% static 'three/' %}" + str + '.json.gz'; 
    var loader = new THREE.JSONLoader(); 
    loader.load(json, function(geometry, materials){ 

     alfaromeo = new THREE.Mesh(
     geometry, new THREE.MeshFaceMaterial(materials)); 

     alfaromeo.name = str; 
     names.push(str); 
     scene.add(alfaromeo); 

     // Add here proper logic to load next model... 
     if(str=="object1") 
      loadmodel("object2"); 
     else if()... 
     else 
     { 
      console.info("done with all downloads!"); 
      requestAnimationFrame(rotate); 
     } 

    }); 
}