🌟 Three Glow Mesh

Create glow mesh with any ThreeJS geometry.

three-glow-mesh is based off the awesome work by stemkoski. The original idea and motivation is laid out by the author in this link.

Install

npm install three-glow-mesh

Note that three-glow-mesh requires three >= 0.102.0 as a peer dependency.

Use

Import createGlowMesh and supply any ThreeJS geometry and a valid options object.

Here is an example of a common way to create a glow mesh:

import { Mesh, Renderer, Scene } from 'three';
import { createGlowMesh, defaultOptions } from './three-glow-mesh';

const originalMesh = new Mesh(...);

// We can optionally import and overwrite the defaultOptions
const options = {
  ...defaultOptions,
  backside: true,
  coefficient: 0.5,
  color: 'gold',
  size: 2,
  power: 1
};
// You can reference the original mesh geometry or provide a custom one.
const glowMesh = createGlowMesh(originalMesh.geometry, options);
// You can add the glow mesh to any ThreeJS object (e.g. camera, scene),
// but it is common practice to just add and associate it with the original mesh.
originalMesh.add(glowMesh);

// three boilerplate (this is pseudocode)
const scene = new Scene();
const renderer = new WebGLRenderer({antialias: true});
scene.add(mesh);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

Examples

In the following Codesandbox instances, edit the options variables to experiment with glow effects! You can test various values of coefficient, color, power using this tool.

Basic Example

Globe Example