0

I'm just wondering if anyone knows if it's possible to get a flash light effect with a THREE.SpotLight.

// Line 110
spotLight = new THREE.SpotLight(0xffffff, 0.5, 150);
spotLight.power = 6000;
spotLight.angle = 0.5;
spotLight.decay = 2;
spotLight.penumbra = 0.1;
spotLight.distance = 200;

I've set up a CodePen (http://codepen.io/anon/pen/ALXNYQ - click render window to engage pointer lock) but I want the flash light to be more realistic. Here's an image with the desired effect:

Flash Light "Ring" Effect

I've tried looking around at documentation, thinking there would be a "map" of some kind that I could load - like, maybe it would have to be an alpha map or something. I'm still fairly new to the 3D gaming world, so any help would be appreciated.

Thanks.

user973259
  • 77
  • 1
  • 7

1 Answers1

3

You can try adding more spotlights with different angles and different parameter values to create that rings effect.

spotLight = new THREE.SpotLight(0xFFFFFF, 0.5, 150);
spotLight.power = 4000;
spotLight.angle = 0.5;
.
.
.
spotLight2 = new THREE.SpotLight(0xCCCCCC, 0.5, 150);
spotLight2.power = 2000;
spotLight2.angle = 0.55;
.
.
.
flashLight.add(spotLight);
flashLight.add(spotLight.target);
flashLight.add(spotLight2);
flashLight.add(spotLight2.target);

You can see how it looks in this codepen. I think that you can achieve a similar effect to what you look for if you tweak the parameters.

guardabrazo
  • 1,219
  • 1
  • 13
  • 26
  • Do you think there would be much impact on performance? Like, if I have a scene with 7 or 8 lights already, would it be wise to have 3 lights just for my flashlight? I guess that's up to me, ultimately. But thanks for the answer, nevertheless. – user973259 Sep 18 '16 at 02:44
  • Definitely having many lights will impact on performance. You can try to disable the shadow casting of the extra spotlights. You can then monitor the performance using [Stats.js](https://github.com/mrdoob/stats.js/) – guardabrazo Sep 18 '16 at 08:31