NASA 3D Model Viewer
An interactive viewer for NASA’s open 3D model library — spacecraft, rovers, telescopes and more — rendered in real-time WebGL with a cust
ArtechFuz3D
Video
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Links
Featured Badge
Add this badge to your website to show you are featured on Three.js Resources.
Description
NASA 3D Model Viewer
An interactive viewer for NASA’s open 3D model library — spacecraft, rovers, telescopes and more — rendered in real-time WebGL with a custom GLSL hologram shader.
────────────────────────
OVERVIEW
NASA 3D Model Viewer is a browser-based experience for exploring and interacting with NASA’s full open 3D model catalogue.
Each model loads with a signature holographic visualisation featuring:
• Scan lines
• Chromatic aberration
• Glowing edge effects
You can switch between:
• Hologram mode
• Original NASA PBR materials
• Wireframe
• Clay rendering
The viewer also includes a fully interactive procedural planet environment powered by a custom WebGL2 raymarching shader.
The entire interface is built from scratch — no UI frameworks.
────────────────────────
FEATURES
MODEL VIEWER
• Browse NASA’s open 3D model catalogue
• Search and category filters
• Automatic centering and fit-to-view
• Save favourite models
MATERIAL MODES
• Hologram (custom GLSL shader)
• Original (NASA PBR)
• Wireframe
• Clay
BACKGROUNDS
• Solid colour picker
• HDRI environment lighting
• Earth atmosphere backdrop
• Fully raymarched procedural planet
Planet presets:
• Earth
• Mars
• Ice World
• Lava World
• Alien
Toggleable effects:
• Surface detail
• Displacement
• Night lights
• Volumetric clouds
• Atmosphere
• Rings
• Moon
• Stars
────────────────────────
LIGHTING SYSTEM
Full 6-light rig:
• Ambient
• Key
• Fill
• Rim
• Point
• Spot
Each light includes:
• Colour control
• Intensity control
• On/Off toggle
• XYZ position control (point light)
────────────────────────
MOTION & SIMULATION
• Rotation (X / Y / Z)
• Linear motion (X / Y / Z)
• Circular orbit simulation
• Adjustable trajectory trail
• Independent time scale
• Reset controls
────────────────────────
CAMERA
• Orbit
• Pan
• Zoom
• Adjustable FOV
• Auto-rotate
• Preset views (Top / Front / Side / Isometric)
────────────────────────
PERFORMANCE MONITORING
Live display of:
• FPS
• Frame time
• Render time
• Memory usage
────────────────────────
EXPORT
Export the complete viewer state as JSON, including:
• Materials
• Lighting
• Background
• Motion
• Camera
• Simulation time
────────────────────────
TECH STACK
• Three.js r179
• Custom WebGL2 GLSL raymarcher
• Custom hologram shader
• Vite 7
• GLTFLoader + DRACOLoader
• RGBELoader
• GitHub Pages deployment
────────────────────────
Controls
Input Action
--------------------- ---------------
Left drag Orbit camera
Right drag Pan camera
Scroll Zoom
Left drag (planet) Rotate planet
Right drag (planet) Adjust sun
Scroll (planet) Zoom
Ctrl + drag Pan
Escape Close panels
Enter Skip intro
© ArtechFuz3D
