Zahlreiche Szenen mit zahlreichen Meshes aus 1 Array

Question

Ich erstelle ein Mesh pro JSON-Objekt in einem Array mit 100 von ihnen gespeichert, also möchte ich 100 Meshes in die Szene hinzufügen, und ich habe Pläne, sogar hinzuzufügen dazu später.

Das belastet mein Projekt in puncto Leistung, wie Sie sich vorstellen können. Also versuche ich herauszufinden, wie man dieses Array in 10 überschaubaren Teilen schneidet und 10 dieser "Planet" Objekte pro Szene hinzufügen. Also würde es 10 Szenen mit jeder Szene mit 10 Meshes geben.

Ich habe keine Ahnung, ob das überhaupt machbar ist, da dies meine erste Arbeit an three.js ist. Wie gehe ich vor? Mein Code:

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

Edit: Ich entschuldige mich für nicht klar genug zu sein, wie ich hätte sein sollen. Das Hauptziel ist die Funktionalität, 10 Szenen zu wechseln und 10 "Planeten" in jeder Szene basierend auf dem data Array zu sehen. Ich habe diesen Code geschrieben, damit es dem Benutzer überlassen bleibt, welche Szene gerendert werden soll und welche nicht. Das Rendern und Sehen von 100 Planeten in einer Szene ist nicht nur für die Performance schrecklich, es ist nicht das, wonach mein Projekt aussehen muss.

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

Answer 1

Ihre Frage zu beantworten, würden Sie wahrscheinlich durch Speichern der Szenen in einem Array starten:

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

dann die Maschen zu einer Szene auf der Grundlage Ihrer Zähler zuweisen:

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

Aber ich bin mir nicht sicher, was Ihr Ziel hier in Bezug auf die Verbesserung der Leistung ist. Gibt es mehr Code als das, was Sie gezeigt haben? Wenn Sie weiterhin alle 10 Szenen gleichzeitig rendern möchten, ist dies nicht schneller als mit einer einzelnen Szene.