軌道周りの物体を回転する

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オブジェクトを作成AN追加することですこの軌道にこの方法では、地球を太陽のまわりで回転させるように軌道の回転を変更するだけです。

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 

これを参照すると、fiddleはツイーンです。