地球围绕太阳旋转

Question

我正在尝试制作3D太阳系，所以首先我用THREE.SphereGeometry()创建了太阳和地球

var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(50, 100, 100),
new THREE.MeshBasicMaterial({side: THREE.DoubleSide, map:txt2}));
sphere2.position.set(100,5,30);

球体2是地球，我想绕太阳旋转，在我的render()中我添加了

sphere2.position.x -= 1;
sphere2.position.normalize();
sphere2.position.multiplyScalar( 200 );

我想我只需要编辑x轴的位置，对吧？但据我所见，这只是旋转了一半。很明显，我需要在一段时间后停止减法，并增加x位置，但这只会让地球倒退，它不会落后于太阳，它总是绕半个圆圈停下来，最后x位置的值是"-200"，我本以为它是"-100"，但不知道为什么。我也想给地球一个23.5度的轴向倾斜，我尝试过quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );，但没有成功。如果你能帮我，我会很高兴的！

Answer 1

最简单(尽管在科学上不准确)的做法是使用Math.cos/sin与更新角度值配对。帧更新中的类似内容：

earthOrbitAngle += earthOrbitSpeed; //advance angle in degrees
var orbitAngleInRadians = earthOrbitAngle * Math.PI / 180; //convert to radians
//update position of earth...
earth.position.x = Math.cos(orbitAngleInRadians) * earthOrbitRadius; 
earth.position.z = Math.sin(orbitAngleInRadians) * earthOrbitRadius;

通过将earthOrbitRadius乘以某个因子，可以延长x或z值以使轨道为椭圆形。

你可以通过设置地球的旋转来倾斜地球。z。然而，如果你想让月球绕着倾斜的轴运行，那么最简单的方法就是创建一个空的Object3D容器来容纳两者，让月球运行自己的轨道脚本。然后围绕太阳设置容器的动画。所以设置看起来像这样：

theSun = new THREE.Mesh(new THREE.SphereGeometry(30, 16, 15), new THREE.MeshBasicMaterial({
color: 'yellow' 
}));
scene.add(theSun);
theEarthAndMoon = new THREE.Object3D();
theEarthAndMoon.rotation.z = 23.439281 * Math.PI / 180; //tilt of earth in radians;
scene.add(theEarthAndMoon);
theEarth = new THREE.Mesh(new THREE.SphereGeometry(5, 16, 15),  new THREE.MeshLambertMaterial({
color:"blue"
}));
theEarthAndMoon.add(theEarth); 
theMoon = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 15),  new THREE.MeshLambertMaterial({
color:"white"
}));
theEarthAndMoon.add(theMoon);

并且在帧更新中：

//run the earth's orbit around the Sun
earthOrbitAngle += earthOrbitSpeed; 
var radians = earthOrbitAngle * Math.PI / 180;
theEarthAndMoon.position.x = Math.cos(radians) * earthOrbitRadius;
theEarthAndMoon.position.z = Math.sin(radians) * earthOrbitRadius;
//run the Moon's orbit around the Earth
moonOrbitAngle += moonOrbitSpeed; 
var moonRadians = moonOrbitAngle * Math.PI / 180;
theMoon.position.x = Math.cos(moonRadians) * moonOrbitRadius;
theMoon.position.z = Math.sin(moonRadians) * moonOrbitRadius;

你可以在这里看到它的运行：JSFiddle 的简单太阳、地球和月球

现在，如果你想深入精确轨道力学的兔子洞，我建议你从这个令人难以置信的Three.js模拟所有行星和600000颗小行星的引擎盖下开始：Asterank项目