2016-08-04 94 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); 
     } 

    }); 
}