对象加载在不同的位置每次我刷新页面- Three.js - OBJMTLloader

Objects load in different position each time I refresh the page - Three.js - OBJMTLloader

本文关键字:刷新 Three OBJMTLloader js 加载 位置 对象      更新时间:2023-09-26

我在场景中加载了一些对象:

var objectInfo = [
{"objURL":"3D/Barrel/barrel.obj", "mtlURL":"3D/Barrel/barrel.mtl","xPOS":0,"yPOS":-2,"zPOS":-260,"xROT":0,"yROT":0,"zROT":0,"scaleX":0.6,"scaleY":0.6,"scaleZ":0.6},
{"objURL":"3D/Sofa/sofa.obj", "mtlURL":"3D/Sofa/sofa.mtl","xPOS":0,"yPOS":0,"zPOS":0,"xROT":0,"yROT":4,"zROT":0,"scaleX":1,"scaleY":1,"scaleZ":1},
{"objURL":"3D/Lamp/lamp.obj", "mtlURL":"3D/Lamp/lamp.mtl","xPOS":210,"yPOS":-20,"zPOS":10,"xROT":0,"yROT":50,"zROT":0,"scaleX":1,"scaleY":1,"scaleZ":1},
];
for (var i = 0; i < objectInfo.length; i++) {
                      loader=new THREE.OBJMTLLoader();
                      loader.addEventListener('load', function (event) { //callback f. to load .obj and .mtl
                          obj = event.content;
                          var c=count(); //just an external counter because i is not defined in here
                          obj.position.set(objectInfo[c].xPOS,objectInfo[c].yPOS,objectInfo[c].zPOS);
                          obj.rotation.x=objectInfo[c].xROT;
                          obj.rotation.y=objectInfo[c].yROT; 
                          obj.rotation.z=objectInfo[c].zROT;
                          obj.scale.set(objectInfo[c].scaleX, objectInfo[c].scaleY, objectInfo[c].scaleZ);
                          scene.add(obj);
                          OBJS[c]=obj; 
                      });
                      loader.load(objectInfo[i].objURL,objectInfo[i].mtlURL);
 }

但是当我硬刷新页面(F5, Chrome)没有改变任何东西,对象是在不同的位置比以前。当我再次按下F5时,物体在原来的位置。这种情况一直在发生,物体的位置是随机的。

有什么问题吗?请回答,因为我在发帖前做了很多研究。

编辑:没有counter()的替代实现:(仍然不工作)

  for (var i = 0; i < objectInfo.length; i++) {
                      loader=new THREE.OBJMTLLoader();
                      loader.addEventListener('load', function (event) { //callbac f. to load .obj and .mtl
                          obj = event.content;                      
                          var objectInfo2=objectInfo.pop();
                          obj.position.set(objectInfo2.xPOS,objectInfo2.yPOS,objectInfo2.zPOS);
                          obj.rotation.x=objectInfo2.xROT;
                          obj.rotation.y=objectInfo2.yROT; 
                          obj.rotation.z=objectInfo2.zROT;
                          obj.scale.set(objectInfo2.scaleX, objectInfo2.scaleY, objectInfo2.scaleZ);
                          scene.add(obj);
                          // OBJS[c]=obj; 
                      });
                      loader.load(objectInfo[i].objURL,objectInfo[i].mtlURL);
    }

此外,不仅位置属性是随机改变的,而且缩放等

load事件将按随机顺序触发。

——编辑——

我认为这个问题与counter函数调用有关,因为它假设第一个调用来自第一个(在数组中)对象load事件回调。

OBJMTLLoader有load: function ( url, mtlurl, onLoad, onProgress, onError )

您可以传递具有正确索引的onLoad