three.js — a planet from noise and light

Real 3D in ~60 lines: a sphere whose vertices are pushed outward by noise (mountains from arithmetic), one light, a starfield, slow rotation. This is the exact skeleton of the planet-exploration demos on reddit. The three.js library (r185, MIT, free) loads from a CDN — no installs, and no Node.js anywhere.

// scene = container, camera = viewpoint, renderer = painter
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, W / H, 0.1, 100);
camera.position.z = 4.2;
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(W, H, false);
scene.background = new THREE.Color(0x191527);

// THE PLANET: take a sphere, push each vertex outward by noise
const geo = new THREE.IcosahedronGeometry(1.5, 5);
const pos = geo.attributes.position;
const v = new THREE.Vector3();
for (let i = 0; i < pos.count; i++) {
  v.fromBufferAttribute(pos, i);
  // "noise" from summed sines — mountains from arithmetic
  const n = 0.5 * Math.sin(v.x * 3.1) * Math.sin(v.y * 2.7)
          + 0.5 * Math.sin(v.y * 5.3 + v.z * 4.1);
  v.multiplyScalar(1 + n * 0.08);        // 0.08 = mountain height
  pos.setXYZ(i, v.x, v.y, v.z);
}
geo.computeVertexNormals();              // recalc lighting after the push
const planet = new THREE.Mesh(
  geo,
  new THREE.MeshStandardMaterial({ color: 0x5a63c8, flatShading: true })
);
scene.add(planet);

// LIGHTS: one sun + faint fill so the dark side isn't black
const sun = new THREE.DirectionalLight(0xfff4e0, 2.5);
sun.position.set(4, 2, 3);
scene.add(sun, new THREE.AmbientLight(0x334, 2));

// STARFIELD: chapter 04's starfield, as 3D points
const starGeo = new THREE.BufferGeometry();
const stars = [];
for (let i = 0; i < 400; i++) {
  stars.push(rand(-40, 40), rand(-40, 40), rand(-40, -8));
}
starGeo.setAttribute("position",
  new THREE.Float32BufferAttribute(stars, 3));
scene.add(new THREE.Points(starGeo,
  new THREE.PointsMaterial({ color: 0xe6e3f2, size: 0.12 })));

// slow, stately rotation (chapter 05 would approve)
onFrame((dt) => {
  planet.rotation.y += dt * 0.15;
  renderer.render(scene, camera);
});

Loading three.js from the CDN… the Run button wakes up when it arrives. (This page needs internet for that one file.)

Try tweaking: mountain height 0.08 → 0.25 (jagged asteroid) or 0.0 (billiard-smooth) · the noise frequencies (3.1, 2.7, 5.3, 4.1) — lower = continents, higher = gravel · planet colour to 0x8fa98f for a mossy world · rotation 0.15 → 2.0 and feel "stately" become "frantic" · star count 400 → 4000.

The 3D twist on things you know: the starfield is chapter 04's, the calm rotation is chapter 05's stately recipe, and a fresnel rim-glow atmosphere would be chapter 06's halo wrapped around the sphere. In Babylon: the same scene is CreateIcoSphere + vertex displacement + PointsCloudSystem — see the Babylon demo. Chapter 11 maps both.

In Godot: the same planet is ~80 lines of Node3D code — take a SphereMesh's arrays, push each vertex along its normal by FastNoiseLite, colour by height, rebuild as an ArrayMesh, and set it spinning under one DirectionalLight3D. Download planet_3d.gd from the Godot project. In Unity: read Mesh.vertices from a sphere, displace each with Mathf.PerlinNoise, write them back and call RecalculateNormals(); the starfield is one Particle System with zero velocity and infinite lifetime. In Unreal: displace in the material instead — a World Position Offset driven by a noise node gives the same silhouette with no CPU mesh edit; the honest vertex-level port uses a runtime/procedural mesh component.