旋轉環網結果出乎意料

Question

我有一個three.js所項目中，我將在100項目，被分爲10個場景：他們正在通過一個循環加在

//add 100 meshes to 10 scenes based on an array containing 100 elements 
    for (var i = 0; i < data.length; i++) {  
     mesh = new THREE.Mesh(geometry, material);  
     //random 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); 

，而所有這些網格被分配到10個場景：

// Assign 10 meshes per scene. 
var sceneIndex = Math.floor(i/10); 
scenes[sceneIndex].add(mesh); 

我也寫了一個功能，我可以圍繞場景的中心旋轉的網格。

但我不知道如何將旋轉功能應用於所有網格，同時仍將它們分爲相應的場景。這可能聽起來太模糊了，所以我有一個fiddle，它包含所有相關的代碼。

如果你回過頭來評論這兩行，你會看到網格都移動到scenes[0]，它們都按照我想要的方式旋轉，但我仍然需要將它們分割成單獨的場景。

spinningRig.add(mesh); 
scenes[0].add(spinningRig); 

代碼應該看起來像什麼樣子？ Waht是它的邏輯嗎？

Answer 1

邏輯非常簡單。最簡單的格式應該是爲每個場景分別進行一次旋轉變形 - 本質上是每個場景的網格分組。

當您創建的每個場景，您也將創建一個spinningRig並添加+將其分配到的那一幕：

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

    // Add the spinningRig to the scene 
    var spinningRig = new THREE.Object3D(); 
    scenes[i].add(spinningRig); 

    // Track the spinningRig on the scene, for convenience. 
    scenes[i].userData.spinningRig = spinningRig; 
} 

然後，而不是直接添加網格到現場，將它們添加到spinningRig爲現場：

var sceneIndex = Math.floor(i/10); 
scenes[sceneIndex].userData.spinningRig.add(mesh); 

最後，旋轉分配給currentScene的spinningRig：

currentScene.userData.spinningRig.rotation.y -= 0.025; 

查看jsFiddle：https://jsfiddle.net/712777ee/4/