Ein Objekt um eine Umlaufbahn drehen

Question

This is the work I have done so far. Ich arbeite mit Three.js Animation, in der ich ein Sonnensystem erstellen möchte. Und ich möchte die Planeten um die Sonne drehen lassen. Ich habe meine Arbeit gemacht, um Umlaufbahnen um die Sonne zu erschaffen. Aber ich weiß nicht, wie man den Planeten auf der speziellen Umlaufbahn drehen lässt. Ich habe eine Umlaufbahn und einen Planeten so geschaffen.

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);' 

Also möchte ich den Planeten auf dem bestimmten Kreis drehen lassen.

Answer 1

Sie kennen die Entfernung von der Sonne zum Planeten (Radius), dann können Sie Math.sin() und Math.cos() Funktionen verwenden, um zu erreichen, was Sie wollen.

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

In der Animationsschleife können Sie tun:

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

jsfiddle Beispiel

Answer 2

Eine Möglichkeit ist, zu tun, um ein Three.js Objekt, die die Umlaufbahn zu schaffen, einen in den Kreis hinzufügen und die Planeten zu dieser Umlaufbahn. Auf diese Weise müssen Sie nur die Rotation der Umlaufbahn ändern, damit sich der Planet um die Sonne dreht.

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

Dann in der Rendering-Schleife:

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

Beachten Sie, wenn Sie die Neigung der Umlaufbahn ändern wollen, dann würden Sie die Umlaufbahn einen neuen gedreht Eltern geben müssen.

Siehe hierzu fiddle.

bearbeiten *

Wenn Sie nicht manuell in der Rendering-Schleife animieren möchten, können Sie auch tween.js verwenden, um die Animation zu erstellen.

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

Siehe dieses fiddle für Tween.