Collection of three.js (Javascript 3D library) code examples

Welcome to our collection of JavaScript examples! In this meticulously curated compilation, we have assembled a diverse range of JavaScript code snippets that showcase the flexibility and power of this dynamic programming language.

Grid Icosahedron Refraction

Grid Icosahedron Refraction

Author:
alphardex | March 9, 2021
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
Made with:
HTML / CSS / JS

About a code

Interactive particles text create with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js

ThreeJS Animated Rocket

Author:
Stívali Serna | December 18, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js

Xmas Ornaments

Author:
Dilum | December 10, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js

Ghost Card

Author:
Yugam | October 25, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js, dat.gui.js
Space Globe - Three.js

Space Globe - Three.js

Author:
isladjan | September 16, 2020
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
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
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
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
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js
Low Poly Sheepfold With threeJS

Low Poly Sheepfold With threeJS

Author:
Yiting Liu | April 15, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js
Playlist Artwork For Cover Lover

Playlist Artwork For Cover Lover

Author:
Daniel Givens | March 24, 2020
Made with:
HTML / CSS (SCSS) / JS

About a code

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 ?

What's behind ?

Author:
Kevin Levron | February 16, 2020
Made with:
HTML / CSS / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
chroma.js, three.js
Product Card - Three JS

Product Card - Three JS

Author:
Ricardo Oliva Alonso | January 17, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Opera, Safari
Responsive:
no
Dependencies:
three.js

Abandoned Planet

Author:
Baron | June 4, 2019
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
Made with:
HTML / CSS / JS (Babel)

About a code

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
Made with:
HTML / CSS / JS (Babel)

About a code

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
Made with:
HTML (Pug) / CSS (SCSS) / JS

About a code

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
Made with:
HTML / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js
Mobile VR PolarScene

Mobile VR PolarScene

Author:
Baron | January 28, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js, tweenmax.js
Mobile VR Woods Scene

Mobile VR Woods Scene

Author:
Baron | January 26, 2019
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
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
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
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
Made with:
HTML / CSS (SCSS) / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
three.js, tweenmax.js, perlin.js
Starfall

Starfall

Author:
Liam Egan | September 13, 2018
Made with:
HTML / CSS (SCSS) / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js, ccapture.js
Snowfall

Snowfall

Author:
Liam Egan | September 12, 2018
Made with:
HTML / CSS (SCSS) / JS (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js, ccapture.js
Pine Tree

Pine Tree

Author:
Conner | September 3, 2018
Made with:
HTML / CSS / JavaScript

About a code

3D pine tree with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
OrbitControls.js, OBJLoader.js, MTLLoader.js, BVHLoader.js
3D Tree

3D Tree

Author:
Conner | September 2, 2018
Made with:
HTML / CSS / JavaScript

About a code

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
Made with:
HTML / CSS (SCSS) / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js, three.js
Ripple Mouse

Ripple Mouse

Author:
Liam Egan | July 5, 2018
Made with:
HTML / CSS (SCSS) / JavaScript (Babel)

About a code

Ripple mouse with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
ccapture.js
Storm

Storm

Author:
Liam Egan | June 5, 2018
Made with:
HTML / CSS (SCSS) / JavaScript (Babel.js)

About a code

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

Particle Morphing Text

Author:
John Healey | May 16, 2018
Made with:
HTML / CSS (Less) / JavaScript

About a code

Particle morphing text with Three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
OrbitControls.js, GeometryUtils.js, TweenMax.js
City 3D

City 3D

Author:
Victor Vergara | April 26, 2018
Made with:
JavaScript

About a code

3D city - experiment with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
constants.js, TweenMax.js
Particle Slider

Particle Slider

Author:
Chien-Ju Peng | April 20, 2018
Made with:
HTML / CSS (SCSS) / JavaScript (Babel)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
flickity.css, flickity.js
Raycaster

Raycaster

Author:
Victor Vergara | April 19, 2018
Made with:
JavaScript

About a code

Raycaster - experiment with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
TweenMax.js, RectAreaLightUniformsLib.js
Pacman Concept

Pacman Concept

Author:
Ivan Juarez N. | April 2, 2018
Made with:
JavaScript (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
EffectComposer.js, UnrealBloomPass.js, perlin.js, THREE.MeshLine.js, TweenMax.js
Cristal Lands

Cristal Lands

Author:
Nikita Skargovskii | February 5, 2018
Made with:
JavaScript

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
OrbitControls.js
Coral Blooms

Coral Blooms

Author:
Liam Egan | December 15, 2017
Made with:
HTML / CSS (SCSS) / JavaScript (Babel)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Isometric Room

Isometric Room

Author:
Alexia Peresson | November 5, 2017
Made with:
HTML (Pug) / JavaScript

About a code

Isometric room - three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
jQuery.js
Stable Curl Noise

Stable Curl Noise

Author:
Tim Severien | May 26, 2017
Made with:
JavaScript (Babel)

About a code

Stable curl noise with three.js.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
GPUComputationRenderer.js, OrbitControls.js
Liza Kobrazova

Liza Kobrazova

Author:
Liza Kobrazova | April 8, 2017
Made with:
HTML (Pug) / CSS / JavaScript

About a code

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

Breaking Bad / Walter White Animation

Author:
Kevoj | April 8, 2017
Made with:
HTML / CSS / JavaScript

About a code

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

Three JS Game Style Immersive Slider Selection Screen

Author:
Jamie Coulte | March 14, 2017
Made with:
HTML (Haml) / CSS (SCSS) / JavaScript

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css, OrbitControls.js, jquery.js, TweenMax.js
3D Pixels

3D Pixels

Author:
Shaw | December 18, 2016
Made with:
HTML / CSS (Less) / JavaScript

About a code

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

Night Drive

Author:
Shaw | December 10, 2016
Made with:
HTML / CSS (Less) / JavaScript (Babel)

About a code

Take a night drive through a snowy landscape.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
TweenMax.js
3D Campfire

3D Campfire

Author:
Shaw | December 9, 2016
Made with:
JavaScript

About a code

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

Water Shader

Author:
Jonathan Blair | August 3, 2016
Made with:
HTML / JavaScript

About a code

Three JS water shader.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
jQuery.js
Three.js Image Transition

Three.js Image Transition

Author:
Szenia Zadvornykh | May 4, 2016
Made with:
HTML / CSS / JavaScript

About a code

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

Dynamic 3D Confetti Text

Author:
Rachel Smith | September 21, 2015
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
three.js

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨