세 js에서 그룹의 중심을 중심으로 회전하는 방법

Question

저는 3 초 새로 왔습니다. 큐브 그룹을 만들었고 센터를 설정하여 회전시킬 수있는 방법을 알아 내려고 노력 중입니다.

여기는 바이올린입니다.

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

당신은 메시의 그룹이 그룹의 중심을 회전 할 추가 할 수 있습니다.

하나의 옵션은 메쉬 지오메트리를 변환하여 컬렉션으로 로컬 원점을 중심으로 배치하는 것입니다.

당신이하고 싶지 않다면, grand-parent 오브젝트 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