three.js - 围绕轨道旋转对象

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例子