Big collection of 56 Three JS Examples
Collection of three.js (Javascript 3D library) 3D animations, water effects & more interesting code examples.
Collection
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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: -
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
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
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
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: -
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
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>
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
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
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
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
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
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
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
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: -
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
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
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: -
