Three.js - sphere that glows

Question

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!

Answer 1

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!

Answer 2

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.

Answer 3

Since you don't have a specific problem, I can't give you a specific answer. You seem a little lost though, so here's the thing you may be missing: In order for something to look like a source of light it must do two things:

1. Illuminate: You achieve this by creating a new Light object inside it. It is a good idea to put both your object and the light inside a new THREE.Object3D.
2. Glow: You will need to create a shader to blure the pixels around that object. I found a tutorial specific for three.js for you here: Three.js glow tutorial.

There are more advanced techniques which you could try, like adding godrays.

I wish you luck.