ThreeJS 绕 (0,0,0) 旋转对象

Question

我已经创建了一个 ThreeJS 场景，如图所示。 我创建了 2 种方法来围绕所需

Obj2

中的

Obj1

旋转

distance

。

function configureObj2PositionHorizontally(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.x = distance * Math.cos(radianAngle);
  obj2Mesh.position.z = distance * Math.sin(radianAngle);

  console.log(radianAngle, distance);
}

function configureObj2PositionVertically(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.y = distance * Math.sin(radianAngle);
  obj2Mesh.position.z = distance * Math.cos(radianAngle);

  console.log(radianAngle, distance);
}

问题是，如果物体到达像

pointA

这样的点，并且我尝试垂直旋转，它就会围绕

Z

轴旋转。不在中心点 (0,0,0) 周围。 但我需要

Obj2

仅围绕

Obj1

（它放置在 (0,0,0) 上）而不是围绕轴旋转/轨道。

如何解决此问题？

您可以在这里找到 JSFiddle：https://jsfiddle.net/janithsg/y8upn26v/25/

Answer 1

我建议创建一个与Obj1位置相同的组，将Obj2添加到该组中，并绕其Y轴和X轴旋转该组（如果Obj2最初沿Z轴位移）。

此代码完成工作：

const obj1Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.5), 
  new THREE.MeshBasicMaterial({ color: 0xffff00 })
)
scene.add(obj1Mesh)

const obj2Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.2), 
  new THREE.MeshBasicMaterial({ color: 0x909090 })
)
obj2Mesh.position.z = - distance
scene.add(obj2Mesh)

const obj2Group = new THREE.Group()
obj2Group.add(obj2Mesh)
scene.add(obj2Group)

function configureObj2PositionHorizontally(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateY(radianAngle)
}

function configureObj2PositionVertically(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateX(radianAngle)
}

如果您随后想要移动 Obj1，而 Obj2 仍围绕其运行，您可以创建另一个包含 obj1Mesh 和 obj2Group 的组，并移动这个新组：

const mainGroup = new THREE.Group()
mainGroup.add(obj1Mesh, obj2Group)
mainGroup.translateX(2)
scene.add(mainGroup)