Three.js - sphere that glows

28,827

Solution 1

meshPhong material has parameters 'emissive' and 'shininess' that affect the calculations within material shader, but those won't give you the effect that you want, they are just used for calculating final color.

You can put spotlight, for example, at the exact position as the sphere, so it would lighten up object around it. However, if you want to achieve the effect of glowing sphere, you would have to write post-processing shader:

  • Render sphere to framebuffer 1.
  • Render same sphere colored yellow (or some other bright color) to framebuffer 2.
  • Blur content in framebuffer 2 as post-processing effect.
  • Blend original image (framebuffer 1) and blurred framebuffer 2 together to produce the final image.

Also, some examples don't use actual post-processing to achieve glowing, but they use trick.

You render sphere and then render some quad with "glow aura" texture in the back. Visit: http://threegraphs.com/charts/sample/world/ to see how you can maybe simulate glow and create eclipse-like circle around sphere.

Solution 2

If you are looking to create a glow-style effect, I have a written a number of examples at http://stemkoski.github.io/Three.js/ that may be helpful, including:

http://stemkoski.github.io/Three.js/Selective-Glow.html
with accompanying blog post
http://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html

as well as the more atmospheric-style glow effects

http://stemkoski.github.io/Three.js/Atmosphere.html
and
http://stemkoski.github.io/Three.js/Shader-Halo.html

Hope this helps!

Share:
28,827
karlosss
Author by

karlosss

Updated on March 10, 2020

Comments

  • karlosss
    karlosss about 4 years

    I have a problem. I want to make a sphere which works like a source of light (sun). I found out that meshPhongMaterial has an option like emissive: color and shininess: intensity but I did not manage to code the sun. Does anyone know how to do it? Thank you for answers!

  • Ravi Gidwani
    Ravi Gidwani over 8 years
    thanks for all your work. I always endup going there to learn more about how to do certain things in threejs. For the glow example, how do you do that for compound objects e.g I have molecular structure that are made up of buffered merged geometry, I am trying to create a charge cloud similar to the one shown the image below. Any pointers how I should go about it? Morph spheres? if so how? any other approaches? en.wikipedia.org/wiki/Chemical_polarity#/media/…