3D Particle Explorations

This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes.

The Concept

Making animations with a lot of small moving parts is a lot of fun. Applying different timing offsets and easings to each part or group can make for some interesting visualizations. And even though these can look great in 2D, adding subtle 3D perspective to your animations can make them even more visually appealing. Having the concept of a camera and 3D grid can also aid in the debugging and development of your animations. You can zoom in, zoom out, and view your animation from different perspectives to tune it perfectly.

Repeating animations like this is great for loader animations, backgrounds, and transitions. In these demos they are treated as site loader animations. I hope this inspires you to make your own 3D particle animations!

Benefits of three.js and a 3D Environment

Most of these animations could be made roughly comparable with something like SVG or 2D Canvas. However, adding subtle animations and positioning in a 3D perspective brings them to life. There are also performance benefits from working with three.js/WebGL. These animations only scratch the surface of what three.js is capable of. Custom geometries, materials, lighting, shadows, and shaders can take these to the next level. There is a lot of room to grow and expand from this fundamental starting point.

My goal with this set is to show what a baseline set of particle movements can achieve, with minimal flexing of three.js.

Debug Mode: Grid, Camera, and Timescale

To enter debug mode, click the debug icon in the top right. This will add a 3D grid to the scene, which gives a better sense of how everything is moving in 3D space. It adds camera controls, which allow you to zoom, rotate, and pan. And finally, a timescale slider is added to speed up, slow down, and pause the animation. This is useful for working on the timing and positioning of your animations.

#1: Rotating and Scaling Rings

This demo shows a series of rings that are scaling and rotating with slight offsets. The particles are also moving back and forth on the z-axis.

#2: Simplex Noise Lines

This demo shows a series of particles that form lines of two different colors. The particle position is being set by simplex noise, with tapered off magnitude near both edges. Over time, the lines rotate and move back and forth on the on z-axis.

#3: Circle Separations

This demo applies some simple physics to each particle. They all spawn in the center, and then push away from each other so that they all have their own space.

#4: Twisting Double Helix

This demo shows a double helix, almost like a simplified visualization of DNA. It is twisting and untwisting while rotating.

#5: Raindrops and Ripples

This demo shows a raindrop effect with rippling when they hit the surface of particles. The rain drops are made out of boxes that get stretched as they fall. When they hit, a ripple object is made that has a ring, and an invisible sphere that grows out that affects the particle positions and opacity.

#6: Spinning Fan

This demo shows three lines of particles that form a shallow cone shape. Each particle has an arc line with a randomized length trailing behind it.

#7: Square Lattice Blending

This demo shows boxes being stretched based on their position. The movement of each box is slightly offset. Four different color boxes are placed closely to each other and blended with additive blending to create the white color. As the boxes move, the colors lose their full overlap and reveal the underlying colors (red, green, blue, and magenta).

#8: Simplex Noise Particle System

This final demo uses a slightly different method for rendering the particles than the other demos. It uses THREE.BufferGeometry() and THREE.Points(), which allows us to render more particles at once and keep good performance. The particle movement is determined by simplex noise. Finally, additive blending is used to create a brighter effect when the particles overlap.

References and Credits

• three.js
• fast-simplex-noise.js
• Robert Penner’s Easing Functions