Earth

XII VI MMXXIV, NASA Terra "Blue-Marble"

Pluto

XXIV XII MMXV, NASA New-Horizons "Sputnik Planitia"

Ceres

Unknown

Click and drag to move the planet
Or scroll down for projects

Back

Planet Render

Here's my planet render / design I've created using three.js

Steps

Creating the universe
To start with this render I set the scene, camera and renderer, and I decided to create the stars first:

for (let i = 0; i < 700; i++) {
const x = THREE.MathUtils.randFloatSpread(2000);
const y = THREE.MathUtils.randFloatSpread(2000);
const z = THREE.MathUtils.randFloatSpread(2000);
starVertices.push(x, y, z);
}

Here I created a variable called stars and then use a loop to 700 stars randomly spread between the 8,000,000,000 pixels that make up the area of the X, Y and Z planes.
Creating the Sun and Earth
Next I created the planet body and the sun. I create two spheres and assign the sun to the pointlight:

const sunLight = new THREE.PointLight(0xffffff, 3.5, 1200);
sunLight.position.set(0, 7, 0);
scene.add(sunLight);
const sunTextureLoader = new THREE.TextureLoader();
const sunGeometry = new THREE.SphereGeometry(20, 32, 32);
const sunMaterial = new THREE.MeshBasicMaterial();
sunTextureLoader.load('sun.jpg', function(texture) {
sunMaterial.map = texture;
sunMaterial.needsUpdate = true;
});
const sunMesh = new THREE.Mesh(sunGeometry, sunMaterial);
sunMesh.position.copy(sunLight.position);
scene.add(sunMesh);

I created two variables called sunLight and sunMesh and set their values while loading in the texture for the sunMesh.
Putting the world in motion
The last part of my render was the animation function:

let time = 0;
const animate = function () {
time += 0.002;
sunLight.rotation.y += 0.001;
sunMesh.position.copy(sunLight.position);
if (isDragging){
sphere.rotation.y += 0;
time -= 0.002; }
else{sphere.rotation.y += 0.01;
sphere.rotation.x === Math.sin(time) * 1000;
sphere.position.x = Math.sin(time) * 1000;
sphere.position.z = Math.cos(time) * 1000;}
camera.position.set(sphere.position.x, sphere.position.y, sphere.position.z + 10);

renderer.render(scene, camera);
requestAnimationFrame(animate); };
animate();

I set up a catch for if the Earth's being interacted with, and then used a time variable to control where the Earth is in it's orbit.
x===sin(time), z===cos(time) both control the position and orbit, 2π together they create the planets trajectory.