三.js加载大量物体后白屏

Three.js white screen after loading a lot of objects

本文关键字：白屏 js 加载      更新时间：2023-09-26

我正在从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
            }
        }
    }

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

方法：

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));
}

解决方案：不要在循环中使用 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
            }
        }
    }
});
相关文章：