3つのjsでグループの中心を回る方法

Question

私は3つのjsに新しいです。私はキューブのグループを作りました。私はそれらを回転できるようにセンターを設定する方法を理解しようとしています。

ここはフィドルです。ここhttps://jsfiddle.net/of1vfhzz/

私はあなたがメッシュのあなたのグループがグループの中心の周りを回転したいキューブ

side1 = new THREE.Object3D(); 
      addCube({ name: 'side1topleft', x: -8.5, y: 7.5, z: 5 }); 
      addCube({ name: 'side1topmiddle', x: -4, y: 7.5, z: 5 }); 
      addCube({ name: 'side1topright', x: .5, y: 7.5, z: 5 }); 
      addCube({ name: 'side1middleleft', x: -8.5, y: 3, z: 5 }); 
      addCube({ name: 'side1middlemiddle', x: -4, y: 3, z: 5 }); 
      addCube({ name: 'side1middleright', x: .5, y: 3, z: 5 }); 
      addCube({ name: 'side1bottomleft', x: -8.5, y: -1.5, z: 5 }); 
      addCube({ name: 'side1bottommiddle', x: -4, y: -1.5, z: 5 }); 
      addCube({ name: 'side1bottomright', x: .5, y: -1.5, z: 5 }); 
      scene.add(side1); 




      function addCube(data) { 
       var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
       cube.position.x = data.x 
       cube.position.y = data.y 
       cube.position.z = data.z 
       cube.rotation.set(0, 0, 0); 
       cube.name = data.name; 
       side1.add(cube); 
      } 
     then in render scene I rotate it around y axis but I need to set the center. I tried translate but I'm not getting it. 

Answer 1

を追加します。

1つの選択肢は、メッシュのジオメトリを変換することです。コレクションとして、ローカル原点の中心に配置されます。

これをしたくない場合は、祖父母オブジェクトpivotを作成してそれを回転させることができます。

あなたの場合、side1はあなたの子メッシュの親です。したがって、このパターンを使用してください：

var pivot = new THREE.Group(); 
scene.add(pivot); 

pivot.add(side1); 
side1.position.set(4, - 3, - 5); // the negative of the group's center 

アニメーションループでピボットを回転させます。

pivot.rotation.z += 0.02; 

フィドル：https://jsfiddle.net/of1vfhzz/1/

three.js r.77