Three.js - a sphere that glows

Question

I have a problem. I want to create a sphere that works as a source of light (the sun). I found out that meshPhongMaterial has features like emissive: color and shininess: intensity , but I was unable to encode the sun. Does anyone know how to do this? Thanks for answers!

Answer 1

The meshPhong material has “emissive” and “shininess” parameters that affect the calculations in the material shader, but this will not give you the effect you want, they are just used to calculate the final color.

You can place the spotlight, for example, in the exact position as a sphere so that it illuminates the object around it. However, if you want to achieve the effect of a luminous sphere, you will need to write a post-processing shader:

• Change sphere to framebuffer 1.
• Mark the same sphere as the colored yellow (or some other bright color) for framebuffer 2.
• Blurring content in framebuffer 2 as a post-processing effect.
• Mix the original image (framebuffer 1) and the blurry framebuffer 2 to get the final image.

In addition, some examples do not use actual post-processing to achieve the glow, but they use a trick.

You render the sphere, and then render the square with the aura glow texture in the back. Visit: http://threegraphs.com/charts/sample/world/ to see how you can simulate a glow and create a circle around an eclipse around a sphere.

Answer 2

If you want to create a glow effect, I have some examples at http://stemkoski.imtqy.com/Three.js/ that may be useful, including:

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

as well as stronger atmospheric effects

http://stemkoski.imtqy.com/Three.js/Atmosphere.html
and
http://stemkoski.imtqy.com/Three.js/Shader-Halo.html

Hope this helps!

Answer 3

Since you have no specific problem, I cannot give you a specific answer. You seem to have lost a bit, so here is what you might miss: in order for something to look like a light source, it has to do two things:

• Illuminate: You achieve this by creating a new Light object in it. It is a good idea to put both your object and light in the new THREE.Object3D.
• Glow: you need to create a shader to blur the pixels around this object. I found for you a trick specifically designed for three. Js: Tutorial 3D.js glow .

There are more sophisticated methods that you could try, such as adding godrays .

I wish you good luck.