20 Exceptional Three.js Experiments

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

This article is originally published on Sep 09, 2016, and updated on Aug 14, 2020.
AUTHOR
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.

Send Comment:

JotForm Avatar

Comment:

Podo CommentBe the first to comment.