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

【问题标题】：Not able to load more than one JSON using three.js无法使用 three.js 加载多个 JSON
【发布时间】：2016-12-10 08:20:23
【问题描述】：

我正在使用以下 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 调用这个函数时，只有第一个被加载，其他的没有。相同的代码在我朋友的计算机上运行良好 - 所有 json 都加载良好。

我有什么遗漏吗？

【问题讨论】：

实际上更改订单有效。将 object1 放在底部有效。但仍然想知道为什么当 object1 在顶部时它不起作用
我没有看到任何渲染周期，您是否在持续渲染场景？可能是对象没有及时加载以进行单次渲染，并且颠倒顺序为对象 4 或其他东西提供了更多时间...
我没有连续渲染。我只渲染一次。
JSONLoader的加载是异步的，加载完成后要渲染....

标签： json three.js blender

【解决方案1】：

作为 cmets 之一，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);
        }

    });
}

【讨论】：