15 Mind-bending Three.js JavaScript Experiments

3D browser animation just keeps getting more powerful, and web developers are taking an interest. WebGL, Three.js, and other JavaScript APIs and libraries have been around for a while, but many browsers and computers didn’t have the capacity to run advanced animations without significant slowdown.

But as software and hardware becomes more effective at dealing with complex 3D environments, it’s now much more common to see websites rendering animations. Three.js is particularly useful thanks to its ability to run without any plugins. With this powerful library, web developers can create jaw-dropping animations or even simple video games.

Ready to have your mind blown? Here are a few examples of gorgeous Three.js experiments that take full advantage of the library’s capabilities.

Lab City 3D

See the Pen
City 3D by Victor Vergara (@vcomics)
on CodePen.

Playing with Sound

See the Pen
Playing with sound and three.js by Sarah Drasner (@sdras)
on CodePen.

three.js Points Anti-Gravity

See the Pen
three.js Points anti-gravity is applied ver2 by yoichi kobayashi (@ykob)
on CodePen.

WebGL Distortion Slider

See the Pen
WebGL Distortion Slider by Ash Thornton (@ashthornton)
on CodePen.

Test of Three.js and Tween.js

See the Pen
Test of Three.js and Tween.js by cx20 (@cx20)
on CodePen.

three.js canvas – particles – waves

See the Pen
three.js canvas – particles – waves by deathfang (@deathfang)
on CodePen.

WormHole

See the Pen
WormHole by Josep Antoni Bover Comas (@devildrey33)
on CodePen.

Wire Typo

See the Pen
Wire Typo by ilithya (@ilithya)
on CodePen.

THREE.js Particle Stream

See the Pen
THREE.js particle stream by Szenia Zadvornykh (@zadvorsky)
on CodePen.

Perlin Noise

See the Pen
Perlin Noise by Victor Vergara (@vcomics)
on CodePen.

Three Js Point Cloud Experiment

See the Pen
Three Js Point Cloud Experiment by Sean Dempsey (@seanseansean)
on CodePen.

Shader Moon

See the Pen
Shader Moon by Victor Vergara (@vcomics)
on CodePen.

3D Floating Typo

See the Pen
3D Floating Typo by ilithya (@ilithya)
on CodePen.

RetroFighter Gunship

See the Pen
RetroFighter Gunship by Rainner Lins (@rainner)
on CodePen.

Pixel Particles

See the Pen
Pixel Particles by Szenia Zadvornykh (@zadvorsky)
on CodePen.

Mind-Blowing Three.js Experiments

Developers are always creating awesome new code experiments that do cool new functions or are just made to look beautiful. It’s a good idea to keep up with sites like CodePen so you can see how devs are pushing the limits of libraries like Three.js. There’s always someone trying something new and interesting.

And the best part is you can also use pens in your own open source websites and projects, or learn from them yourself and try making your own experiments. Learn from your fellow developers, fork their code to try your own ideas, and you’ll quickly learn the nuances of Three.js animation.