#PARTICLE PLAYGROUND 3D FULL#
#PARTICLE PLAYGROUND 3D SERIES#

This final demo uses a slightly different method for rendering the particles than the other demos.

#PARTICLE PLAYGROUND 3D FULL#

As the boxes move, the colors lose their full overlap and reveal the underlying colors (red, green, blue, and magenta). Four different color boxes are placed closely to each other and blended with additive blending to create the white color.

The movement of each box is slightly offset. This demo shows boxes being stretched based on their position.

Each particle has an arc line with a randomized length trailing behind it. This demo shows three lines of particles that form a shallow cone shape. 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. The rain drops are made out of boxes that get stretched as they fall. This demo shows a raindrop effect with rippling when they hit the surface of particles. It is twisting and untwisting while rotating. This demo shows a double helix, almost like a simplified visualization of DNA. They all spawn in the center, and then push away from each other so that they all have their own space. This demo applies some simple physics to each particle. Over time, the lines rotate and move back and forth on the on z-axis. The particle position is being set by simplex noise, with tapered off magnitude near both edges.

#PARTICLE PLAYGROUND 3D SERIES#

This demo shows a series of particles that form lines of two different colors. The particles are also moving back and forth on the z-axis. This demo shows a series of rings that are scaling and rotating with slight offsets. This is useful for working on the timing and positioning of your animations. And finally, a timescale slider is added to speed up, slow down, and pause the animation. It adds camera controls, which allow you to zoom, rotate, and pan. This will add a 3D grid to the scene, which gives a better sense of how everything is moving in 3D space. To enter debug mode, click the debug icon in the top right. My goal with this set is to show what a baseline set of particle movements can achieve, with minimal flexing of three.js. There is a lot of room to grow and expand from this fundamental starting point. Custom geometries, materials, lighting, shadows, and shaders can take these to the next level. These animations only scratch the surface of what three.js is capable of. There are also performance benefits from working with three.js/WebGL. However, adding subtle animations and positioning in a 3D perspective brings them to life. Most of these animations could be made roughly comparable with something like SVG or 2D Canvas. I hope this inspires you to make your own 3D particle animations! Benefits of three.js and a 3D Environment In these demos they are treated as site loader animations. Repeating animations like this is great for loader animations, backgrounds, and transitions. You can zoom in, zoom out, and view your animation from different perspectives to tune it perfectly. Having the concept of a camera and 3D grid can also aid in the debugging and development of your animations. And even though these can look great in 2D, adding subtle 3D perspective to your animations can make them even more visually appealing. Applying different timing offsets and easings to each part or group can make for some interesting visualizations. Making animations with a lot of small moving parts is a lot of fun.

Particle playground 3d