javascript - 1 个阵列中有许多网格的众多场景

Question

我正在为存储在包含 100 个网格的数组中的每个 json 对象创建一个网格，因此我想向场景中添加 100 个网格，并且我什至计划稍后添加。

如您所想，这在性能方面给我的项目带来了巨大的压力。所以，我想弄清楚如何将这个数组分成 10 个可管理的部分，并在每个场景中添加 10 个这样的 "Planet" 对象。所以会有 10 个场景，每个场景包含 10 个网格。

我不知道这是否可行，因为这是我在 three.js 上的第一个工作。我该怎么做？我的代码:

 var scene1 = new THREE.Scene();
 var scene2 = new THREE.Scene();
 var scene3 = new THREE.Scene();
 var scene4 = new THREE.Scene();
 var scene5 = new THREE.Scene();
 var scene6 = new THREE.Scene();
 var scene7 = new THREE.Scene();
 var scene8 = new THREE.Scene();
 var scene9 = new THREE.Scene();
 var scene10 = new THREE.Scene();

var data = [{
        "Planet": "1",
    }, {
        "Planet": "2",
    }, {
        "Planet": "3",
    }
    // this continues up until planet 100
];

//this adds 100 meshes to the scene
for (var i = 0; i < data.length; i++) {

    var loader = new THREE.TextureLoader();
    var material = new THREE.MeshPhongMaterial({ map: loader.load('image.jpg') });
    var geometry = new THREE.SphereGeometry(30, 50, 50);

    mesh = new THREE.Mesh(geometry, material);

    //random x and z positions so they don't spawn on same spot
    mesh.position.x = THREE.Math.randInt(-500, 500);
    mesh.position.z = THREE.Math.randInt(-500, 500);
    scene1.add(mesh);
}

编辑: 我很抱歉没有像我应该的那样清楚。主要目标实际上是具有切换 10 个场景的功能，并根据 data 数组在每个场景中看到 10 个“行星”。我编写了这段代码，以便由用户决定要渲染哪些场景，哪些不渲染。在一个场景中渲染和查看 100 个行星不仅性能很差，而且我的项目也不需要这样。

var userInput = 1; 
     if (userInput === 1) {
         renderer.render(scene1, camera);
     } else {
         renderer.render(eval('scene' + userInput), camera);
     }

Answer 1

要回答您的具体问题，您可能会先将场景存储在数组中:

// Setup scenes
var scenes = [];
for(var i=0;i<10;i++) {
    scenes.push( new THREE.Scene() );
}

然后根据您的计数器将网格分配给场景:

//this adds 100 meshes to the scene
for (var i = 0; i < data.length; i++) {
    ...
    var sceneIndex = Math.floor(i/10);
    var curScene = scenes[sceneIndex];
    curScene.add(mesh);
}

但我不确定您在提高性能方面的目标是什么。涉及的代码是否比您显示的更多？如果您仍计划同时渲染所有 10 个场景，这不会比渲染一个场景快多少。