collection of three.js ( Javascript 3D library ) code examples. Update of January 2020 collection. 17 newly items .

Related Articles

Demo image: Grid Icosahedron Refraction

Author

  • alphardex
  • March 9, 2021

Links

  • demo and code

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

Author

  • Ricardo Sanprieto
  • February 10, 2021

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Interactive Particles Text

interactional particles text create with three.js .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
responsive : yes
Dependencies : three.js

Author

  • Stívali Serna
  • December 18, 2020

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

ThreeJS Animated Rocket

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
responsive : yes
Dependencies : three.js

Author

  • Dilum
  • December 10, 2020

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Xmas Ornaments

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
responsive : no
Dependencies : three.js

Author

  • Yugam
  • October 25, 2020

Links

  • demo and code

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

Demo image: Space Globe - Three.js

Author

  • isladjan
  • September 16, 2020

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Space Globe – Three.js

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
reactive : yes
Dependencies : three.js, simplex-noise.js

Author

  • Fabio Ottaviani
  • August 13, 2020

Links

  • demo and code

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

Author

  • Yuki
  • August 12, 2020

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

ThreeJS Cloud & Rain

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
reactive : yes
Dependencies : three.js

Author

  • Sikriti Dakua
  • August 10, 2020

Links

  • demo and code

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

Author

  • Ethan
  • May 25, 2020

Links

  • demo and code

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
Demo image: Low Poly Sheepfold With threeJS

Author

  • Yiting Liu
  • April 15, 2020

Links

  • demo and code

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
Demo image: Playlist Artwork For Cover Lover

Author

  • Daniel Givens
  • March 24, 2020

Links

  • demo and code

Made with

  • HTML / CSS (SCSS) / JS

About a code

Playlist Artwork For Cover Lover

experiment with 3D and shaders to create a playlist ocular .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
responsive : yes
Dependencies : three.js
Demo image: What's behind ?

Author

  • Kevin Levron
  • February 16, 2020

Links

  • demo and code

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
Demo image: Product Card - Three JS

Author

  • Ricardo Oliva Alonso
  • January 17, 2020

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Product Card – Three JS

compatible browsers : Chrome, Edge, Opera, Safari
responsive : no
Dependencies : three.js

Author

  • Baron
  • June 4, 2019

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Abandoned Planet

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
reactive : yes
Dependencies : three.js

Author

  • Kevin Levron
  • March 17, 2019

Links

  • demo and code

Made with

  • HTML / CSS / JS (Babel)

About a code

Interactive 3D Background

This simple interactional 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

elementary 3D reveal effect. This childlike effect is made with ThreeJS and TweenMax .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
reactive : 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 shiner ( or finger ) will be a tear star. You can change size, rush, 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
Demo image: Mobile VR PolarScene

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
reactive : no
Dependencies : three.js, tweenmax.js
Demo image: Mobile VR Woods Scene

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
reactive : 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
reactive : 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
reactive : 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
Demo image: Starfall

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
reactive : yes
Dependencies : three.js, ccapture.js
Demo image: Snowfall

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
reactive : yes
Dependencies : three.js, ccapture.js
Demo image: Pine Tree

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
Demo image: 3D Tree

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

  • Maxim Leyzerovich
  • August 12, 2018

Links

  • demo and code

Made with

  • HTML / CSS (SCSS) / JS

About a code

Round

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
responsive : yes
Dependencies : jquery.js, three.js
Demo image: Ripple Mouse

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
Demo image: Storm

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 material in here is fair bootstrapping. Essentially it ‘s merely setting ThreeJS up so that it renders a bland coat upon which to draw the shader. The only thing to see here actually is the uniform send to the shader. apart from that all of the magic happens in the HTML opinion under the break up shader .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : ccapture.js
Demo image: Particle Morphing Text

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
Demo image: City 3D

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
Demo image: Particle Slider

Author

  • Chien-Ju Peng
  • April 20, 2018

Links

  • demo and code

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

About the code

Particle Slider

responsive atom skidder ( flickity.js ) with three.js library .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : flickity.css, flickity.js
Demo image: Raycaster

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
Demo image: Pacman Concept

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
Demo image: Cristal Lands

Author

  • Nikita Skargovskii
  • February 5, 2018

Links

  • demo and code

Made with

  • JavaScript

About the code

Cristal Lands

Cristal lands – so far another experiment with three.js library .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : OrbitControls.js
Demo image: Coral Blooms

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 : –
Demo image: Isometric Room

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
Demo image: Stable Curl Noise

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
Demo image: Liza Kobrazova

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
Demo image: Breaking Bad / Walter White Animation

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 suction stop to transform .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : –
Demo image: 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

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
Demo image: 3D Pixels

Author

  • Shaw
  • December 18, 2016

Links

  • demo and code

Made with

  • HTML / CSS (Less) / JavaScript

About the code

3D Pixels

Drag & drop an trope or upload persona to generate 3d pixels .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : dat.gui.js, OrbitControls.js, CustomBounce.js, CustomEase.js, TweenMax.js/p >
Demo image: Night Drive

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 snow-clad landscape .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : TweenMax.js
Demo image: 3D Campfire

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 light up, shadows and 3D within Three.js
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : OrbitControls.js, TweenMax.js
Demo image: Water Shader

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
Demo image: Three.js Image Transition

Author

  • Szenia Zadvornykh
  • May 4, 2016

Links

  • demo and code

Made with

  • HTML / CSS / JavaScript

About the code

Three.js Image Transition

Shader powered trope transition with three.js. Click and drag to control the liveliness .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : bas.js, OrbitControls-2.js, TweenMax.js
Demo image: Dynamic 3D Confetti Text

Author

  • Rachel Smith
  • September 21, 2015

Links

  • demo and code

Made with

  • HTML / CSS / JS

About a code

Dynamic 3D Confetti Text

compatible browsers : Chrome, Edge, Firefox, Opera, Safari
reactive : yes
Dependencies : three.js
Demo image: Cat vs Ball of Wool

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
Demo image: Sneeze the Dragon

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, chink a debauched as possible then publish. A smoke and fire study using ThreeJS and TweenMax .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : OrbitControls.js, TweenMax.js
Demo image: Holy Running Cow

Author

  • Karim Maaloul
  • June 20, 2015

Links

  • demo and code

Made with

  • HTML / CSS / JavaScript

About the code

Holy Running Cow

compress and drag to rotate the view. Made with three.js and TweenMax.js .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : –
Demo image: Chill the Lion

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 leo will surely appreciate .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : OrbitControls.js
Demo image: Paranoid vs Shy Birds

Author

  • Karim Maaloul
  • June 8, 2015

Links

  • demo and code

Made with

  • HTML / CSS / JavaScript

About the code

Paranoid vs Shy Birds

A paranoid boo surrounded by two shy buddies with devious look. A WebGL experiment, using Three.js and a little bite of TweenMax.js .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : OrbitControls.js, TweenMax.js

Demo image: Mighty Fish

Author

  • Karim Maaloul
  • May 2, 2015

Links

  • demo and code

Made with

  • HTML / CSS / JavaScript

About the code

Mighty Fish

WebGL experiment using ThreeJs. Move your sneak right and left, top and bottom to change speed and direction .
compatible browsers : Chrome, Edge, Firefox, Opera, Safari
Dependencies : –

Leave a Reply

Your email address will not be published.