Question

我有一个 obj 模型，我正在通过THREE.LoadingManager加载一些纹理。当我打开带有清除缓存的页面时 - 我总是得到没有纹理的模型。按F5后我可以看到它们。我的代码如下所示：

var manager = new THREE.LoadingManager();    
var loader = new THREE.TextureLoader(manager);
var textures_loaded = 0;

var id;
for (id in materials) {
    loader.load('images/' + materials[id].unique_id + '.jpg', function(t) {
        t.magFilter = THREE.NearestFilter;
        t.minFilter = THREE.LinearMipMapLinearFilter;

        var re = /images\/(\d+)\.jpg/g;
        var result = re.exec(t.image.currentSrc);

        material = materials.filter(function(obj) {
            return obj.unique_id == result[1];
        }).shift();

        material.setTexture(t);
        textures_loaded += 1;

        if (textures_loaded == materials.length) {
            mainLoop();
        }
    });
}

var loader = new THREE.OBJLoader(manager);
loader.load('obj/' + model.model_name, function (object) {
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                var mesh = model.meshes.filter(function(mesh) {
                    return mesh.name == child.name;
                }).shift();

                child.material.map = mesh.material.texture;
                child.geometry.buffersNeedUpdate;
                child.geometry.uvsNeedUpdate;
            }
        });

        scene.add(object);
    }
);

我在加载所有纹理后才运行 mainLoop 。但有时模型加载速度更快。如何使用 THREE.LoadingManager ？来控制加载对象的顺序？如何在加载完所有内容后才能显示模型？

Answer 1

我会做这样的事情。有两个函数负责内联加载每组内容。在这种情况下，在材料加载完成之前，不会加载网格。

var manager = new THREE.LoadingManager();

var loader = new THREE.TextureLoader(manager);



 function loadMaterials(materials, callback){
   var textures_loaded = 0;
   for (var id in materials) {
       loader.load('images/' + materials[id].unique_id + '.jpg', function(t) {
           t.magFilter = THREE.NearestFilter;
           t.minFilter = THREE.LinearMipMapLinearFilter;

           var re = /images\/(\d+)\.jpg/g;
           var result = re.exec(t.image.currentSrc);

           material = materials.filter(function(obj) {
               return obj.unique_id == result[1];
           }).shift();

           material.setTexture(t);
           textures_loaded += 1;

           if (textures_loaded == materials.length) {
                callback("materialsLoaded");
               //mainLoop();
           }
       });
   }
 }


var loadedMeshes = [];

function loadMeshes(meshes, callback){
  var meshes_loaded = 0;
  for(var i in meshes){
     var loader = new THREE.OBJLoader(manager);
     loader.load('obj/' + model.model_name, function (object) {
       loadedMeshes.push(object);
       object.traverse(function(child) {
           if (child instanceof THREE.Mesh) {
               //you'll need to map to the right material.
               child.material.map = mesh.material.texture;
               child.geometry.buffersNeedUpdate;
               child.geometry.uvsNeedUpdate;
           }
       });
       if(loadedMeshes.length == meshes.length){
         callback("meshesLoaded");
       }
     };
   }
 }


var materials = ["material1", "material2"];
var meshes = ["mesh1.obj", "mesh2.obj"];

function onLoad(){
    for(var i in loadedMeshes){
      scene.add(loadedMeshes[i]);
    }
    mainLoop();
}

function init(){
  loadMaterials(materials, function(t){
    console.log(t);
    loadMeshes(meshes, function(t){
      console.log(t);
      onLoad(t);
    })
  })
}

Answer 2

也许只有在文档准备就绪时，您才可以尝试执行 mainLoop ，使用一些jQuery：

$('document').ready(function mainLoop(){});

＆＃34;在完全收到图像等所有资产后才会触发此事件＆＃34;

来自jQuery .ready event

three.js加载资源的顺序

2 个答案: