CODEWITHSUNDEEP
javascripthtmlmaththree.js
Anarkie
Anarkie

Reputation: 695

Rotating Earth around Sun

I am trying to make 3D Solar system so first I created the Sun and Earth with 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 is Earth and I would like to rotate it around the Sun, in my render() I added 

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

I think I only need to edit the position of x axis, right? But this makes only half rotation, from what I see. I obviously need to stop the subtraction after sometime and increase the x position but this would only make the Earth go backwards, it wouldn't go behind the Sun, it always makes a half circle and stops, finally the value of x position is "-200" I was expecting to find it "-100" but don't know why. I also would like to give Earth an axial tilt of 23.5 degrees, I tried with quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation ); but didn't work. I would be glad if you can give me hand!

Upvotes: 1

Views: 3287

Answers (1)

Matthew Cooley
Matthew Cooley

Reputation: 136

The simplest (though not scientifically accurate) thing to do would to use Math.cos/sin paired with an updating angle value. Something like this in the frame update:

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;

You could elongate either the x or z value to make the orbit elliptical by multiplying earthOrbitRadius by some factor.

You could tilt the earth just by setting it's rotation.z. However, if you want to have the Moon and have it orbit around the tilted axis, then easiest thing to do is create an empty Object3D container to hold the two, with the moon running its own orbiting script. Then you animate that container around the Sun. So the set up would look something like this: 

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

And in the frame update:

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

You can see it running here: Simple Sun, Earth, and Moon at JSFiddle

Now, if you want to go deep down the rabbit hole of accurate orbiting mechanics, I would suggest starting with looking under the hood of this incredible Three.js simulation of all the planets and 600,000 asteroids: Asterank project

Upvotes: 4

Related Questions