I am trying to create a solar system in WebGL. However i have no idea to set up the lighting. I want to put a light in my sun and have it cast light 360 degrees. My planets should cast and receive shadows. To achieve that , my light would need to cast shadows 360 degrees. Is it possible to do something like that? If so, how? Which type of light should i use?

My sun has a meshBasicMaterial, my planets have a meshShaderMaterial. Could anyone be so kind to provide me some example code?

Thank you!

I am trying to create a solar system in WebGL. However i have no idea to set up the lighting. I want to put a light in my sun and have it cast light 360 degrees. My planets should cast and receive shadows. To achieve that , my light would need to cast shadows 360 degrees. Is it possible to do something like that? If so, how? Which type of light should i use?

My sun has a meshBasicMaterial, my planets have a meshShaderMaterial. Could anyone be so kind to provide me some example code?

Thank you!

• javascript
• html
• three.js
• webgl

2 Answers 2

You should add a THREE.PointLight for the sun - it will cast light to all directions.

The shadows are trickier as the point light in Three.js does not support shadow casting. You have a few less than ideal options:

• Use 6 shadow-only spot or directional lights with the shadow cameras arranged to point to each world axes (i.e. into a cube). This is going to be rather expensive.
• Use one (or more) shadow casting light that is pointed to the area of greatest interest, e.g. where the user is currently looking.
• Implement omni-directional shadow mapping yourself (e.g. dual paraboloid shadows only need two shadow maps instead of 6).
• Omit shadows. There's not really many surfaces in space that could receive shadows, so do you really need them?

Note that with a custom ShaderMaterial on a shadow-receiving object, you need to implement shadows yourself in the shader (or include three.js' shadowing code chunks).

Sounds like you would need to use an omnidirectional light.