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与更新角度值配对。帧更新中有类似的东西：

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

你可以通过设置它的旋转来倾斜地球。但是，如果你想拥有月球并让它围绕倾斜轴进行轨道运动，那么最简单的方法就是创建一个空的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 < / p>

在太阳周围旋转地球

1 个答案: