Collection
Post cover
Created 6 month back

Big collection of 56 Three JS Examples

Collection of three.js (Javascript 3D library) 3D animations, water effects & more interesting code examples.

Interactive 3D Background

Author: Kevin Levron; March 17, 2019

Links: demo and code

Made with: HTML / CSS / JS (Babel)

This simple interactive background is made with ThreeJS and a PlaneBufferGeometry animated with Simplex noise.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, simplex-noise.js, chroma.js

Post cover

Isometric Room

Author: Alexia Peresson; November 5, 2017

Links: demo and code

Made with: HTML (Pug) / JavaScript

Isometric room - three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jQuery.js

ThreeJS Basic Character Customisation

Author: Ethan; May 25, 2020

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Post cover

Pine Tree

Author: Conner; September 3, 2018

Links: demo and code

Made with: HTML / CSS / JavaScript

3D pine tree with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, OBJLoader.js, MTLLoader.js, BVHLoader.js

Post cover

Space Globe - Three.js

Author: isladjan; September 16, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, simplex-noise.js

Pendulum

Author: Fabio Ottaviani; August 13, 2020

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js, three.js

Post cover

Holy Running Cow

Author: Karim Maaloul; June 20, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

Press and drag to rotate the scene. Made with three.js and TweenMax.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Post cover

Product Card - Three JS

Author: Ricardo Oliva Alonso; January 17, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: three.js

Xmas Ornaments

Author: Dilum; December 10, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Post cover

Grid Icosahedron Refraction

Author: alphardex; March 9, 2021

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (TypeScript)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Post cover

Pacman Concept

Author: Ivan Juarez N.; April 2, 2018

Links: demo and code

Made with: JavaScript (Babel)

I wanted to see if I could do a minigame about pac-man with a little twist but somehow ended by doing this cube maze with sparking lights and colors. Then I realize It could be used as the game menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: EffectComposer.js, UnrealBloomPass.js, perlin.js, THREE.MeshLine.js, TweenMax.js

Post cover

Storm

Author: Liam Egan; June 5, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JavaScript (Babel.js)

Most of the stuff in here is just bootstrapping. Essentially it's just setting ThreeJS up so that it renders a flat surface upon which to draw the shader. The only thing to see here really is the uniforms sent to the shader. Apart from that all of the magic happens in the HTML view under the fragment shader.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ccapture.js

Post cover

3D Campfire

Author: Shaw; December 9, 2016

Links: demo and code

Made with: JavaScript

Another warm winter scene to help me experiment with lighting, shadows and 3D within Three.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, TweenMax.js

Post cover

Paranoid vs Shy Birds

Author: Karim Maaloul; June 8, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

A paranoid bird surrounded by two shy buddies with shifty look. A WebGL experiment, using Three.js and a little bit of TweenMax.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, TweenMax.js

Post cover

Mobile VR PolarScene

Author: Baron; January 28, 2019

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js, tweenmax.js

Post cover

Raycaster

Author: Victor Vergara; April 19, 2018

Links: demo and code

Made with: JavaScript

Raycaster - experiment with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: TweenMax.js, RectAreaLightUniformsLib.js

Post cover

Particle Slider

Author: Chien-Ju Peng; April 20, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JavaScript (Babel)

Responsive particle slider (flickity.js) with three.js library.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: flickity.css, flickity.js

Post cover

Cat vs Ball of Wool

Author: Karim Maaloul; July 31, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

WebGL demo using ThreeJs. With inverse kinematics, physics and a lot of cat psychology :) This cat is a 3D remake of the main character of "Babel, the cat who would be king", a children app I did some time ago.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, cat.js, TweenMax.min.js

Post cover

Night Drive

Author: Shaw; December 10, 2016

Links: demo and code

Made with: HTML / CSS (Less) / JavaScript (Babel)

Take a night drive through a snowy landscape.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: TweenMax.js

Post cover

Coral Blooms

Author: Liam Egan; December 15, 2017

Links: demo and code

Made with: HTML / CSS (SCSS) / JavaScript (Babel)

Extreme fractal noise distortions. Sort of looks like coral blooms on the surface of a dark ocean. Move your mouse to increase the speed of the simulation. I would appreciate it, if you end up using this code in any sort of production situation, that you cite me in your code and let me know what you've used it for. I love seeing that people actually get use out of the things that I write, and I don't think it's too much to ask that I get a citation for my troubles :)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Post cover

Particle Morphing Text

Author: John Healey; May 16, 2018

Links: demo and code

Made with: HTML / CSS (Less) / JavaScript

Particle morphing text with Three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, GeometryUtils.js, TweenMax.js

Post cover

Starfall

Author: Liam Egan; September 13, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, ccapture.js

Post cover

Stable Curl Noise

Author: Tim Severien; May 26, 2017

Links: demo and code

Made with: JavaScript (Babel)

Stable curl noise with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: GPUComputationRenderer.js, OrbitControls.js

Post cover

Ripple Mouse

Author: Liam Egan; July 5, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JavaScript (Babel)

Ripple mouse with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ccapture.js

Shooting Star

Author: Ko.Yelie; February 16, 2019

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Your mouse (or finger) will be a shooting star. You can change size, speed, etc. by changing parameters.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, dat.gui.js

Post cover

What's behind ?

Author: Kevin Levron; February 16, 2020

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: chroma.js, three.js

HOME & WORK

Author: Sikriti Dakua; August 10, 2020

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: gsap.js, three.js

Post cover

Sneeze the Dragon

Author: Karim Maaloul; July 11, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

Help the dragon to make fire, click as fast as possible then release. A smoke and fire study using ThreeJS and TweenMax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, TweenMax.js

ThreeJS Animated Rocket

Author: Stivali Serna; December 18, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Post cover

Mighty Fish

Author: Karim Maaloul; May 2, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

WebGL experiment using ThreeJs. Move your mouse right and left, top and bottom to change speed and direction.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Post cover

Breaking Bad / Walter White Animation

Author: Kevoj; April 8, 2017

Links: demo and code

Made with: HTML / CSS / JavaScript

Breaking Bad / Walter White animation with three.js. Hold down the click to transform.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Round

Author: Maxim Leyzerovich; August 12, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, three.js

Post cover

Three JS Game Style Immersive Slider Selection Screen

Author: Jamie Coulte; March 14, 2017

Links: demo and code

Made with: HTML (Haml) / CSS (SCSS) / JavaScript

This is my first proper crack at creating something in THREE.js! You'll probably find a lot of the JS is sloppy and unoptimized.
The transitions are done by using GSAP's timeline max and the 3D UI is built using my deepUI JS plugin.
I honestly have no idea how I got to the final product. The concept began as just a simple product slider in THREE JS and eventually became more and more complicated as the development went on. The game the scene apparently belongs to is completely fictional and none of this will be used in production of course.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, OrbitControls.js, jquery.js, TweenMax.js

Ghost Card

Author: Yugam; October 25, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, dat.gui.js

Post cover

Water Shader

Author: Jonathan Blair; August 3, 2016

Links: demo and code

Made with: HTML / JavaScript

Three JS water shader.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jQuery.js

Post cover

3D Tree

Author: Conner; September 2, 2018

Links: demo and code

Made with: HTML / CSS / JavaScript

Three.js OBJ tree.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js, OBJLoader.js, MTLLoader.js

Abandoned Planet

Author: Baron; June 4, 2019

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Post cover

Liza Kobrazova

Author: Liza Kobrazova; April 8, 2017

Links: demo and code

Made with: HTML (Pug) / CSS / JavaScript

Little low poly sheep made with three.js. Click to jump and feel sleepy :)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js

Post cover

Snowfall

Author: Liam Egan; September 12, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, ccapture.js

Post cover

Three.js Image Transition

Author: Szenia Zadvornykh; May 4, 2016

Links: demo and code

Made with: HTML / CSS / JavaScript

Shader powered image transition with three.js. Click and drag to control the animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bas.js, OrbitControls-2.js, TweenMax.js

Displacement Scroll

Author: Matthew Willox; January 25, 2019

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Post cover

3D Pixels

Author: Shaw; December 18, 2016

Links: demo and code

Made with: HTML / CSS (Less) / JavaScript

Drag & drop an image or upload image to generate 3d pixels.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: dat.gui.js, OrbitControls.js, CustomBounce.js, CustomEase.js, TweenMax.js/p>

Post cover

City 3D

Author: Victor Vergara; April 26, 2018

Links: demo and code

Made with: JavaScript

3D city - experiment with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: constants.js, TweenMax.js

Fresnel Refractivity Sphere

Author: Henry Desroches; February 7, 2019

Links: demo and code

Made with: HTML / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

Post cover

Low Poly Sheepfold With threeJS

Author: Yiting Liu; April 15, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js

ThreeJS Cloud & Rain

Author: Yuki; August 12, 2020

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Page Reveal Effect

Author: Kevin Levron; March 16, 2019

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Simple 3D reveal effect. This simple effect is made with ThreeJS and TweenMax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, three.js, tweenmax.js

Post cover

Dynamic 3D Confetti Text

Author: Rachel Smith; September 21, 2015

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Chewing Gum

Author: Fabio Ottaviani; October 14, 2018

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js, tweenmax.js, perlin.js

Flying Carrot

Author: Noel Delgado; November 5, 2018

Links: demo and code, dribbble shot

Made with: HTML (Haml) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js, tweenmax.js

Fashion Concept

Author: jesper landberg; October 30, 2018

Links: demo and code, dribbble shot

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js, tweenmax.js

Interactive Particles Text

Author: Ricardo Sanprieto; February 10, 2021

Links: demo and code

Made with: HTML / CSS / JS

Interactive particles text create with three.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Post cover

Chill the Lion

Author: Karim Maalou; June 17, 2015

Links: demo and code

Made with: HTML / CSS / JavaScript

WebGL experiment using ThreeJS. Move the fan and press to make wind, the lion will surely appreciate.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js

Post cover

Cristal Lands

Author: Nikita Skargovskii; February 5, 2018

Links: demo and code

Made with: JavaScript

Cristal lands - yet another experiment with three.js library.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: OrbitControls.js

Post cover

Mobile VR Woods Scene

Author: Baron; January 26, 2019

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: three.js, tweenmax.js

Post cover

Playlist Artwork For Cover Lover

Author: Daniel Givens; March 24, 2020

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Experiment with 3D and shaders to create a playlist visual.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: three.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback