A tutorial demonstrating how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using an off-screen texture.
This enhanced version now includes:
- Upload Interface: Upload your own images (JPG, PNG, WEBP, AVIF, HEIC) and transform them into interactive particle effects
- Management Dashboard: View, manage, and organize all your uploaded particle images
- Embed System: Get embeddable code for each particle effect to use on other websites
- Standalone Viewer: Each particle effect gets its own unique URL for easy sharing
- Database Storage: All images and metadata stored securely in Supabase
- Install
npm install - Run
npm start - Build
npm run build
/- Original demo with sample images/upload.html- Upload your own images/dashboard.html- Manage uploaded images/embed.html?code=<code>- View individual particle effects
- ControlKit - GUI
- gsap - animation platform
- glslify - module system for GLSL
- stats.js - performance monitor
- Three.js - WebGL library
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
Follow Bruno Imbrizi: Twitter, Codepen, GitHub
Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram