https://github.com/chrisrzhou/three-glow-mesh

🌟 Create glow mesh with any ThreeJS geometry
https://github.com/chrisrzhou/three-glow-mesh

geometry glow io mesh three threejs

Last synced: 27 days ago
JSON representation

🌟 Create glow mesh with any ThreeJS geometry

• Host: GitHub
• URL: https://github.com/chrisrzhou/three-glow-mesh
• Owner: chrisrzhou
• License: mit
• Created: 2019-06-11T01:21:23.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2020-07-26T20:04:34.000Z (over 4 years ago)
• Last Synced: 2024-10-06T11:37:07.017Z (about 1 month ago)
• Topics: geometry, glow, io, mesh, three, threejs
• Language: JavaScript
• Homepage: https://codesandbox.io/s/uz1ki
• Size: 865 KB
• Stars: 16
• Watchers: 2
• Forks: 5
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

        
# 🌟 Three Glow Mesh

Create glow mesh with any ThreeJS geometry.

![](./public/globe-glow.png)

`three-glow-mesh` is based off the awesome work by [stemkoski](https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Shader-Halo.html). The original idea and motivation is laid out by the author in this [link](http://stemkoski.blogspot.com/2013/07/shaders-in-threejs-glow-and-halo.html).

## Install

```sh

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:

```js

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](http://stemkoski.github.io/Three.js/Shader-Glow.html).

### Basic Example

[![basic-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/uz1ki)

![](./basic-glow.png)

### Globe Example

[![typescript-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y6vmj)

![](./public/globe-glow.png)