围绕轨道旋转物体

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

围绕轨道旋转物体

回答

相关问题