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

时间:2016-10-29 14:28:52

标签: javascript three.js

我创建了一个存储在包含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个场景的功能,并且可以看到10个&#34;行星&#34;在基于data数组的每个场景中。我已经编写了这段代码,以便用户决定要渲染哪个场景以及哪些场景不是。在一个场景中渲染和观察100个行星对于演出来说并不可怕,但这不是我的项目需要的样子。

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

1 个答案:

答案 0 :(得分: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个场景,那么这比单个场景要快得多。