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

Question

我认为这张照片最能解释我的问题:

首先,我沿着红线翻译框.接下来,我希望旋转的效果是蓝线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 );

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

Answer 1

有几种方法可以做你想要的,但我认为最简单的方法是这样的:

// 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;

编辑:更新小提琴:http://jsfiddle.net/hbt9c/317/

three.js r.70

Answer 2

创建一个复合对象,其中心将是内部对象旋转的点,这是一个明显的答案,编写速度非常快.只需创建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 );