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 - 基本上是每个场景的网格分组。

当您创建每个场景时，您还将创建一个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/

旋转的环状网格出乎意料地结果

1 个答案: