Search
How to Create an Interactive 3D Character with Three.js
14.10.2019
In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click.
How to Create an Interactive 3D Character with Three.js was written by Kyle Wetton and published on Codrops
Create Text in Three.js with Three-bmfont-text
10.10.2019
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
Create Text in Three.js with Three-bmfont-text was written by Mario Carrillo and published on Codrops
Creating a Water-like Distortion Effect with Three.js
8.10.2019
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Creating a Water-like Distortion Effect with Three.js was written by Daniel Velasquez and published on Codrops
Simulating Depth of Field with Particles using the Blurry Library
1.10.2019
Learn how to create a geometrical scene with a depth effect using the Blurry library.
Simulating Depth of Field with Particles using the Blurry Library was written by Domenico Bruzzese and published on Codrops
Collective #552
26.9.2019
Into the web multiverse * Productdesign.tips * unity-webgl-responsive * 3D planets with Three.js
Collective #552 was written by Pedro Botelho and published on Codrops
How to Build a Color Customizer App for a 3D Model with Three.js
17.9.2019
Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial.
How to Build a Color Customizer App for a 3D Model with Three.js was written by Kyle Wetton and published on Codrops
How to Create a Webcam Audio Visualizer with Three.js
6.9.2019
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.
How to Create a Webcam Audio Visualizer with Three.js was written by Ryota Takemoto and published on Codrops
A Configurator for Creating Custom WebGL Distortion Effects
4.9.2019
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
A Configurator for Creating Custom WebGL Distortion Effects was written by Daniel Velasquez and published on Codrops
Collective #528
1.7.2019
Bounds.js * CSS Animation Worklet API * Numverify * HTML can do that? * Using Basis Textures in Three.js
Collective #528 was written by Pedro Botelho and published on Codrops
Collective #519
27.5.2019
Subgrid is here * BioRender * React Vertex * Pointcloud effect in Three.js * GitHub Sponsors
Collective #519 was written by Pedro Botelho and published on Codrops
Creating Grid-to-Fullscreen Animations with Three.js
22.5.2019
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
Creating Grid-to-Fullscreen Animations with Three.js was written by Daniel Velasquez and published on Codrops
Collective #508
15.4.2019
Three.js Boilerplater * Pixel borders * Domain-Oriented Observability * Typora * Accessibility Events
Collective #508 was written by Pedro Botelho and published on Codrops
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber
12.4.2019
Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber was written by Paul Henschel and published on Codrops
How to Create a Sticky Image Effect with Three.js
10.4.2019
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
How to Create a Sticky Image Effect with Three.js was written by Daniel Velasquez and published on Codrops
Exploding 3D Objects with Three.js
26.3.2019
A set of WebGL demos that show an exploding 3D object animation inspired by "Kubrick Life Website: 3D Motion".
Exploding 3D Objects with Three.js was written by Yuriy Artyukh and published on Codrops
How to Create Smooth WebGL Transitions on Scroll using Phenomenon
22.3.2019
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
How to Create Smooth WebGL Transitions on Scroll using Phenomenon was written by Colin van Eenige and published on Codrops
Buildings Wave Animation with Three.js
30.1.2019
A tutorial on how to create a 3D building wave animation with three.js and TweenMax.
Buildings Wave Animation with Three.js was written by Ion D. Filho and published on Codrops
Interactive Particles with Three.js
17.1.2019
A tutorial on how to draw a large number of particles with Three.js and make them interactive.
Interactive Particles with Three.js was written by Bruno Imbrizi and published on Codrops
Animated Mesh Lines
8.1.2019
A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations.
Animated Mesh Lines was written by Jérémie Boulay and published on Codrops
Interactive Animated Landscape
20.12.2018
An exploration of an animated interactive landscape built with three.js.
Interactive Animated Landscape was written by André Mattos and published on Codrops