Post thumbnail: 27 Three JS Examples

27 Three JS Examples

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

Related Articles

  1. Three.js Games
  2. Anime.js Examples

Demo image: Pine Tree

Author

  • Conner

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

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

Demo image: Ripple Mouse

Author

  • Liam Egan

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

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

Demo image: Particle Morphing Text

Author

  • John Healey

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

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

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

Demo image: Raycaster

Author

  • Victor Vergara

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.

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

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

Demo image: Coral Blooms

Author

  • Liam Egan

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

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

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

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

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: -

Demo image: Three JS Game Style Immersive Slider Selection Screen

Author

  • Jamie Coulte

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

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>

Demo image: Night Drive

Author

  • Shaw

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

Demo image: 3D Campfire

Author

  • Shaw

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

Demo image: Water Shader

Author

  • Jonathan Blair

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

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

Demo image: Cat vs Ball of Wool

Author

  • Karim Maaloul

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

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

Demo image: Holy Running Cow

Author

  • Karim Maaloul

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: -

Demo image: Chill the Lion

Author

  • Karim Maalou

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

Demo image: Paranoid vs Shy Birds

Author

  • Karim Maaloul

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

Demo image: Mighty Fish

Author

  • Karim Maaloul

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: -

back to top