Question

我只是Three.js的初学者。我想将我的“模型”对象推到数组中。我认为我的代码应该没问题。
我有我的var nextobj = [];。

function Loadobj() {
    var mx = [-1500,1500] , my = [350,350] , mz = [-1000,-1000];
    var nextobj = []; //Keep Array Model

    for(var i = 0; i < 2; i++) { 
        var mtloader = new THREE.MTLLoader(); 
        mtloader.load('obj1/az-mp0076.mtl', function (materials) {
        materials.preload(); 
        var objloader = new THREE.OBJLoader();
        objloader.setMaterials( materials );
        objloader.load('obj1/az-mp0076.obj', function (object){ 
            model = object;
            model.position.set(mx[i],my[i],mz[i]);
            scen.add(model); 
            nextobj.push(model); 
            console.log(nextobj.length);  //This here my check data Object
            });
        });
    }
}

步骤1：
我循环显示<1个对象

https://i.stack.imgur.com/3ktGD.jpg

步骤2
我循环显示> 1个对象未显示但我的数据显示完整

https://i.stack.imgur.com/IIZVv.png

如何推送对象数组？非常感谢。
我不确定我的代码有什么问题。

Answer 1

尝试递归运行Loadobj或将其作为一个承诺。在for循环内，您有两个回调（用于加载材料和对象）。问题是循环执行时没有等待（回调的）每一项都被加载，而是同步运行。但是所有与材料/对象相关的方法加载都是异步的（它们具有回调，并且仅在回调函数内部具有加载结果）。要完全加载对象，您需要确保仅在（回调的）项已加载之后才操作加载方法的结果，并仅在先前完成Loadobj后才再次调用var mx = [-1500,1500] , my = [350,350] , mz = [-1000,-1000]; var nextobj = []; //Keep Array Model var numOfObjs = 1; var start = 0; function Loadobj() { if (Loadobj == numOfObjs) return; start++; var mtloader = new THREE.MTLLoader(); mtloader.load('obj1/az-mp0076.mtl', function (materials) { materials.preload(); var objloader = new THREE.OBJLoader(); objloader.setMaterials( materials ); objloader.load('obj1/az-mp0076.obj', function (object) { model = object; model.position.set(mx[start],my[start],mz[start]); scen.add(model); nextobj.push(model); console.log(nextobj.length); Loadobj(); }); }); }。
使用递归函数：

function Loadobj(obj) {
  return loadMaterials()
    .then(function(materials) {
      return loadObjs(materials, obj);
    })
    .catch(function(err) {
      console.log(err);
   });
}

function loadMaterials() {
  return new Promise(function(resolve, reject) {
    var mtloader = new THREE.MTLLoader(); 
    mtloader.load('obj1/az-mp0076.mtl', function (materials) {
      materials.preload(); 
      resolve(materials);
    });
  });  
}

function loadObjs(materials, obj) {
  return new Promise(function (resolve, reject) {
    var objloader = new THREE.OBJLoader();
    objloader.setMaterials( materials );
    objloader.load('obj1/az-mp0076.obj', function (object){ 
      var model = object;
      model.position.set(obj.mx, obj.my,obj.mz);
      // scene is available globally
      scene.add(model); 
      nextobj.push(model);
      resolve(model);
    });
  });
}

var objs = [
  {
    mx : -1500, 
    my: 350, 
    mz: -1000
  },
  {
    mx: 1500, 
    my: 350, 
    mz: -1000
  }
];

var nextobj = []; 

// use reduce to iterate over objs
objs.reduce(function(acc, obj) {
  return Loadobj(obj);
}, Promise.resolve());

另一种方法是使用Promise：

.woocommerce ul.products li.product a img,                         
.woocommerce-page ul.products li.product a img {
    width: initial;
    height: 400px;
    margin: auto !important;
}

我尝试数组OBJECT3D

1 个答案: