Javascript 1个阵列中包含多个网格的多个场景

我正在为每个json对象创建一个网格，该对象存储在一个包含100个网格的数组中，因此我想在场景中添加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);
}

---

要回答您的特定问题，您可能首先将场景存储在一个数组中：

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

//设置场景
var=[]；
对于（var i=0；我首先要知道，在您的代码中，您当前只设置了场景10。场景1-scene9当前未定义。谢谢，是的，我在起草此问题的代码时忽略了这一点。我已使用修复程序更新了我的原始问题，以避免以后出现混淆。我用更多信息更新了我的问题。我用我在编辑中提供的代码绕过了呈现问题，但根本没有。即使当userInput=1时，页面的加载时间也很糟糕。scene1只有10个行星。在浏览了我编辑的问题后，你的代码是否仍需要保持相同的外观？在看到你的编辑后，我发布的代码只会是代码质量的imp改进现有内容。没有任何性能提升。关于页面加载时间，请尝试将var loader/material/geometry移动到循环外部，看看这是否会缩短加载时间。在这个特定代码示例中，您只需要加载程序的一个实例，可能只需要纹理、材质和几何体的一个实例（尽管这可能会因您下一步的拍摄位置而有所变化。）不幸的是，将加载程序移出循环并不能提高加载时间，但现在我更担心的是如何让代码正常工作，因为我不知道如何实现它。我做了一个小动作->我正在为您简化代码。您能告诉我如何实现我在原始问题中描述的目标吗？我这段代码没有任何明显的性能或加载时间问题。所有内容似乎都是立即加载的，渲染速度也非常快。总之，这里有一个JSFIDLE，它包含了我提到的实现：嗯，看起来正是我想要的。谢谢！我玩了你发送的FIDLE，看看是否可以将特定网格添加到特定场景中，我很高兴看到这在eg
场景[4]中很容易实现。添加（mesh2）
。
// 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);
}