Advanced 3D Effects: Particle Morphing
In this project, which has been one of the most challenging ones for me recently, I have utilized custom shaders, particles, GLSL, and Three.js to create unique visual effects. Below, I will explain the details of these techniques and how they contribute to the overall experience.
Technologies
Three.js
GLSL
JavaScript
Vite
My Role
Three.js Developer
Client
Mr Mohaghegh
Year
2025
Location
Remote, Iran
Category
Three.js
GLSL
GSAP
My Proccess
In the first part of the project, I used particles to create an image that is formed by particles in motion.
Steps
Step 1
Next, I employed morphing techniques to transform the first image into a second one, which then moves to the right. In this section, you can try it live by hovering your mouse over the link, where the particles disperse and return to their original positions.
Step 2
In the next step, I created a tunnel effect where, by scrolling, you can dive deeper into the tunnel and view cards. You can also scroll back to see the previous set of information cards. This creates an interesting visual effect for displaying information.
Step 3
In this part, you'll see a globe, which is also created using particles. What's interesting is that by entering real geographic coordinates (latitude and longitude), you can visualize that specific point on the globe, and the camera will move accordingly to focus on that location.
Step 4
In this stage, you will see a glowing halo rotating around the Earth, which has been created using custom shaders.
