For my project, I am working with an array that contains 100 JSON objects, each of which corresponds to a mesh. The goal is to add all 100 meshes to the scene, but this is causing a significant strain on performance. To address this issue, I am exploring the possibility of dividing the array into 10 parts, with each part containing 10 "Planet" objects that will be added to separate scenes. In total, there will be 10 scenes, each with 10 meshes.
As a novice in three.js, I am unsure if this approach is feasible. How should I proceed? Below is the code snippet I have been working on:
// Scene initialization
var scenes = [];
for (var i = 0; i < 10; i++) {
scenes.push(new THREE.Scene());
}
// Data for the planets
var data = [
{ "Planet": "1" },
{ "Planet": "2" },
{ "Planet": "3" },
// Continues up to planet 100
];
// Adding 100 meshes to the scene
data.forEach(function(item, index) {
var loader = new THREE.TextureLoader();
var material = new THREE.MeshPhongMaterial({ map: loader.load('image.jpg') });
var geometry = new THREE.SphereGeometry(30, 50, 50);
var mesh = new THREE.Mesh(geometry, material);
// Randomize positions
mesh.position.x = THREE.Math.randInt(-500, 500);
mesh.position.z = THREE.Math.randInt(-500, 500);
// Distributing meshes across scenes
scenes[Math.floor(index / 10)].add(mesh);
});
Edit: To clarify, the objective is to create 10 scenes, each displaying 10 "planets" based on the data array. This way, users can switch between scenes and view a manageable number of planets at a time, rather than rendering all 100 in a single scene. Here's a simple example of how the switching logic can work:
var userInput = 1;
if (userInput === 1) {
renderer.render(scenes[0], camera); // Render first scene
} else {
renderer.render(scenes[userInput - 1], camera); // Render specified scene
}