Question

我使用以下loadmodel函数将json加载到html中。（jsons从Blender出口）

(function init(){

    console.log("Init")
    loadmodel('object1');
    loadmodel('object2');
    loadmodel('object3');
    loadmodel('object4');

    requestAnimationFrame(rotate);
})();

function loadmodel(str){


    var json = "{% static 'three/' %}" + str + '.json.gz';
    var loader = new THREE.JSONLoader();
    loader.load(json, function(geometry, materials){

            alfaromeo = new THREE.Mesh(
            geometry, new THREE.MeshFaceMaterial(materials)
        );
    alfaromeo.name = str;
    names.push(str);
    scene.add(alfaromeo);
    });
}

我的问题是我有多个json要加载，当我为每个json调用这个函数时，只有第一个被加载而其他的没有。相同的代码在我的朋友计算机上运行良好 - 所有的jsons都很好。

我有什么遗漏的吗？

Answer 1

作为其中一条评论，JSONLoader是异步的，因此确保渲染已下载内容的最佳方法是在onLoad method下载JSON文件后触发渲染。

实际上我建议你只调用一次loadmodel来加载一个JSON文件，在第一次下载后再次触发新的下载，然后你的JSON文件的最后一个下载应该触发场景渲染。

(function init(){

console.log("Init")
loadmodel('object1');
//this should be called when your last object has been added to the scene
//requestAnimationFrame(rotate);
})();

只是代码中的一个简单例子：

function loadmodel(str)
{
     var json = "{% static 'three/' %}" + str + '.json.gz';
     var loader = new THREE.JSONLoader();
     loader.load(json, function(geometry, materials){

        alfaromeo = new THREE.Mesh(
        geometry, new THREE.MeshFaceMaterial(materials));

        alfaromeo.name = str;
        names.push(str);
        scene.add(alfaromeo);

        // Add here proper logic to load next model...
        if(str=="object1")
            loadmodel("object2");
        else if()...
        else
        { 
            console.info("done with all downloads!"); 
            requestAnimationFrame(rotate);
        }

    });
}

无法使用three.js加载多个JSON

1 个答案: