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 details

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 use a loop to create 700 stars randomly spread between the 8b 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 positions while loading in the texture for the sunMesh.
Putting the World in Motion
The last main 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 an if statement for when the Earth's being interacted with, and then used a time variable to control where the Earth is in its orbit.
A circle's parametric form is x=r⋅cos(θ) and y=r⋅sin(θ), r is the radius and θ is the angle.
Time acts as θ, and the radius r is 1000 units. Math.sin(time) * 1000 sets the x-coordinate, and Math.cos(time) * 1000 sets the z-coordinate. I use z instead of y because the display is three dimensional and z is on the horizontal plane.