20 Exceptional Three.js Experiments

magic-cube-1167224_640

Getting the most out of advanced JavaScript APIs has come into fashion these days. Mind-blowing Chrome experiments driven by WebGL,  personal portfolios of creative art directors that are marked by high-end abstract animations based on Three.js, or just hero sections that are set in motion with the help of Tween.js, all these libraries are extremely popular nowadays.

magic-cube-1167224_640

They power projects that are so overwhelming and awe-inspiring that even the banal lack of full browser compatibility ( the majority of such projects are capable of working in its full capacity only in the latest browser versions) does not slow down this raging mainstream nor does not prevent people from loving them.  More and more developers are joining this flow, trying out its possibilities and pushing boundaries. Today we are going to take a glance at one of them and pay attention to some successful experiments with Three.js.

Three.js is a relatively lightweight and quite intuitive JavaScript library, a constant companion of projects that were created on the basis of WebGL. When it comes to dealing with 3D graphics, it is in its element. With it, it becomes possible to generate complex animations massively overload the system. It lets you manipulate and tune all the vital details of the composition such as lights, materials, shaders, cameras, objects, etc. It programmatically creates a render and charges it with dynamic behavior taking into account all the rules of geometry, perspective, and physics. To sum up, it has something to offer to any sophisticated developer.

We have compiled a collection of Three.js experiments that are available on Codepen. Some of them such as the wave of particles have already found their place in real projects while others such as the water shader are just outstanding pioneering concepts.

Many Icons in 3D Using Three.js

Many Icons
Creator: Yasunobu Ikeda a.k.a @clockmaker

Three.js Particle Test

Particle test
Creator: Eric J Nesser

Wave of Particles

wave of particles
Creator: Chris Aldridge

Three.js Particle Stream 

Particles Stream
Creator: Szenia Zadvornykh

My Three.js Practice

Transparent Globe
Creator: Esambino Wei Cheng Hsieh

Water Shader Implement in Three.js

water surface
Creator: Khangeldy

WebGL Particle Head 

Head made of particles
Creator: Robert Bue

three.js Points Anti-gravity is Applied, ver2

points anti-gravity
Creator: yoichi kobayashi

Three.js + TweenMax (Experiment)

Flipping floor
Creator: Noel Delgado

Test of Three.js and Tween.js 

Mario
Creator: cx20

Pixel Particles

Pixel Particles
Creator: Szenia Zadvornykh

3D Particles Forming Shapes

Forming shapes
Creator: Pål Smitt-Amundsen

Gridspace

Gridspace
Creator: halvves

Three.js CSS3D – Periodic Table

periodic table
Creator: i2801

Procedurally Generated Minimal Environment 

Minimal Environment
Creator: Marc Tannous

3D Panorama Viewer by Three.JS 

3d panorama
Creator: Max Chuhryaev

Ace Editor

Ace Editor
Creator: Jacob Davidson

Image Slider

Image slider
Creator: Kenji Saito

Water Shader

water shadder
Creator: Arnaud Rocca

Smoke

Smoke
Creator: Teo Litto

Nataly Birch

Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball. Visit her blog or follow her on twitter

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz