Théo Champion
Théo Champion

Reputation: 1988

Emit light from an object

I'm making a Three.js scene in which I have stars object and I would like to be able to make them "glow".

By glow I mean make them really emit light not just put a "halo" effect around them.

I tried to put a PointLight object at the same position as the star, this make light emit from the object but as you can see, it doesn't make the object "glow" which make a weird effect. enter image description here

My current code looks like this:

class Marker extends THREE.Object3D {
  constructor() {
    super();
    // load obj model
    const loader = new OBJLoader();
    loader.load(
      "https://supersecretdomain.com/star.obj",
      object => {
        object.traverse(child => {
          if (child instanceof THREE.Mesh) {
            // child.material.map = texture;
            child.material = new THREE.MeshLambertMaterial({
              color: 0xffff00
            });
            child.scale.set(0.01, 0.01, 0.01);
          }
        });
        this.add(object);
      }
    );
    const light = new THREE.PointLight(0xffff00, 0.5, 5);
    this.add(light);
  }
}

Any idea of how to do this ? ;)

Upvotes: 4

Views: 10164

Answers (2)

manthrax
manthrax

Reputation: 5036

In addition to setting up your light, and setting the material emissive property as mentioned by Jave above..

You might want to look into the THREE PostProcessing examples.. Specifically Unreal Bloom pass... If you can get that working, it really sells the effect.

https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

Notice how the highlight glow actually bleeds into the scene around the object...

enter image description here

Upvotes: 2

Jave
Jave

Reputation: 31846

Adding a point light to the star is the correct way to make other objects be affected by its light. To make the star itself shine, you can set the emissive color of the material to something other than black (for best results, you probably want it to be the same color as the light).

Upvotes: 5

Related Questions