Case Study: Chang Liu Portfolio V4
by Chang Liu
Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu's new portfolio.
+ more#webgl
How to Create an Interactive 3D Character with Three.js
by Kyle Wetton
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.
+ more
Create Text in Three.js with Three-bmfont-text
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
+ more
Creating a Water-like Distortion Effect with Three.js
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
+ more
Simulating Depth of Field with Particles using the Blurry Library
Learn how to create a geometrical scene with a depth effect using the Blurry library.
+ more
Mouse Flowmap Deformation with OGL
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
+ more
Crafting Stylised Mouse Trails With OGL
How to make a WebGL mouse trail, and other important life tips...
+ more
How to Build a Color Customizer App for a 3D Model with Three.js
by Kyle Wetton
Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial.
+ more
How to Create a Webcam Audio Visualizer with Three.js
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.
+ more
A Configurator for Creating Custom WebGL Distortion Effects
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
+ more
Creating Grid-to-Fullscreen Animations with Three.js
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
+ more
How to Build an Underwater-Style Navigation Using PixiJS
by Liam Egan
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
+ more
Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber
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.
+ more
How to Create a Sticky Image Effect with Three.js
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
+ more
Exploding 3D Objects with Three.js
A set of WebGL demos that show an exploding 3D object animation inspired by "Kubrick Life Website: 3D Motion".
+ more
How to Create Smooth WebGL Transitions on Scroll using Phenomenon
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
+ more
How to Create a Fake 3D Image Effect with WebGL
Learn how to create an interactive "fake" 3D effect for images with depth maps and plain WebGL.
+ more
Text Distortion Effects using Blotter.js
by Mary Lou
Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse.
+ more