圍繞軌道旋轉物體

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

所以，我想讓這個星球在特定的圓上旋轉。

來源

2017-02-23 Naren

你知道從太陽到行星的距離（半徑），那麼你可以使用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爲例做

來源

2017-02-23 15:14:42 prisoner849

一種方法是創建一個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

查看此fiddle吐溫。

來源

2017-02-23 15:16:05 neeh

圍繞軌道旋轉物體

回答

相關問題