Three.js 如何使用3.js使一些卫星围绕行星旋转？

我认为这张照片最好地解释了我的问题：

首先，我沿着红线翻译方框。接下来，我希望旋转的效果是

a

中的蓝线，但实际发生的情况更像

b

中的蓝线。感觉上，更改旋转始终相对于原始对象空间，但平移（尽管先发生）始终相对于父对象，并且不会真正影响相对于对象空间的几何体点。如果这让人困惑，我道歉；显然，我对这方面还不熟悉

下面是产生这种效果的代码的重要部分。请记住，图像的方向与本代码产生的方向不同；这张图片仅仅是一个清晰显示效果的例子

var objectContainer = new THREE.Object3D();

var tubeRadius = 100;
var tubeGeometry = new THREE.CylinderGeometry(tubeRadius, tubeRadius, tubeRadius * 3, 36, 1, false);
var tube = new THREE.Mesh(tubeGeomtry, material);
scene.add( tube );

var boxes = new THREE.Object3D();
var boxEdge = 50;
var boxGeometry = new THREE.CubeGeometry(boxEdge, boxEdge, boxEdge);
var box1 = new THREE.Mesh( boxGeometry, material );
box1.translateX(tubeRadius + boxEdge / 2 + 5);
box1.translateY(boxEdge / 2);
box1.rotation = new THREE.Vector3(0, 2*Math.PI/3*0, 0);
boxes.add(box1);
var box2 = box1.clone();
box2.rotation = new THREE.Vector3(0, 2*Math.PI/3*1, 0);
boxes.add(box2);
var box3 = box1.clone();
box3.rotation = new THREE.Vector3(0, 2*Math.PI/3*2, 0);
boxes.add(box3);
scene.add( boxes );

---

我能想到的唯一解决办法是将每个盒子包装在另一个对象空间中并围绕该空间旋转，但这似乎是过度的工作。实现我想要的结果的首选方法是什么？

创建一个复合对象，其中心将是内部对象旋转的点，这是一个显而易见的答案，而且写起来非常快。只需创建一个

Object3D

，并将您的框添加到其中

类似的方法也包含在本手册中。它移动对象顶点的点，因此它实际上有一个新的中心

或者，您可以手工处理矩阵。试试这个：

var boxGeometry = new THREE.CubeGeometry(boxEdge, boxEdge, boxEdge);
var mr = new THREE.Matrix4();
var mt = new THREE.Matrix4();
mt.setPosition(new THREE.Vector3(0,tubeRadius,0));
var box1 = new THREE.Mesh( boxGeometry, material );
box1.applyMatrix(mt);
var box2 = box1.clone();
mr.makeRotationZ(2 * Math.PI /3);
box2.applyMatrix(mr);
boxes.add(box2);
var box3 = box1.clone();
mr.makeRotationZ(4 * Math.PI /3);
box3.applyMatrix(mr);
boxes.add(box3);
boxes.add(box1);
scene.add( boxes );

---

有几种方法可以满足您的需求，但我认为最简单的方法是：

// parent
parent = new THREE.Object3D();
scene.add( parent );

// pivots
var pivot1 = new THREE.Object3D();
var pivot2 = new THREE.Object3D();
var pivot3 = new THREE.Object3D();

pivot1.rotation.z = 0;
pivot2.rotation.z = 2 * Math.PI / 3;
pivot3.rotation.z = 4 * Math.PI / 3;

parent.add( pivot1 );
parent.add( pivot2 );
parent.add( pivot3 );

// mesh
var mesh1 = new THREE.Mesh( geometry, material );
var mesh2 = new THREE.Mesh( geometry, material );
var mesh3 = new THREE.Mesh( geometry, material );

mesh1.position.y = 5;
mesh2.position.y = 5;
mesh3.position.y = 5;

pivot1.add( mesh1 );
pivot2.add( mesh2 );
pivot3.add( mesh3 );

然后在渲染循环中：

parent.rotation.z += 0.01;

编辑：更新的小提琴：

---

three.js r.116

我不知道three.js，但是通过

Math.cos（旋转）*boxEdge/2，Math.sin（旋转）*boxEdge/2以及局部旋转来翻译它怎么样？这感觉像是双重工作，旋转并翻译每个框。实际上，我想做的是围绕同一点旋转每个克隆，这是翻译之前的原点。谢谢您的示例。正如我在问题中提到的，这就是我所想的。这是问题的典型解决方案吗？我打算发展这一点一段时间，我只是想确保我没有开枪打自己的脚。是的。这是典型的。另一种解决方案是将每个框作为场景的子框，并使用数学计算每一帧的新
位置
和
旋转
向量。