three.js
Above Particle effect from CERN BigBang Project by the Google Cultural Institute
“WebGL enables you to
render incredible 3D
scenes combining
graphics shaders and
interactivity inside a
to manage vast numbers of particle positions at high speed. Both are advanced techniques but get fantastic results. You can also create individual particle objects such as spheres, add them to the scene and manage their motion in a more manual way. You could combine image layers and sprites to always face the camera and combine all the above. For this tutorial, the approach we are going to use leverages the built-in three.js PointsMaterial and BufferGeometry. By using a single geometry for each ‘cloud’ of particles, we dramatically reduce the number of draw calls and processing time to create a great result. Using this technique means we don’t need to code GLSL; we can use built-in optimised features and easily add interactivity to our particles.
CREATE PARTICLES WITH THREE.JS In this tutorial, we’ll use three.js to render our 3D graphics in WebGL. The material and mesh types are include with three.js, so you won’t need anything extra to get started. You can grab some simple 3D models if you like to decorate your scene and optional sprite images for your particles but none of that is required to create the particle effect. So let’s jump in and get started!
SET UP A WEB SERVER It’s a good idea to run web-based code on a web server, either locally or remotely. If you don’t, you may run into cross domain or origin restrictions when loading assets. You can use simple tools like MAMP (https:// http://www.mamp.info/en/)) for both Windows and Mac, that install with a few clicks. You can also check out the three.js How To Run Things Locally docs here: https:// threejs.org/docs/#manual/en/introduction/How-to-run- things-locally.
STEP 1: GET THREE.JS Before starting the tutorial, you’ll want to download the latest version of three.js from the repository
here: https://github.com/mrdoob/Three.js/. If you want to load GLTF models, you may also want to get the GLTF loader found in the repo as well or whichever loader type you might like. However, loading models is optional for this tutorial.
Note: This code has been tested on the latest release of three.js v111.
STEP 2: GET THE HTML READY To begin, you need to set up a basic HTML file with some simple CSS to ensure it fills our screen. Also add the three.js library and the model loader if you wish to load models. Start by adding the following code to a new HTML file:
<!DOCTYPE html> <html> <head> <title>WebGL Particles</title> <style> html, body { margin: 0; padding:0; overflow: hidden; } </style> <script src=”libs/three.min.js”></script> <script src=”libs/GLTFLoader.js”></script> </head> <body> <script> // JAVASCRIPT CODE GOES HERE </script> </body> </html>
STEP 3: CREATE GLOBAL VARIABLES We’ll need a variable for the camera, a scene and renderer for the 3D scene. We’ll need the clock class to know how much time has passed between each frame. We’ll also need a two-part (Vector2) variable to hold our mouse position. Add the following code first between your JavaScript script tags:
