Three.js加载大量对象后白屏

Question

我正在从 JSON 个文件中加载大量（超过 4350 个）3D 对象。

    for (var y in game.fields) {
        for (var x in game.fields[y]) {
            switch (game.fields[y][x]) {
                case 'm':
                    Three.loadMountain(x, y)
                    break
                case 'h':
                    Three.loadHill(x, y)
                    break
            }
        }
    }

我可以看到屏幕上出现了物体，但在某个时刻一切都变白了。它可以是什么？我可以以某种方式调试它吗？控制台中没有消息，我使用的是 Chromium 浏览器。

方法：

this.loadMountain = function (x, y) {
    loader.load('/models/mountain.json', getGeomHandler('#808080', x * 4 - 216, y * 4 - 311, 1));
}
this.loadHill = function (x, y) {
    loader.load('/models/hill.json', getGeomHandler('#008000', x * 4 - 216, y * 4 - 311, 1));
}

Answer 1

解决方案：不要在循环中使用 loader.load。而是在回调函数内将网格添加到场景。

示例：

loader.load('/models/mountain.json', function(geometry){
    var material = new THREE.MeshLambertMaterial({color: '#808080'})
    for (var y in game.fields) {
        for (var x in game.fields[y]) {
            switch (game.fields[y][x]) {
                case 'm':
                    var mesh = new THREE.Mesh(geometry, material);
                    mesh.position.set(x, 0, y);
                    scene.add(mesh);
                 break
            }
        }
    }
});

Three.js加载大量对象后白屏

Three.js white screen after loading a lot of objects

javascript

chromium

three.js