Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Spinning Rainbow Starfield

✓ Published0🌍 Public
NNita
Last edited Jul 29, 2025
Created on Jul 29, 2025

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.

AI-generated description

3D Starfield Flight Simulator

An immersive 3D starfield flight simulator built with Three.js featuring smooth flight controls, dynamic speed adjustment, and visual effects.

Features

  • Smooth Flight Controls: Mouse-controlled steering with realistic inertia
  • Variable Speed: Scroll to adjust flight speed, spacebar for boost
  • Visual Effects: Custom shader-rendered stars with glowing crosshair
  • Performance Optimized: Uses BufferGeometry and shaders for smooth 60fps
  • Responsive Design: Adapts to any screen size

Controls

  • Mouse Movement: Steer left/right and up/down
  • Mouse Wheel: Increase/decrease flight speed
  • Spacebar: Activate boost mode
  • Responsive: Works on desktop and mobile

Technical Details

  • Built with Three.js WebGL renderer
  • Custom vertex/fragment shaders for star rendering
  • Efficient BufferGeometry for 5000+ stars
  • Smooth interpolation and inertia systems
  • Real-time star field regeneration

Browser Support

Modern browsers with WebGL support required. Tested on:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Spinning Rainbow Starfield

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.

CCurran Kelleher
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
79% 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
79% 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
75% 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
75% 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
75% 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
73% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive galaxy visualization displays 2,000 stars arranged in a spiral pattern with a glowing center, representing stellar temperatures through color (white/blue for hot, orange for cool). Stars twinkle automatically, and hovering brightens them while clicking triggers an explosion animation. The code uses React with D3 v7's `scaleLinear` and `randomNormal` functions to position stars, while SVG filters with `feGaussianBlur` create the glow effect on the galactic center and spiral arms.

NNita
73% match