Top 39 Three JS Examples

INTERACTIVE 3D BACKGROUND

This simple interactive background is made with ThreeJS and a PlaneBufferGeometry animated with Simplex noise.

See the Pen Interactive 3D background by Kevin Levron (@soju22) on CodePen.light

Author

  • Kevin Levron

Made with

  • HTML / CSS / JS (Babel)

PAGE REVEAL EFFECT

Simple 3D reveal effect. This simple effect is made with ThreeJS and TweenMax.

See the Pen Page Reveal Effect by Kevin Levron (@soju22) on CodePen.light

Author

  • Kevin Levron

Made with

  • HTML / CSS / JS (Babel)

SHOOTING STAR

Your mouse (or finger) will be a shooting star. You can change size, speed, etc. by changing parameters.

See the Pen Shooting Star by Ko.Yelie (@ko-yelie) on CodePen.light

Author

  • Ko.Yelie

Made with

  • HTML (Pug) / CSS (SCSS) / JS

FRESNEL REFRACTIVITY SPHERE

See the Pen #CodepenChallenge – "Circle": Fresnel Refractivity Sphere (GLSL + ThreeJS) by Henry Desroches (@xdesro) on CodePen.light

Author

  • Henry Desroches

Made with

  • HTML / JS

MOBILE VR POLARSCENE

See the Pen Mobile VR PolarScene by Baron (@b29) on CodePen.light

Author

  • Baron

Made with

  • HTML / CSS / JS

MOBILE VR WOODS SCENE

See the Pen Mobile VR Woods Scene by Baron (@b29) on CodePen.light

Author

  • Baron

Made with

  • HTML / CSS / JS

DISPLACEMENT SCROLL

See the Pen Displacement Scroll by Matthew Willox (@mwmwmw) on CodePen.light

Author

  • Matthew Willox

Made with

  • HTML / CSS / JS

FLYING CARROT

See the Pen #codevember 3/2018 — Flying Carrot by Noel Delgado (@noeldelgado) on CodePen.light

Author

  • Noel Delgado

Made with

  • HTML (Haml) / JS (Babel)

FASHION CONCEPT

See the Pen Fashion concept by jesper landberg (@ReGGae) on CodePen.light

Author

  • jesper landberg

Made with

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

CHEWING GUM

See the Pen Chewing gum by Fabio Ottaviani (@supah) on CodePen.light

Author

  • Fabio Ottaviani

Made with

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

STARFALL

See the Pen Starfall by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

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

SNOWFALL

See the Pen Snowfall by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

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

PINE TREE

3D pine tree with three.js.

See the Pen Three.js Pine Tree by Conner (@cluzier) on CodePen.light

Author

  • Conner

Made with

  • HTML / CSS / JavaScript

3D TREE

Three.js OBJ tree.

See the Pen Three.js OBJ Tree by Conner (@cluzier) on CodePen.light

Author

  • Conner

Made with

  • HTML / CSS / JavaScript

RIPPLE MOUSE

Ripple mouse with three.js.

See the Pen Ripple Mouse by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

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

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.

See the Pen Storm by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

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

PARTICLE MORPHING TEXT

Particle morphing text with Three.js.

See the Pen Three Particle Morphing Text by John Healey (@jhealey5) on CodePen.light

Author

  • John Healey

Made with

  • HTML / CSS (Less) / JavaScript

CITY 3D

3D city – experiment with three.js.

See the Pen City 3D by Victor Vergara (@vcomics) on CodePen.light

Author

  • Victor Vergara

Made with

  • JavaScript

PARTICLE SLIDER

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

See the Pen Three js – Particle Slider by Chien-Ju Peng (@cjp) on CodePen.light

Author

  • Chien-Ju Peng

Made with

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

RAYCASTER

Raycaster – experiment with three.js.

See the Pen Raycaster by Victor Vergara (@vcomics) on CodePen.light

Author

  • Victor Vergara

Made with

  • JavaScript

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.

See the Pen Pacman Concept by Ivan Juarez N. (@radixzz) on CodePen.light

Author

  • Ivan Juarez N.

Made with

  • JavaScript (Babel)

CRISTAL LANDS

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

See the Pen Three js Cristal Lands by Nikita Skargovskii (@nikita_ska) on CodePen.light

Author

  • Nikita Skargovskii

Made with

  • JavaScript

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 🙂

See the Pen GLSL: Coral Blooms by Liam Egan (@shubniggurath) on CodePen.light

Author

  • Liam Egan

Made with

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

ISOMETRIC ROOM

Isometric room – three.js.

See the Pen isometric room – three js by Alexia Peresson (@aperesso) on CodePen.light

Author

  • Alexia Peresson

Made with

  • HTML (Pug) / JavaScript

STABLE CURL NOISE

Stable curl noise with three.js.

See the Pen Stable Curl Noise by Tim Severien (@timseverien) on CodePen.light

Author

  • Tim Severien

Made with

  • JavaScript (Babel)

LIZA KOBRAZOVA

Little low poly sheep made with three.js. Click to jump and feel sleepy 🙂

See the Pen Cute jumping sheep with three.js by Liza Kobrazova (@elliezen) on CodePen.light

Author

  • Liza Kobrazova

Made with

  • HTML (Pug) / CSS / JavaScript

BREAKING BAD / WALTER WHITE ANIMATION

Breaking Bad / Walter White animation with three.js. Hold down the click to transform.

See the Pen Breaking Bad | Walter White | Animation by Kevoj (@kevoj) on CodePen.light

Author

  • Kevoj

Made with

  • HTML / CSS / JavaScript

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.

See the Pen THREE JS game style immersive slider selection screen by Jamie Coulter (@jcoulterdesign) on CodePen.light

Author

  • Jamie Coulte

Made with

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

3D PIXELS

Drag & drop an image or upload image to generate 3d pixels.

See the Pen 👾 3D Pixels 👾 by Shaw (@shshaw) on CodePen.light

Author

  • Shaw

Made with

  • HTML / CSS (Less) / JavaScript

NIGHT DRIVE

Take a night drive through a snowy landscape.

See the Pen Night drive 🌔+🚗 (#3December – Day 10) by Shaw (@shshaw) on CodePen.light

Author

  • Shaw

Made with

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

3D CAMPFIRE

Another warm winter scene to help me experiment with lighting, shadows and 3D within Three.js

See the Pen Campfire 🔥 (#3December – Day 9) by Shaw (@shshaw) on CodePen.light

Author

  • Shaw

Made with

  • JavaScript

WATER SHADER

Three JS water shader.

See the Pen Three js water shader by Jonathan Blair (@knoland) on CodePen.light

Author

  • Jonathan Blair

Made with

  • HTML / JavaScript

THREE.JS IMAGE TRANSITION

Shader powered image transition with three.js. Click and drag to control the animation.

See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.light

Author

  • Szenia Zadvornykh

Made with

  • HTML / CSS / JavaScript

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.

See the Pen Cat vs ball of wool by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maaloul

Made with

  • HTML / CSS / JavaScript

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.

See the Pen Sneeze the dragon by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maaloul

Made with

  • HTML / CSS / JavaScript

HOLY RUNNING COW

Press and drag to rotate the scene. Made with three.js and TweenMax.js.

See the Pen holy running cow by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maaloul

Made with

  • HTML / CSS / JavaScript

CHILL THE LION

WebGL experiment using ThreeJS. Move the fan and press to make wind, the lion will surely appreciate.

See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maalou

Made with

  • HTML / CSS / JavaScript

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.

See the Pen Paranoid vs shy birds by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maaloul

Made with

  • HTML / CSS / JavaScript

MIGHTY FISH

WebGL experiment using ThreeJs. Move your mouse right and left, top and bottom to change speed and direction.

See the Pen Mighty fish by Karim Maaloul (@Yakudoo) on CodePen.light

Author

  • Karim Maaloul

Made with

  • HTML / CSS / JavaScript

Post navigation