Learn Three.js for 3D Computer Graphics/

...

/

Using Textures to Style Particles

Using Textures to Style Particles

Learn how to use multiple textures to style particles.

We'll cover the following...

Using image as texture

We saw how to style THREE.Points using an HTML canvas. Because we can draw anything we want and even load external images, we can use this approach to add all kinds of styles to the particle system. There is, however, a more direct way to use an image to style our particles: We can use the THREE.TextureLoader().load() function to load an image as a THREE.Texture object. This THREE.Texture object can then be assigned to the map property of a material.

In this lesson, we’ll show two examples and explain how to create them. Both these examples use an image as a texture for our particles. In the first example, we’ll create a simulation of rain:

Press + to interact
Simulating rain falling down
Simulating rain falling down

Example: Rain droplets

Let’s execute the rain.js example in the playground below by clicking the “Run” button:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-7': './samples/chapters/chapter-7/rain.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Simulate rain droplets on the canvas

Note: We can change the properties of the animation from the right control panel in the output screen.

Creating raindrop

The first thing we need is a texture that will represent our raindrop. We can find a couple of examples in the assets/textures/particles folder (in the above playground). For now, all we need to know is that the texture should be square and preferably a power of 2 (for example, ...