three.js加载多个对象的异步问题

时间:2014-09-20 04:39:10

标签: javascript jquery asynchronous three.js

我正在同时加载多个模型到一个场景,但它无法加载所有模型,它只在场景中加载一个模型

例如,我正在建筑场景中有多个对象,如椅子,玩具等等,而加载这些对象时,只有一个对象正在加载,但不知何故,如果我在功能结束时发出警报全部模型正在加载

Example 1 what am getting now

Example 2 what i want

Image1现在得到什么,Image2实际上我想要什么

我的代码如下

function load_file(floor_number,x,y,z,width,height,rotation,angle,file)
{       
obj_x=x;
obj_y=y;
obj_z=z;
obj_width=width;
obj_height=height;
obj_rotation=rotation;
var object_material = new THREE.MeshBasicMaterial({                 
          color: 0xd6d6d6,  
          traansparent : true,
          opacity   : -2.5,
          side: THREE.DoubleSide            
      });       
var   loader = new THREE.JSONLoader();      
loader.load("uploads/accessories/3d/code/3dfile_"+file+".js",
          function(geometry, object_material) 
          {

              var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(object_material));
              console.log(object);
              model = new THREE.Object3D();

              model.add(object);    
              model.position.set(obj_x,obj_y,obj_z);        
              model.scale.set(obj_width,obj_height,obj_rotation);   
              model.opacity =2;
              model.rotation.y = 600; 
              model.duration = 12000;
              model.mirroredLoop = true;
              model.castShadow = true;
              model.receiveShadow = true;
              scene.add(model);                         
          }
      );        

     // alert('hi'); if i remove this comment second model is loading perfectly
return true;                    
}

还尝试使用Object3D.getObjectById()通过id加载对象,这也是失败的 我知道这是关于异步问题,但是我无法接受这个,对此有何帮助?

2 个答案:

答案 0 :(得分:1)

似乎你的问题是渲染器在模型添加到场景后没有触发。尝试在回调函数中添加到场景中的模型后调用它:

scene.add(model); 
renderer.render(scene, camera);

答案 1 :(得分:1)

问题是全局性。

这里有一篇关于Why is Global State so Evil?的精彩内容。

<强>更新

我使用类似于你的代码玩了一下,我现在看到它看起来有什么问题,但事实并非如此,你可以使用这样的方法:

/* object declaration and initialization on load completed */
var model1;
load_file('object1', function(model) {
   model1 = model;
   model1.position.x = -2;
});
... 
function laad_file(file, on_load_complete) {
   ...
   loader.load("http://localhost/"+file+".js",  function(geometry, object_material)  {
      ...
      scene.add(model);
      /* call the callback to initialize your object */
      if (on_load_complete !== undefined)
         on_load_complete(model);
   });
   ...
}

render() {
   ...
   if (model1 !== undefined) 
      model1.rotation.x += 0.1;
   ...
}