50+ Three JS Examples - Free Code + Demos

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

I'l admit this is barely a circle but I think it's super cool so YEET.

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

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

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

Breaking Bad | Walter White animation with Treejs

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

You may be tempted to call these "voxels", but don't. That's just silly.

Take a night drive through a snowy landscape.

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

Shader powered image transition

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!

Help the dragon to make fire, click as fast as possible then release. A smoke and fire study using ThreeJS and TweenMax.

holySpaceCowsWeekend using threejs and tweenmax. rotate the camera using the mouse

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

A paranoid bird surrounded by two shy buddies with shifty look. A webgl experiment, using threejs and a little bit of TweenMax

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

from: https://threejsfundamentals.org/threejs/threejs-load-gltf.html

from: https://threejsfundamentals.org/threejs/threejs-textured-cube-wait-for-texture.html

How to animate a mesh with the awesome GreenSock tool.

How to connect some DOM elements with your 3D objects on ThreeJs. You can imagine any kind of interaction from there ! Hope you enjoy ;)

How to generates particles and animate them.

How to use pictures as texture and how to animate it.

What is the fog and how it affects the scene.

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 ;)