Creating and Styling Particle Systems with Three.js – Lost in Space Demo

The article introduces particle concepts in Three.js, showing how THREE.Sprite and THREE.Points can be used to generate grids of colorful squares, points, and custom shapes. It explains the performance differences between sprites and points and demonstrates how to create a THREE.BufferGeometry with position and color attributes for large particle systems.

Several code snippets illustrate the creation of particle systems:

const createParticlesBySprite = () => {
  for (let x = -15; x < 15; x++) {
    for (let y = -10; y < 10; y++) {
      const material = new THREE.SpriteMaterial({ color: Math.random() * 0xffffff });
      const sprite = new THREE.Sprite(material);
      sprite.position.set(x * 4, y * 4, 0);
      scene.add(sprite);
    }
  }
};

const createParticlesByPoints = () => {
  const geom = new THREE.BufferGeometry();
  const material = new THREE.PointsMaterial({ size: 3, vertexColors: true, color: 0xffffff });
  const positions = [];
  const colors = [];
  for (let x = -15; x < 15; x++) {
    for (let y = -10; y < 10; y++) {
      positions.push(x * 4, y * 4, 0);
      const randomColor = new THREE.Color(Math.random() * 0xffffff);
      colors.push(randomColor.r, randomColor.g, randomColor.b);
    }
  }
  geom.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
  geom.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
  const particles = new THREE.Points(geom, material);
  scene.add(particles);
};

Styling is enhanced with dat.GUI , allowing live adjustment of size, opacity, color, and other material properties. The article also shows how to generate a Canvas texture, convert it to a THREE.CanvasTexture , and apply it to particles for custom visual effects.

const createCanvasTexture = () => {
  const canvas = document.createElement('canvas');
  canvas.width = 300; canvas.height = 300;
  const ctx = canvas.getContext('2d');
  const grd = ctx.createLinearGradient(0, 0, 170, 0);
  grd.addColorStop('0', 'black');
  grd.addColorStop('0.3', 'magenta');
  // ... other color stops ...
  ctx.strokeStyle = grd;
  ctx.arc(120, 120, 50, 0, Math.PI * 2);
  ctx.stroke();
  const texture = new THREE.CanvasTexture(canvas);
  texture.needsUpdate = true;
  return texture;
};

Advanced examples include loading a GLTF astronaut model, adding fog with THREE.FogExp2 , and animating particles and the model using sine and cosine functions. Mouse movement controls the camera and astronaut position for interactive depth perception.

All source code is hosted on GitHub (github.com/dragonir/threejs-odessey) and can be previewed online via provided links.