Interactive 3D with Three.js BatchedMesh and WebGPURenderer
In Playground, by Christophe Choffel
A breakdown of a Three.js demo using BatchedMesh for efficient mesh rendering and exploring the new post-processing pipeline with TSL.
3d
Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js
In Tutorials, by Caio Bassetti
Learn how to create a full 3D hand controller with depth, using @mediapipe/hands and Three.js.
Case Study: Monolith Studio
In Articles, by Artemii Lebedev
Go behind the scenes of Monolith Studio’s bold website, created in collaboration with Artemii Lebedev, Okan Uckun, and Oscar Akermo, to discover how they brought a modern Brooklyn tattoo studio to life online.
Staggered (3D) Grid Animations with Scroll-Triggered Effects
In Playground, by Manoela Ilic
A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
Case Study: Mount Media
In Articles, by Hexagon Agency
During Mount Media’s rebranding journey, its website became the ultimate stage for showcasing its “we know how to result” vibe. Here is a long story short about teamwork behind it.
Case Study: Design Education Series
Explore how the Design Education Series (DES) by Obys Agency was developed to provide a dynamic and engaging learning experience with innovative design and 3D features.
Interactive 3D Device Showcase with Threepipe
In Tutorials, by Palash Bansal
Build a minimal 3D web application to showcase designs on a laptop and phone in an interactive environment using Three.js and threepipe.
Origami: 12 Free Animated 3D Objects
In Playground, by deadrabbbbit
A set of twelve free 3D animations created with React Three Fiber and GSAP.
On-Scroll 3D Stack Motion Effect
In Playground, by Manoela Ilic
An experimental 3D card stack animation on scroll.
Exploring 3D Effects with 2D Optical Illusions
A brief tutorial that guides you through creating a 3D visual effect using a 2D optical illusion with CSS and JavaScript.
Case Study: Ronin161’s Portfolio – 2024
A look into the making of Ronin161’s new portfolio for 2024, from ideas to code. Plus an in-depth explanation about the custom Toon Shader.
3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
In Playground, by Yuri Artiukh
Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects.
On-Scroll Perspective Grid Animations
In Playground, by Manoela Ilic
On-scroll animations for perspective image grids with different layouts.
Crafting a Dice Roller with Three.js and Cannon-es
In Tutorials, by Ksenia Kondrashova
This tutorial will guide you through the process of creating a 3D dice roller using Three.js and Cannon-es.
Rotating Twisted 3D Typography with Three.js and Shaders
In Playground, by Yuri Artiukh
A brief exploration into how to twist and rotate text in 3D using Three.js and Shader magic.
Getting Creative with Infinite Loop Scrolling
In Tutorials, by Manoela Ilic
A quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
How to Add More Fun to a Game: Extending “The Aviator”
In Tutorials, by Michel Helms
A tutorial that explores some hands-on changes of “The Aviator” game to make it more fun and engaging.
Creating the Effect of Transparent Glass and Plastic in Three.js
In Tutorials, by Kelly Milligan
Learn how to create convincing transparent, glass-like and plastic-like materials in Three.js.
