旋轉地球圍繞太陽

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; 

你可以拉長無論是X或Z值，使橢圓軌道由一些因素相乘earthOrbitRadius。

你可以通過設置它的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

，如果你想深入沿着準確的軌道力學的兔子洞，我建議先看看這個令人難以置信的所有行星和600,000個小行星的Three.js模擬的引擎蓋：Asterank project