Free 3D Scene

Rotating Dot Globe

A globe made of hundreds of dots that rotates on its own and can be dragged with the mouse or a finger. Written from scratch on a 2D canvas, so it shows exactly how 3D projection works.

dark
canvas
3d maths
globe
interactive
javascript

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="wrap">
  <canvas id="globe" aria-label="Rotating globe made of dots. Drag to rotate."></canvas>
  <div class="label">
    <h1>Dot Globe</h1>
    <p>Drag to rotate</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Works with Claude · ChatGPT · Cursor · v0 · Bolt · Gemini

Create an interactive rotating globe made of dots on an HTML canvas, using vanilla JavaScript only (no Three.js, no libraries). The goal is to show how 3D works with plain maths.

Requirements:
- A full-viewport canvas on a dark radial-gradient background, with a small centred title "Dot Globe" and the hint "Drag to rotate" near the bottom.
- Generate 700 points evenly distributed on a unit sphere using the Fibonacci sphere method (golden angle = PI * (3 - sqrt(5))).
- Keep two angles: rotY (spin) and rotX (tilt, starting at -0.35 radians).
- Every frame, for each point: rotate it around the Y axis and then the X axis using sine and cosine, then apply perspective projection with scale = cameraDistance / (cameraDistance + z), where cameraDistance is 3 sphere radii, and convert to screen coordinates around the canvas centre. The sphere radius on screen is 34% of the smaller canvas dimension.
- Draw each point as a small circle. Use depth for realism: nearer points are larger (up to about 2.4px) and more opaque and coloured warm orange (#ffb066); farther points are smaller, dimmer and bluish (#8fa0ff).
- Auto-rotate slowly. Let the user drag with pointer events (pointerdown / pointermove / pointerup with setPointerCapture) to change rotY and rotX; clamp rotX so the globe cannot flip over. Set touch-action: none on the canvas.
- Handle high-DPI screens by sizing the canvas with devicePixelRatio (capped at 2) and handle window resize.
- Stop the auto-rotation if the user prefers reduced motion.

Return a single HTML file with <style> and <script> tags, with comments explaining the rotation and projection maths.

How to build it, step by step

1
Create the 3D data first: an array of points, each with x, y and z between -1 and 1. The Fibonacci sphere formula spaces them evenly instead of bunching at the poles.
2
Rotate each point every frame. Rotation around the Y axis mixes x and z using cos and sin of the angle; rotation around the X axis mixes y and z the same way.
3
Project 3D to 2D with perspective: divide by distance. scale = camera / (camera + z) makes far points shrink towards the centre, exactly as a camera does.
4
Convert to pixels by multiplying by the globe radius and adding the centre of the canvas.
5
Add depth cues. Since a canvas has no real depth, draw far points smaller, dimmer and in a cooler colour so the brain reads the shape as a sphere.
6
For dragging, record the pointer position on pointerdown and add the movement to the rotation angles on pointermove.
7
Multiply the canvas size by devicePixelRatio and scale the context so dots stay sharp on high-resolution screens.

Customisation tips

Raise COUNT to 2000 for a denser globe; a 2D canvas handles this comfortably.
Connect nearby points with thin lines to make a network globe.
Replace the generated points with real latitude and longitude coordinates to plot cities.