Three.js - sphere that glows
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!
karlosss
Updated on March 10, 2020Comments
-
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 likeemissive: color
andshininess: intensity
but I did not manage to code the sun. Does anyone know how to do it? Thank you for answers! -
Ravi Gidwani over 8 yearsthanks 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/…