2016-08-04 99 views
1

我正在使用以下loadmodel函數將json加載到html中。 (jsons從攪拌機出口)無法使用three.js加載多個JSON

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

我的問題是,我有一個以上的JSON加載,當我調用此函數爲每個JSON,只有第一個是越來越加載,有些則沒有。相同的代碼在我的朋友計算機上運行良好 - 所有jsons加載良好。

有什麼我失蹤?

+0

實際上改變的是爲了工作。將object1放置在底部工作。但仍然想知道爲什麼它不起作用,當object1在頂部 –

+0

我沒有看到任何渲染週期,你是否連續渲染場景?它可能是沒有加載對象的時間單個渲染和顛倒的順序給對象4或更多的時間... –

+0

我沒有連續渲染。我只渲染一次。 –

回答

0

作爲註釋之一,JSONLoader是異步的,因此確保渲染已經下載的內容的最佳方式是在您的onLoad method中下載JSON文件後觸發渲染。

其實我建議你只調用一次loadmodel來加載一個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); 
})(); 

剛剛從你的代碼快速ñ骯髒的例子:

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

    }); 
}