如何在three.js中一次只加载一个模型？

Question

我正在开发一个将项目添加到 three.js 场景的程序，根据场景中已经存在的项目数量将它们定位在坐标上。目前，我遇到的问题是，当用户选择“高空工作”时，场景中会添加两个人。这是两个独立的函数调用，但是当场景结束时，两个人都在同一个坐标上。当用户点击添加多人并且不等待每个人加载时也会发生这种情况。

有没有办法强制我的加载函数等待第一个对象完成加载，以便一次只加载一个模型？

This mention of the LoadingManager 让我开始思考，并尝试通过将加载的文件数和总数保存为变量来使用它，然后在 while 循环中比较它们，但是，正如预期的那样，这只会减慢脚本的速度，以至于我的浏览器要我阻止它们。

// adds objects to the basket with the appropriate rotation
      function createObjectBasket(filePath, scale, position, name, type) {
        // Load in the object and add it to the scene.
        var loader = new THREE.ObjectLoader(manager);
        /*while (gl_itemsLoaded < gl_itemsTotal) {
          
        }*/
        loader.load( filePath, function(object, materials){
          
          // rotate
          object.rotation.x = - ((Math.PI / 2) - (Math.PI / 18));
          object.rotation.y = - (Math.PI - (Math.PI / 5));
          object.rotation.z = 0; //- (Math.PI / 120);
          
          // scale
          object.scale.set(scale, scale, scale);
          
          // translate
          object.position.set(position.x, position.y, position.z);
          
          // set name for easy access
          object.name = name;
          
          // add to scene
          scene.add(object);
          
          if (type == "basket") {
            // add to object array for easy access
            basketContents["basket"].push(object);
          }
          else if (type == "person") {
            // add to object array for easy access
            basketContents["people"].push(object);
          }
          else if (type == "tool") {
            // add to object array for easy access
            basketContents["tools"].push(object);
          }
          else if (type == "attachment") {
            // add to object array for easy access
            basketContents["attachments"].push(object);
          }
        });
      }

如果我遇到问题，则通过以下两行（间接）调用此代码：

objectAddRemove("person", "CWM_A");
objectAddRemove("person", "CWM_B");

然后执行这个调用 createObjectBasket 的函数：

      // add/remove objects to/from basket on click
      function objectAddRemove(type, objectName) {
        // if adding items
        if (addRemove == "add") {
          
          // determine if there is still room to add more objects
          var room = true;
          // can have <= 3 people total, so if there are 3, can't add more
          if ((type == "person") && basketContents["people"].length >= 3) {
            room = false;
            return;
          }
          // no current restrictions on tools
          /*else if ((type == "tool")) {
            
          }*/
          // can only have 1 of each attachment
          else if ((type == "attachment") && (object[objectName]["contentsCount"] > 0)) {
            room = false;
            return;
          }
          
          if (room == true) {
            // if it's a person
            if (type == "person") {
              // if it's a man
              if (objectName.indexOf("M") >= 0) {
                // add model
                createObjectBasket(("models/" + objectName + ".json"), 1.5, personCoordsMan[basketContents["people"].length + 1], objectName, "person");
              }
              // if it's a woman
              else {
                // add model
                createObjectBasket(("models/" + objectName + ".json"), 1.5, personCoordsWoman[basketContents["people"].length + 1], objectName, "person");
              }
            }
            // if it's a tool
            else if (type == "tool") {
              /*createObjectBasket(("models/" + objectName + ".json"), 1.5, toolCoords[basketContents["tools"].length + 1], objectName, "tool");*/
              createObjectBasket(("models/" + objectName + ".json"), 1.5, toolCoords, objectName, "tool");
            }
            // if it's an attachment
            else if (type == "attachment") {
              createObjectBasket(("models/" + objectName + ".json"), .04, attachmentCoords[objectName], objectName, "attachment");
            }

            // increase count
            object[objectName]["contentsCount"] += 1;
            console.log(objectName);

            $('#' + objectName).children('.status').children('.checkMark').show();
          }
        }
        
        // if removing items
        else if (addRemove == "remove") {
          
          // remove objects from arrays
          if (type == "person") {
            removeObjectArray("people", objectName);
            
            // if person is found (and removed), rearrange all people to accommodate
            if (itemFound == true) {
              for (i = 0; i < basketContents["people"].length; ++i) {
                if (basketContents["people"][i].name.indexOf("M") >= 0) {
                  basketContents["people"][i].position.set(personCoordsMan[i+1].x, personCoordsMan[i+1].y, personCoordsMan[i+1].z);
                }
                else {
                  basketContents["people"][i].position.set(personCoordsWoman[i+1].x, personCoordsWoman[i+1].y, personCoordsWoman[i+1].z);
                }
              }
            }
          }
          else if (type == "tool") {
            removeObjectArray("tools", objectName);
            
            // if tool is found (and removed), rearrange all tools to accommodate
            /*if (itemFound == true) {
              
            }*/
          }
          else if (type == "attachment") {
            removeObjectArray("attachments", objectName);
          }
          
          // if all objects of that id have been removed, hide remove x mark
          if (object[objectName]["contentsCount"] <= 0) {
            $('#' + objectName).children('.status').children('.xMark').hide();
          }
          
          // if, after removing, person/object count is now 0, no remaining items can be removed, so switch to add
          if ((steps[currentStep] == "people") && (basketContents["people"].length <= 0)) {
            addItems();
          }
          else if ((steps[currentStep] == "objects") && ((basketContents["tools"].length + basketContents["attachments"].length) <= 0)) {
            addItems();
          }
        }
        // if no remaining items can be removed on this page
        else {
          addItems();
        }
      }

objectAddRemove 也会在用户单击代表所需对象的图像时被调用，因此我需要一种方法来等待先前单击的模型加载（除了通过代码自动加载的模型之外）。

要测试/查看更多代码，您可以访问this link。选择“高空作业”、重量单位，然后跳至“添加操作员”。它将显示篮子里有两个人（选中），但篮子里只有一个人可见。如果你点击“删除项目”然后可见的人删除可见的人，隐藏的将显示。

非常感谢！！！

Answer 1

加载外部数据几乎总是异步进行，因此确保一个模型一个接一个地加载需要处理 onLoad 事件。

我不确定 LoadingManager 是否支持一个接一个地加载模型。

但是您可以自己实现一个简单的加载队列。类似的东西：

var myQueue = ['model1.dae', 'model2.dae'];

function loadFromQueue()
{
    if (myQueue.length == 0) return;

    // Takes the first name from array and remove it from the array
    var name = myQueue.shift(); 

    // Call the loader and provide an onLoad event handler
    loader.load(name, function(model){

         // Do what you need to do with the model,
         // usually it's scene.add(model) and some transformations.

         // Call the next item in the queue
         loadFromQueue();
    });
}

现在这是一个非常粗略的队列，有更好的方法可以做到这一点。但我用它来演示如何使用 onLoad 事件处理程序一个接一个地加载模型。

我认为您将遇到的下一个障碍将是如何将一些值传递给事件处理程序。那就回来吧！

Answer 2

感谢@Matey 的建议，我最终只是使用超时来防止对象彼此重叠显示。我希望避免这种情况，因为所需的时间可能因型号和环境而异，但这是唯一对点击有效的方法。加载队列还在加载模型，因为我已经冒着超时的风险，所以实现它比修复它更容易。

我使用the accepted answer here 为我的点击事件添加了超时，然后只为我添加的第二个人添加了超时：

objectAddRemove("person", "CWM_A");
// add second person on timeout so people don't appear on top of each other
setTimeout(function() {
  objectAddRemove("person", "CWM_B");
},

这是唯一一个自动添加对象需要一些延迟的地方，所以希望这样做。我只是有点担心它将如何在不同的机器上运行。

Answer 3

我实际上最终通过采用不同的方法解决了这个问题 - 我需要变量来跟踪对象，所以我根据变量值（快速设置）而不是数量来检查对象是否已加载three.js 对象（加载时间更长）。与使用超时相比，这在整个系统中效果更好，并且更可靠。