100%

Fork of Spinning Rainbow Starfield

✓ Published1🌍 Public

Last edited Jul 29, 2025

Created on Jul 29, 2025

A fork of curran’s spinning rainbow starfield renders 4,000 stars in true 3D using Three.js and WebGL. Stars move toward the viewer, shifting into colorful spheres that reset ahead of the camera when they drift past it. Mouse movement steers the flight direction, with inertia smoothing the turns, while a crosshair marks the aiming point. The animation runs continuously, repositioning stars as needed to create the sensation of flight through an endless, star-filled space.

AI-generated description

3D Starfield Flight Simulator

An interactive 3D starfield animation created with Three.js that allows you to fly through space using mouse control.

Features

True 3D rendering using WebGL through Three.js
Mouse-controlled flight navigation
Colorful stars with enhanced size variation
4000 stars for a dense starfield experience
Perspective projection with depth
Smooth flight physics with inertia
Responsive design that adjusts to window size
Custom crosshair for navigation reference

How to Use

Move your mouse around the screen to control the flight direction:

Move mouse left/right to turn left/right
Move mouse up/down to pitch up/down

The small circular crosshair helps you aim your flight direction.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Spinning Rainbow Starfield

A colorful 3D starfield flight simulator immerses the viewer in a tunnel of thousands of stars, rendered as glowing points that stream past as the viewpoint steers through space. The visualization uses Three.js with a custom GLSL ShaderMaterial and BufferGeometry to draw 5,000 stars, while mouse input controls rotation with inertia and scrolling adjusts speed. A cyan crosshair tracks the cursor, and a speed indicator displays the current velocity.

NNita

90% match

Loading thumbnail…

Spinning Rainbow Starfield

This animation presents a colorful starfield viewed from a single point, with 2000 stars moving through three-dimensional space while the entire scene rotates around the center. The stars appear in random colors and sizes, leaving faint trails as they travel forward. Built with vanilla JavaScript and HTML5 Canvas, the piece uses trigonometric functions for rotation, a perspective projection formula to simulate depth, and `requestAnimationFrame` for smooth animation.

CCurran Kelleher

84% match

Loading thumbnail…

Blurry Spinning Rainbow Starfield

A colorful starfield animation displays 800 glowing stars moving through 3D space with a rotating perspective and dark cosmic background. Stars appear in vibrant HSL colors with varying sizes and speeds, creating a luminous, ethereal effect. The animation uses HTML5 Canvas with `requestAnimationFrame`, applying trigonometric rotation and perspective projection to simulate depth as stars move toward the viewer and recycle off-screen.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of HTML Starter

This example shows a starfield animation that simulates traveling through space. The code generates 1,000 star elements with randomized positions, sizes, and speeds, then animates them using D3’s data join and `requestAnimationFrame`. Each star’s 3D translation and opacity update as it moves along the z-axis, with mouse movement dynamically shifting the perspective origin. The animation rebuilds on window resize, resetting all stars. It uses D3 v7 selections and DOM manipulation, CSS 3D transforms, and the native `requestAnimationFrame` API.

CCurran Kelleher

79% match

Loading thumbnail…

Gradient Starfield

This example shows a 3D starfield animation with 2,000 colorful stars moving through space and slowly rotating around the center. It runs on HTML5 Canvas and vanilla JavaScript, using `requestAnimationFrame` for smooth animation. Stars are generated with random positions, sizes, speeds, and colors, then rendered with perspective projection and recycled when they exit the viewport. The code uses trigonometric functions for rotation and a perspective factor for depth perception, with a translucent background to create subtle trails.

CCurran Kelleher

77% match

Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

A ring of colored spheres orbits a central point within a dark 3D space, slowly rotating to reveal its circular arrangement. Built with Three.js, the visualization uses a WebGL renderer and a perspective camera with orbit controls for interactive exploration. Each sphere is positioned using sine and cosine trigonometry, and its hue is mapped to its index around the circle, creating a smooth rainbow gradient. The scene includes directional and ambient lighting, and user-controlled damping enables smooth camera movement.

CCurran Kelleher

76% match

Loading thumbnail…

Light Mode Starfield

A colorful starfield animation rendered on an HTML5 Canvas, with 800 stars moving through 3D space against a light background. The stars rotate around the center using trigonometric calculations and are projected with perspective depth. Each star features a distinct HSL color, size, and speed, and stars are recycled when they move off-screen. The animation runs with requestAnimationFrame, and the canvas resizes to fill the viewport.

CCurran Kelleher

75% match

Loading thumbnail…

Fork of Wiggly Worms

This interactive canvas animation depicts a starfield of 800 colorful, wiggling stars with motion trails, rendered against a dark background with an overall hue shift effect. Each star follows a sinusoidal wiggle pattern while moving toward the viewer with a perspective projection, creating a sense of depth. The code uses the Canvas 2D API's `fillRect` and `stroke` for drawing, alongside `requestAnimationFrame` for the animation loop and a CSS `hue-rotate` filter for the color cycling.

CCurran Kelleher

75% match