- INTERACTIVE 3D BACKGROUND
- PAGE REVEAL EFFECT
- SHOOTING STAR
- FRESNEL REFRACTIVITY SPHERE
- MOBILE VR POLARSCENE
- MOBILE VR WOODS SCENE
- DISPLACEMENT SCROLL
- FLYING CARROT
- FASHION CONCEPT
- CHEWING GUM
- STARFALL
- SNOWFALL
- PINE TREE
- 3D TREE
- RIPPLE MOUSE
- STORM
- PARTICLE MORPHING TEXT
- CITY 3D
- PARTICLE SLIDER
- RAYCASTER
- PACMAN CONCEPT
- CRISTAL LANDS
- ISOMETRIC ROOM
- STABLE CURL NOISE
- LIZA KOBRAZOVA
- BREAKING BAD / WALTER WHITE ANIMATION
- 3D PIXELS
- NIGHT DRIVE
- 3D CAMPFIRE
- WATER SHADER
- THREE.JS IMAGE TRANSITION
- SNEEZE THE DRAGON
- HOLY RUNNING COW
- CHILL THE LION
- PARANOID VS SHY BIRDS
- MIGHTY FISH
INTERACTIVE 3D BACKGROUND
This simple interactive background is made with ThreeJS and a PlaneBufferGeometry animated with Simplex noise.
Links
Made with
- HTML / CSS / JS (Babel)
PAGE REVEAL EFFECT
Simple 3D reveal effect. This simple effect is made with ThreeJS and TweenMax.
Links
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.
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
FRESNEL REFRACTIVITY SPHERE
Links
Made with
- HTML / JS
MOBILE VR POLARSCENE
Links
Made with
- HTML / CSS / JS
MOBILE VR WOODS SCENE
Links
Made with
- HTML / CSS / JS
DISPLACEMENT SCROLL
Links
Made with
- HTML / CSS / JS
FLYING CARROT
Links
Made with
- HTML (Haml) / JS (Babel)
FASHION CONCEPT
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
CHEWING GUM
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
STARFALL
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
SNOWFALL
Links
Made with
- HTML / CSS (SCSS) / JS (Babel)
PINE TREE
3D pine tree with three.js.
Links
Made with
- HTML / CSS / JavaScript
3D TREE
Three.js OBJ tree.
Links
Made with
- HTML / CSS / JavaScript
RIPPLE MOUSE
Ripple mouse with three.js.
Links
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.
Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel.js)
PARTICLE MORPHING TEXT
Particle morphing text with Three.js.
Links
Made with
- HTML / CSS (Less) / JavaScript
CITY 3D
3D city – experiment with three.js.
Links
Made with
- JavaScript
PARTICLE SLIDER
Responsive particle slider (flickity.js) with three.js library.
Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
RAYCASTER
Raycaster – experiment with three.js.
Links
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.
Links
Made with
- JavaScript (Babel)
CRISTAL LANDS
Cristal lands – yet another experiment with three.js library.
Links
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
Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
ISOMETRIC ROOM
Isometric room – three.js.
Links
Made with
- HTML (Pug) / JavaScript
STABLE CURL NOISE
Stable curl noise with three.js.
Links
Made with
- JavaScript (Babel)
LIZA KOBRAZOVA
Little low poly sheep made with three.js. Click to jump and feel sleepy
Links
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.
Links
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.
Links
Made with
- HTML (Haml) / CSS (SCSS) / JavaScript
3D PIXELS
Drag & drop an image or upload image to generate 3d pixels.
Links
Made with
- HTML / CSS (Less) / JavaScript
NIGHT DRIVE
Take a night drive through a snowy landscape.
Links
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
Links
Made with
- JavaScript
WATER SHADER
Three JS water shader.
Links
Made with
- HTML / JavaScript
THREE.JS IMAGE TRANSITION
Shader powered image transition with three.js. Click and drag to control the animation.
Links
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.
Links
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.
Links
Made with
- HTML / CSS / JavaScript
HOLY RUNNING COW
Press and drag to rotate the scene. Made with three.js and TweenMax.js.
Links
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.
Links
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.
Links
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.
Links
Made with
- HTML / CSS / JavaScript