Question

This is the work I have done so far.我正在使用Three.js动画，我想创建一个太阳系。我想让行星围绕太阳旋转。我完成了自己的工作，围绕太阳创造了轨道。但我不知道如何使地球在特定的轨道上旋转。我创造了一个像这样的轨道和行星。

var material = new THREE.LineBasicMaterial({color: 'aqua'});
var geometry = new THREE.CircleGeometry(3.2, 1000);
geometry.vertices.shift();
var line = new THREE.Line(geometry, material);
line.position.set(0.5, 5, 6);
line.rotation.x = 2;`

geometry = new THREE.SphereGeometry(0.5, 32, 32);
material = new THREE.MeshBasicMaterial({color: 'yellow'});
p1 = new THREE.Mesh(geometry, material);
p1.position.set(3, 3.8, -1);'

所以，我想让这个星球在特定的圆圈上旋转。

Answer 1

你知道从太阳到行星的距离（半径），然后你可以使用Math.sin()和Math.cos()函数来达到你想要的效果。

var orbitRadius = 10; // for example
var date;

在动画循环中，你可以这样做：

date = Date.now() * 0.0001;
p1.position.set(
  Math.cos(date) * orbitRadius,
  0,
  Math.sin(date) * orbitRadius
);

jsfiddle示例

Answer 2

一种方法是创建一个代表轨道的Three.js对象，将圆和行星添加到此轨道。这样，你只需要改变轨道的旋转，使行星围绕太阳旋转。

var orbit = new THREE.Group();
orbit.add(line);
orbit.add(p1);
scene.add(orbit);

然后，在渲染循环中：

orbit.rotation.y += 0.01;
renderer.render(scene, camera);

请注意，如果你想改变轨道的倾斜度，你必须给轨道一个新的旋转父级。

请参阅此fiddle。

修改*

如果您不想在渲染循环内手动设置动画，您还可以使用tween.js来创建动画。

// make 1 revolution in 5 second var tween = new TWEEN.Tween(orbit.rotation).to({y: Math.PI / 2}, 5000); // and start again tween.onComplete(function () { orbit.rotation.y = 0; tween.start(); }); tween.start(); // kick off the animation

有关Tween的信息，请参阅此fiddle。

围绕轨道旋转物体

2 个答案: