javascript - 地球绕太阳转

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

sphere2 是地球，我想围绕太阳旋转它，在我的 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 与更新 Angular 值配对使用。框架更新中的内容如下:

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 值以使轨道成为椭圆形。

你可以通过设置它的 rotation.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;

你可以看到它在这里运行:Simple Sun, Earth, and Moon at JSFiddle

现在，如果您想深入了解精确的轨道力学，我建议您从这个令人难以置信的 Three.js 模拟所有行星和 600,000 颗小行星的引擎盖下开始:Asterank project