CODEWITHSUNDEEP
javascriptthree.jswebgllight
Elfrey
Elfrey

Reputation: 41

Threejs: Visible light for spotlight

In my current project I need to make a visible spotlight, just like one which calls batman. I mean that cone of light, that you can see on a night sky. I haven't any graphical or 3d experience and I just can't make light visible. Would be nice if you can show me how do that or give couple advice.

Here is codepen for experiments. Thanks a lot.

P.S. I need visible whole cone, not just reflection from box.

Upvotes: 4

Views: 4186

Answers (1)

Zob
Zob

Reputation: 470

JSFiddle Demo of batsignal-type spotlight

Lights (and shadows) can be tricky for many reasons. They have many parameters and require much tweaking to look right. Just getting light to show up can be a little counter-intuitive which is why this line of code is your best friend:

light.shadowMapVisible = true;

Light objects are not visible. If you look at one, you won't see anything. If you want a sun in a sky that lights up your scene, you must create the light source and the sun object if you want something to see.

Getting light to show up usually means providing a surface upon which light can shine. In the example above, that surface is a sphere that surrounds us. In our example, we also build a yellow transparent cone to fake the beam of light. Try adding a texture to this cone to achieve greater realism. In real life, this cone would be visible as light from a spotlight reflecting off tiny particles in the air. In our 3d world, there are no particles to reflect off of unless we put them there, hence the cone. Good luck!

Tips:

  • Remember that there are many kinds of lights. Some can cast shadows, some cannot. Some affect only certain materials.

  • The renderer has a parameter called "maxLights" that defaults to 4.

Upvotes: 2

Related Questions