Collection of three.js (Javascript 3D library) code examples. Update of January 2020 collection. 17 new items.
Related Articles

Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Grid Icosahedron Refraction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js
Links
Made with
- HTML / CSS / JS
About a code
Interactive Particles Text
Interactive particles text create with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js
Links
Made with
- HTML / CSS / JS
About a code
ThreeJS Animated Rocket
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js
Links
Made with
- HTML / CSS / JS
About a code
Xmas Ornaments
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js
Links
Made with
- HTML / CSS / JS
About a code
Ghost Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, dat.gui.js

Links
Made with
- HTML / CSS / JS
About a code
Space Globe - Three.js
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, simplex-noise.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Pendulum
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js, three.js
Links
Made with
- HTML / CSS / JS
About a code
ThreeJS Cloud & Rain
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
HOME & WORK
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: gsap.js, three.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
ThreeJS Basic Character Customisation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js

Links
Made with
- HTML / CSS / JS
About a code
Low Poly Sheepfold With threeJS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js

Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Playlist Artwork For Cover Lover
Experiment with 3D and shaders to create a playlist visual.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js

Links
Made with
- HTML / CSS / JS (Babel)
About a code
What's behind ?
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: chroma.js, three.js

Links
Made with
- HTML / CSS / JS
About a code
Product Card - Three JS
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: three.js
Links
Made with
- HTML / CSS / JS
About a code
Abandoned Planet
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Interactive 3D Background
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
Links
Made with
- HTML / CSS / JS (Babel)
About a code
Page Reveal Effect
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
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About a code
Shooting Star
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
Links
Made with
- HTML / JS
About a code
Fresnel Refractivity Sphere
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js

Links
Made with
- HTML / CSS / JS
About a code
Mobile VR PolarScene
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js, tweenmax.js

Links
Made with
- HTML / CSS / JS
About a code
Mobile VR Woods Scene
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js, tweenmax.js
Links
Made with
- HTML / CSS / JS
About a code
Displacement Scroll
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js
Links
Made with
- HTML (Haml) / JS (Babel)
About a code
Flying Carrot
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Fashion Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, tweenmax.js
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Chewing Gum
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: three.js, tweenmax.js, perlin.js

Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Starfall
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, ccapture.js

Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
About a code
Snowfall
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js, ccapture.js

Links
Made with
- HTML / CSS / JavaScript
About the code
Pine Tree
3D pine tree with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: OrbitControls.js, OBJLoader.js, MTLLoader.js, BVHLoader.js

Links
Made with
- HTML / CSS / JavaScript
About the code
3D Tree
Three.js OBJ tree.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: OrbitControls.js, OBJLoader.js, MTLLoader.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Round
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, three.js

Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Ripple Mouse
Ripple mouse with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: ccapture.js

Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel.js)
About the code
Storm
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

Links
Made with
- HTML / CSS (Less) / JavaScript
About the code
Particle Morphing Text
Particle morphing text with Three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: OrbitControls.js, GeometryUtils.js, TweenMax.js

Links
Made with
- JavaScript
About the code
City 3D
3D city - experiment with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: constants.js, TweenMax.js

Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Particle Slider
Responsive particle slider (flickity.js) with three.js library.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: flickity.css, flickity.js

Links
Made with
- JavaScript
About the code
Raycaster
Raycaster - experiment with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: TweenMax.js, RectAreaLightUniformsLib.js

Links
Made with
- JavaScript (Babel)
About the code
Pacman Concept
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

Links
Made with
- JavaScript
About the code
Cristal Lands
Cristal lands - yet another experiment with three.js library.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: OrbitControls.js

Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Coral Blooms
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: -

Links
Made with
- HTML (Pug) / JavaScript
About the code
Isometric Room
Isometric room - three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jQuery.js

Links
Made with
- JavaScript (Babel)
About the code
Stable Curl Noise
Stable curl noise with three.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: GPUComputationRenderer.js, OrbitControls.js

Links
Made with
- HTML (Pug) / CSS / JavaScript
About the code
Liza Kobrazova
Little low poly sheep made with three.js. Click to jump and feel sleepy :)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: OrbitControls.js

Links
Made with
- HTML / CSS / JavaScript
About the code
Breaking Bad / Walter White Animation
Breaking Bad / Walter White animation with three.js. Hold down the click to transform.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML (Haml) / CSS (SCSS) / JavaScript
About the code
Three JS Game Style Immersive Slider Selection Screen
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

Links
Made with
- HTML / CSS (Less) / JavaScript
About the code
3D Pixels
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>

Links
Made with
- HTML / CSS (Less) / JavaScript (Babel)
About the code
Night Drive
Take a night drive through a snowy landscape.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: TweenMax.js

Links
Made with
- JavaScript
About the code
3D Campfire
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

Links
Made with
- HTML / JavaScript
About the code
Water Shader
Three JS water shader.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jQuery.js

Links
Made with
- HTML / CSS / JavaScript
About the code
Three.js Image Transition
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

Links
Made with
- HTML / CSS / JS
About a code
Dynamic 3D Confetti Text
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: three.js

Links
Made with
- HTML / CSS / JavaScript
About the code
Cat vs Ball of Wool
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

Links
Made with
- HTML / CSS / JavaScript
About the code
Sneeze the Dragon
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

Links
Made with
- HTML / CSS / JavaScript
About the code
Holy Running Cow
Press and drag to rotate the scene. Made with three.js and TweenMax.js.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -

Links
Made with
- HTML / CSS / JavaScript
About the code
Chill the Lion
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

Links
Made with
- HTML / CSS / JavaScript
About the code
Paranoid vs Shy Birds
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

Links
Made with
- HTML / CSS / JavaScript
About the code
Mighty Fish
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: -