50+ Three JS Examples - Free Code + Demos
Collection of 50+ Three JS Examples. All items are 100% free and open-source.
1. Interactive 3D Background
Author: Kevin Levron (soju22)
Links: Source Code / Demo
Created on: March 17, 2019
Made with: HTML, CSS, Babel
Tags: threejs, 3d, webgl, perlin
2. Page Reveal Effect
Author: Kevin Levron (soju22)
Links: Source Code / Demo
Created on: March 16, 2019
Made with: HTML, CSS, Babel
Tags: threejs, webgl, tweenmax
3. Shooting Star
Your mouse (or finger) will be a shooting star. You can change size, speed, etc. by changing parameters.
Author: Ko.Yelie (ko-yelie)
Links: Source Code / Demo
Created on: February 16, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: webgl, glsl
4. Fresnel Refractivity Sphere
I'l admit this is barely a circle but I think it's super cool so YEET.
Author: Henry Desroches (xdesro)
Links: Source Code / Demo
Created on: February 6, 2019
Made with: HTML, Babel
Tags: cpc-circle, codepenchallenge
5. Mobile VR PolarScene
Author: Baron (b29)
Links: Source Code / Demo
Created on: January 27, 2019
Made with: HTML, CSS, JS
Tags: threejs, webgl, vr, mobile, javascript
6. Mobile VR Woods Scene
Author: Baron (b29)
Links: Source Code / Demo
Created on: January 26, 2019
Made with: HTML, CSS, JS
7. Displacement Scroll
Author: Matthew Willox (mwmwmw)
Links: Source Code / Demo
Created on: January 25, 2019
Made with: HTML, CSS, JS
8. #codevember 3/2018 — Flying Carrot
Author: Noel Delgado (noeldelgado)
Created on: November 4, 2018
Made with: Haml, CSS, Babel
CSS Pre-processor: None
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: codevember, threejs, gsap
9. Fashion Concept
Author: jesper landberg (ReGGae)
Links: Source Code / Demo, Dribbble Shot
Created on: October 30, 2018
Made with: HTML, SCSS, Babel
10. Chewing Gum
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: October 14, 2018
Made with: HTML, SCSS, Babel
Tags: threejs, smooth shadow, perlin, noise, moprhing
11. Starfall
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: September 12, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, 2d, shader
12. Snowfall
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: September 12, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, 2d, shader
13. Three.js Pine Tree
Author: Conner (cluzier)
Links: Source Code / Demo
Created on: September 2, 2018
Made with: HTML, CSS, JS
14. Three.js OBJ Tree
Author: Conner (cluzier)
Links: Source Code / Demo
Created on: September 2, 2018
Made with: HTML, CSS, JS
15. Ripple Mouse
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: July 5, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, shader, buffer
16. Storm
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: June 5, 2018
Made with: HTML, SCSS, Babel
Tags: glsl, shader, clouds, storm, 2d
17. Three Particle Morphing Text
Author: John Healey (jhealey5)
Links: Source Code / Demo, Codepen.io
Created on: May 16, 2018
Made with: HTML, Less, JS
Tags: threejs, text, morphing
18. City 3D
Author: Victor Vergara (vcomics)
Links: Source Code / Demo
Created on: April 25, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
19. Three Js - Particle Slider
Author: Chien-Ju Peng (cjp)
Links: Source Code / Demo
Created on: April 20, 2018
Made with: HTML, SCSS, Babel
Tags: threejs, particle, slider, three
20. Raycaster
Author: Victor Vergara (vcomics)
Links: Source Code / Demo
Created on: April 19, 2018
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
21. 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...
Author: Ivan Juarez N. (radixzz)
Links: Source Code / Demo
Created on: April 2, 2018
Made with: HTML, Stylus, Babel
Tags: codepenchallenge, cpc-pac-man
22. Three Js Cristal Lands
Author: Nikita Skargovskii (nikita_ska)
Links: Source Code / Demo
Created on: February 5, 2018
Made with: HTML, CSS, JS
23. GLSL: 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 k...Read More
Author: Liam Egan (shubniggurath)
Links: Source Code / Demo
Created on: December 15, 2017
Made with: HTML, SCSS, Babel
Tags: noise, glsl, math, thebookofshaders, javascript
24. Isometric Room - Three Js
Author: Alexia Peresson (aperesso)
Links: Source Code / Demo
Created on: November 5, 2017
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
25. Stable Curl Noise
Author: Tim Severien (timseverien)
Links: Source Code / Demo
Created on: May 26, 2017
Made with: CSS, Babel
26. Cute Jumping Sheep With Three.js
Little low poly sheep made with three.js. Click to jump and feel sleepy ^^
Author: Liza Kobrazova (elliezen)
Links: Source Code / Demo
Created on: April 8, 2017
Made with: Pug, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: threejs, low-poly, sheep, cute, cloud
27. Breaking Bad | Walter White | Animation
Breaking Bad | Walter White animation with Treejs
Author: Kevoj (kevoj)
Links: Source Code / Demo
Created on: April 8, 2017
Made with: HTML, CSS, JS
Tags: javascript, breaking-bad, canvas, animation
28. 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 but that's why its here for you to look at on Codepen, I need your suggestions and opinions so I can better at using THREE. The transitions are done by using GSA...Read More
Author: Jamie Coulter (jcoulterdesign)
Links: Source Code / Demo
Created on: March 14, 2017
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: three-js, 3d, 3d slider, immersive, 3d scene
29. 👾 3D Pixels 👾
You may be tempted to call these "voxels", but don't. That's just silly.
Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: December 18, 2016
Made with: HTML, Less, JS
Tags: threejs, javascript, pixel, voxel, 3december
30. Night Drive
Take a night drive through a snowy landscape.
Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: December 9, 2016
Made with: HTML, Less, Babel
Tags: 3december, 3d, threejs, car, control
31. 3D Campfire
Another warm winter scene to help me experiment with lighting, shadows and 3D within THREE.js As @davidkpiano pointed out, if you leave this open long enough, your laptop will get warmer too. I'm calling that a feature
Author: Shaw (shshaw)
Links: Source Code / Demo
Created on: December 8, 2016
Made with: Less, JS
Tags: 3december, 3d, threejs, gsap, animation
32. Three Js Water Shader
Author: Jonathan Blair (knoland)
Links: Source Code / Demo
Created on: August 3, 2016
Made with: HTML, SCSS, JS
33. THREE Image Transition
Shader powered image transition
Author: Szenia Zadvornykh (zadvorsky)
Links: Source Code / Demo
Created on: May 4, 2016
Made with: HTML, CSS, JS
Tags: threejs, gsap, animation
34. 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. Find it here : http://babeltheking.com/ Enjoy!
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo, Babeltheking.com
Created on: July 31, 2015
Made with: HTML, CSS, JS
Tags: webgl, threejs, tweenmax, physics, inverse-kinematics
35. 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.
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo
Created on: July 11, 2015
Made with: HTML, CSS, JS
Tags: tweenmax, threejs, webgl, animation, interactive
36. Holy Running Cow
holySpaceCowsWeekend using threejs and tweenmax. rotate the camera using the mouse
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo
Created on: June 20, 2015
Made with: HTML, CSS, JS
Tags: threejs, webgl, gsap, tweenmax, animation
37. Chill The Lion
WebGL experiment using ThreeJS. Move the fan and press to make wind, the lion will surely appreciate.
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo
Created on: June 17, 2015
Made with: HTML, CSS, JS
Tags: webgl, threejs, 3d, animation, interactive
38. Paranoid Vs Shy Birds
A paranoid bird surrounded by two shy buddies with shifty look. A webgl experiment, using threejs and a little bit of TweenMax
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo
Created on: June 8, 2015
Made with: HTML, CSS, JS
Tags: threejs, webgl, tweenmax, bird, animation
39. Mighty Fish
WebGL experiment using ThreeJs. Move your mouse right and left, top and bottom to change speed and direction
Author: Karim Maaloul (Yakudoo)
Links: Source Code / Demo
Created on: May 2, 2015
Made with: HTML, CSS, JS
Tags: webgl, threejs, particles, animation
40. Three.js - Load .GLTF
from: https://threejsfundamentals.org/threejs/threejs-load-gltf.html
Author: julio (hard7777777)
Links: Source Code / Demo
Created on: September 3, 2020
Made with: HTML, CSS, JS
Tags: threejs, threejsfundamentalsorg
41. Three.js - Textured Cube - Wait For Texture
from: https://threejsfundamentals.org/threejs/threejs-textured-cube-wait-for-texture.html
Author: Chad Conway (chadley09)
Links: Source Code / Demo
Created on: September 2, 2020
Made with: HTML, CSS, JS
Tags: threejs, threejsfundamentalsorg
42. Exploding Triangles
Author: nanoshrine (nanoshrine)
Links: Source Code / Demo
Created on: August 31, 2020
Made with: HTML, JS
Tags: threejs, webgl
43. [WIP-broken On Safari] 17. Use A Video As Texture
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Made with: HTML, CSS, JS
44. 16. Animation Using GSAP
How to animate a mesh with the awesome GreenSock tool.
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: July 27, 2015
Made with: HTML, CSS, JS
Tags: threejs, gsap, greensock, animations
45. 13. DOM Interactions
How to connect some DOM elements with your 3D objects on ThreeJs. You can imagine any kind of interaction from there ! Hope you enjoy ;)
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: May 5, 2015
Made with: HTML, CSS, JS
Tags: threejs, dom, transform, canvas-club
46. 12. Particles
How to generates particles and animate them.
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: April 9, 2015
Made with: HTML, CSS, JS
Tags: threejs, particles, pointcloud, canvas-club
47. 10. Texture Map
How to use pictures as texture and how to animate it.
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: April 2, 2015
Made with: HTML, CSS, JS
Tags: threejs, texture, map, sprite, canvas-club
48. 8. Fog
What is the fog and how it affects the scene.
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: March 28, 2015
Made with: HTML, CSS, JS
Tags: threejs, three, fog, camera, canvas-club
49. 15. Load .obj File
How to load an external obj file and add it into the scene. This demo is using the plugin "OBJLoader". Don't forget to include it into your page ;)
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
Created on: June 10, 2015
Made with: HTML, CSS, JS
Tags: threejs, objloader, obj
More Awesome Lists:
Share: