# Flashlight Follow Camera

**URL:** <https://forum.babylonjs.com/t/flashlight-follow-camera/20623>\
**Category:** Questions\
**Created:** [May 6, 2021, 6:36pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623 "2021-05-06T18:36:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Schmitt](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tom_schmitt/32/11771_2.png) [@Tom\_Schmitt](https://forum.babylonjs.com/u/Tom_Schmitt)\
**Post date:** [May 6, 2021, 6:36pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/1 "2021-05-06T18:36:08Z")

</div>

Hi, I’d like to build some kind of flashlight or Torch effect where the ground is only lit where to camera’s looking at.

Here is my PG so far - I don’t know how to make to make the camera follow my mousemove

[https://playground.babylonjs.com/#CQNGRK#547](https://playground.babylonjs.com/#CQNGRK#547)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 6, 2021, 10:04pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/2 "2021-05-06T22:04:10Z")

</div>

```auto
scene.onBeforeRenderObservable.add(()=>{
        spotLight.position = camera.position;
		spotLight.setDirectionToTarget(camera.getFrontPosition(1))
    })

```

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [May 6, 2021, 10:14pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/3 "2021-05-06T22:14:46Z")

</div>

Another approach is you could parent the `spotLight` to the `camera`, then you don’t need to use `onBeforeRenderObservable`

You probably need something other than `ArcRotateCamera` also, because torch light for that is still going to point at the one place.

[https://playground.babylonjs.com/#CQNGRK#549](https://playground.babylonjs.com/#CQNGRK#549)

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rainerheintzmann/32/32692_2.png) [@RainerHeintzmann](https://forum.babylonjs.com/u/RainerHeintzmann)\
**Post date:** [January 7, 2024, 12:49pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/4 "2024-01-07T12:49:45Z")

</div>

I have a similar problem, where I want to attach a spotlight to an object (e.g. a cube) and have it always hovering at a distance over one of its sides. (It’s actually for a procedural light but this does not matter here)

Parenting seems the right approach there but I am getting into serious trouble there. Somehow the spotlight does not have a rotation property and therefore very hard to work with a local coordinate system. Also the setDirectionToTarget function does strange things when the spotlight is parented to another object.  
Does anyone know a simple way to get a parenting behaviour with spotlights which preserves the relative orientation between the spotlight and the parent object?.  
Maybe one could write a derived spotlight class which does know about rotation. The torch mentioned above (including ilan actual torch object) would also be a good use case of such a class.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 8, 2024, 9:30pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/5 "2024-01-08T21:30:44Z")

</div>

Sounds like this could be a bug, can you share a repro so that we could try to fix it ?

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rainerheintzmann/32/32692_2.png) [@RainerHeintzmann](https://forum.babylonjs.com/u/RainerHeintzmann)\
**Post date:** [January 10, 2024, 8:21am UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/6 "2024-01-10T08:21:40Z")

</div>

@sebavan , @carolhmj, Here is an example, demonstrating the problems I am having.  
The aim was to have a light-source (with a projection texture) attached to an object (here the big box).  
It should always be “rigidly” attached in the sense that it follows all rotation and translation movements of the parent. Here always the same corner of the cube should always be green, three sides of the box should be lit up (as it is the case for alpha=0), and the projection should not change scaling etc…

> **[Babylon.js Playground](https://playground.babylonjs.com/#20OAV9%2312905)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Note that unparenting and reparenting before “setDirectionToTarget()” somewhat stabilizes the light-direction, albeit not to the wanted position, but then messes up the texture even more.  
I was trying to get this right for a number of days now, but somehow always failed. Maybe multiple things do not quite work correctly here?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 11, 2024, 4:06pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/7 "2024-01-11T16:06:19Z")

</div>

@Evgeni_Popov can you have a look ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 11, 2024, 4:13pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/8 "2024-01-11T16:13:26Z")

</div>



---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 11, 2024, 5:38pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/9 "2024-01-11T17:38:57Z")

</div>

`setDirectionToTarget` does the calculation in local space. So, the target should be (0,0,0):

> **[Babylon.js Playground](https://playground.babylonjs.com/#20OAV9%2312912)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

However, there’s also a bug in the projection texture code, so the PG above will only work once this PR is merged:

> <https://github.com/BabylonJS/Babylon.js/pull/14697>
>
> See https://forum.babylonjs.com/t/flashlight-follow-camera/20623/6

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 11, 2024, 5:39pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/10 "2024-01-11T17:39:01Z")

</div>



---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rainerheintzmann/32/32692_2.png) [@RainerHeintzmann](https://forum.babylonjs.com/u/RainerHeintzmann)\
**Post date:** [January 11, 2024, 10:54pm UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/11 "2024-01-11T22:54:41Z")

</div>

Thanks! Yes. I again fell into the trap to assume that “local space” means the origin of the light, but it really means the origin of the parent of the light. Very confusing.  
I am thrilled to see it working then, once the merge has proceeded. In the mean time I will try out to replace this entire idea by using a procedural emission texture instead. Its not really the same for me application (laser light impinging on an object), but the effect may looks somewhat similar, I guess.

---

<div class="post-metadata">

**Author:** ![RainerHeintzmann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rainerheintzmann/32/32692_2.png) [@RainerHeintzmann](https://forum.babylonjs.com/u/RainerHeintzmann)\
**Post date:** [January 12, 2024, 9:37am UTC](https://forum.babylonjs.com/t/flashlight-follow-camera/20623/12 "2024-01-12T09:37:17Z")

</div>

Great. It works now. Also in my own app it works flawlessly since this bug was fixed and the PR merged. Many thanks for the swift action!
