CODEWITHSUNDEEP
javascripthtmlthree.jswebgl
user1574041
user1574041

Reputation: 257

ThreeJS creating a sun

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!

Upvotes: 2

Views: 5051

Answers (2)

zombiehugs
zombiehugs

Reputation: 717

Sounds like you would need to use an omnidirectional light.

Upvotes: 2

Tapio
Tapio

Reputation: 3456

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).

Upvotes: 5

Related Questions