Neon Flow: 3D Character Texturing Experiment

How neon color maps flow across a human silhouette, built with Three.js

I built this 3D animation to test how neon color maps flow across a human body model in real time. The goal was simple: see what happens when you push vibrant textures through a digital silhouette and watch the lighting respond.

The result is a short animation where purple and blue neon patterns move across a human figure. The colors shift with the camera angle, so the surface always looks like it is in motion.

WHAT I WAS TESTING:

I wanted to find out two things:

1. How color transitions work on a 3D character mesh when they move?

2. How lighting interacts with neon textures that are always changing?

The animation uses custom shader code to make the colors move across the surface. The neon maps flow instead of sitting still, which gives it that liquid look.

THE TECHNICAL SIDE:

Everything runs in the browser with Three.js and WebGL. No plugins, no downloads.

The code handles vertex and fragment shaders for the flowing neon effect, dynamic lighting that changes with the animation, and smooth camera movement with OrbitControls. I also used SimplexNoise to generate the color patterns that flow across the model.

I loaded the human model with GLTFLoader, then applied custom materials with noise-based color transitions. The Orbitron font from Google Fonts gives the text overlay that sci-fi look.

The full working example is on JSFiddle. You can change the colors, adjust the speed, or swap out the model to see how the effect changes.

WHAT I LEARNED:

This project taught me about shader programming and how small changes in color values shift the mood of a 3D scene. The neon effect works because the colors never stop moving.

If you are working on similar projects or want to collaborate on 3D web experiments, message me here on Contra.

Built by Samin Sami | Developer & 3D Experimentation