Collection of three.js (Javascript 3D library) code examples. Update of September 2018 collection. 12 new items.

Related Articles

Author Kevin Levron

March 17, 2019 Links demo and code 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

Author Kevin Levron

March 16, 2019 Links demo and code 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

Author Ko.Yelie

February 16, 2019 Links demo and code 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

Author Henry Desroches

February 7, 2019 Links demo and code Made with HTML / JS About a code Fresnel Refractivity Sphere Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: three.js

Author Baron

January 28, 2019 Links demo and code 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

Author Baron

January 26, 2019 Links demo and code 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

Author Matthew Willox

January 25, 2019 Links demo and code Made with HTML / CSS / JS About a code Displacement Scroll Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: three.js

Author Noel Delgado

November 5, 2018 Links demo and code

dribbble shot 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

Author jesper landberg

October 30, 2018 Links demo and code

dribbble shot 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

Author Fabio Ottaviani

October 14, 2018 Links demo and code 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

Author Liam Egan

September 13, 2018 Links demo and code 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

Author Liam Egan

September 12, 2018 Links demo and code 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

Author Conner

September 3, 2018 Links demo and code 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

Author Conner

September 2, 2018 Links demo and code 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

Author Liam Egan

July 5, 2018 Links demo and code 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

Author Liam Egan

June 5, 2018 Links demo and code 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

Author John Healey

May 16, 2018 Links demo and code 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

Author Victor Vergara

April 26, 2018 Links demo and code 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

Author Chien-Ju Peng

April 20, 2018 Links demo and code 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

Author Victor Vergara

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

Author Ivan Juarez N.

April 2, 2018 Links demo and code 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

Author Nikita Skargovskii

February 5, 2018 Links demo and code 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

Author Liam Egan

December 15, 2017 Links demo and code 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: -

Author Alexia Peresson

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

Author Tim Severien

May 26, 2017 Links demo and code 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

Author Liza Kobrazova

April 8, 2017 Links demo and code 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

Author Kevoj

April 8, 2017 Links demo and code 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: -

Author Jamie Coulte

March 14, 2017 Links demo and code 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

Author Shaw

December 18, 2016 Links demo and code 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>

Author Shaw

December 10, 2016 Links demo and code 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

Author Shaw

December 9, 2016 Links demo and code 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

Author Jonathan Blair

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

Author Szenia Zadvornykh

May 4, 2016 Links demo and code 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

Author Karim Maaloul

July 31, 2015 Links demo and code 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

Author Karim Maaloul

July 11, 2015 Links demo and code 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

Author Karim Maaloul

June 20, 2015 Links demo and code 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: -

Author Karim Maalou

June 17, 2015 Links demo and code 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

Author Karim Maaloul

June 8, 2015 Links demo and code 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