# Gizmo Support for Cameras

**URL:** <https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888>\
**Category:** Feature requests\
**Tags:** editor\
**Created:** [July 27, 2020, 2:38pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888 "2020-07-27T14:38:11Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tbunker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tbunker/32/9192_2.png) [@tbunker](https://forum.babylonjs.com/u/tbunker)\
**Post date:** [July 27, 2020, 2:38pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/1 "2020-07-27T14:38:11Z")

</div>

A Gizmo for cameras could be useful for positioning cameras not controlled by the user.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/eafe06035653ca85ac0b553596fea702262f4324.png)  
Currently, the gizmo remains on the previously selected object (the cube) after selecting the camera.

This is part of a [larger conversation](https://forum.babylonjs.com/t/editor-v4-0-0-beta-3-feedback-interface-and-materials/12829) on the interface of the Editor v4.0.0-beta.3

---

<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:** [July 27, 2020, 2:39pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/2 "2020-07-27T14:39:34Z")

</div>

Adding @julien-moreau our editor mastermind.

---

<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:** [July 27, 2020, 2:46pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/3 "2020-07-27T14:46:25Z")

</div>

You can always make a blank transform node then onBeforeRender update the camera to the transforms rotation and positions, then just manipulate that transform.

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [July 27, 2020, 3:20pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/4 "2020-07-27T15:20:41Z")

</div>

Hey @sebavan and @Pryme8 thanks for all these solutions 🙂  
The post looks more like a feature request for Babylon.JS. Babylon.JS provides gizmos to translate/rotate/scale objects but also a light gizmo class that helps to visually debug the light (direction, color, etc.). Do you think a “CameraGizmo” class should exist like the existing one for lights which is “LightGizmo” ?

I think the intended gizmos would look like:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/24f07cad2ba05eb5e9bc3168f270b86a1e300bf7.png)

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [July 30, 2020, 1:27pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/5 "2020-07-30T13:27:12Z")

</div>

@sebavan do you think the Gizmo’s mastermind (don’t who is he/she) would be interested on adding that kind of gizmo in Babylon.JS ? Like we have today for the Light Gizmo in Babylon.JS ?

---

<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:** [July 30, 2020, 1:40pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/6 "2020-07-30T13:40:04Z")

</div>

I guess it would be @Cedric and I love the idea 🙂 Not sure he ll have bandwidth now but definitely a cool feature.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 30, 2020, 1:43pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/7 "2020-07-30T13:43:10Z")

</div>

Sounds possible to me. Let me check that.

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [July 30, 2020, 2:04pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/8 "2020-07-30T14:04:12Z")

</div>

You both rox!! @sebavan and @Cedric

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 30, 2020, 2:47pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/9 "2020-07-30T14:47:00Z")

</div>

It works! Let me do a proper PR and you should get it live by tomorrow. Also, the PG I used to test looks like that:  
[https://playground.babylonjs.com/#4LAENH#2](https://playground.babylonjs.com/#4LAENH#2)

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 30, 2020, 3:34pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/10 "2020-07-30T15:34:12Z")

</div>

PR [gizmos now support cameras by CedricGuillemet · Pull Request #8640 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/8640)

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [July 31, 2020, 1:07pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/11 "2020-07-31T13:07:07Z")

</div>

That was so quick!! You really rox!  
@tbunker will be happy and I’ll release a new beta once the babylonjs module has been puslihed on NPM 🙂

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [July 31, 2020, 6:31pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/12 "2020-07-31T18:31:12Z")

</div>

Is there documentation for LightGizmo and CameraGizmo?  
I didn’t know they existed and I don’t see how to use them.  
How is the camera represented? I don’t see a representative wick to create for her as for the lights

Thank you

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 31, 2020, 7:00pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/13 "2020-07-31T19:00:16Z")

</div>

I’ll update the documentation with a PG to highlight (no pun intended) that.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [July 31, 2020, 8:12pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/14 "2020-07-31T20:12:35Z")

</div>

@Cedric  
I just tried the cameraGizmo, but we don’t see a selectable camera as we can see on the lights.  
I had imagine something like in this picture

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/e5c7c3e7b8ff0c06162922f262907f7e8fff7d7a.png)

My test PG here:  
[https://www.babylonjs-playground.com/#Z4ZGAY#8](https://www.babylonjs-playground.com/#Z4ZGAY#8)

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [August 3, 2020, 1:19pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/15 "2020-08-03T13:19:42Z")

</div>

I’ll do my best to take care of that this week.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [August 5, 2020, 3:02pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/16 "2020-08-05T15:02:31Z")

</div>

Hey @Dad72

I might not be able to finish light/cameragizmo picking before going on vacation (this Friday). But the cameraGizmo is on good rails and should be merged this week. (crossing fingers)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/58d672b9acd621677223094a9741198fcb0a5f0c.png)

Might interest @julien-moreau as well.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [August 5, 2020, 3:45pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/17 "2020-08-05T15:45:32Z")

</div>

It looks good. Hopefully it will be for this week.  
Do you think you can make the lights selectable?  
And will the cameraGizmo be?

And have a good holiday.

---

<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:** [August 5, 2020, 3:49pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/18 "2020-08-05T15:49:52Z")

</div>

@Cedric who cleared your time off!!! Im gonna have to have a word with management… hahah 🙂 enjoy your time off dude (lucky)!

Do you think I will be able to use what is in place already to attach the gizmos to bones?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [August 5, 2020, 3:52pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/19 "2020-08-05T15:52:37Z")

</div>

I guess so! I don’t think anything will block you. In case of emergency, you can ping me on this forum. I’ll keep an eye on it 🙂

---

<div class="post-metadata">

**Author:** ![julien-moreau](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/julien-moreau/32/12070_2.png) [@julien-moreau](https://forum.babylonjs.com/u/julien-moreau)\
**Post date:** [August 5, 2020, 5:46pm UTC](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888/20 "2020-08-05T17:46:51Z")

</div>

@Cedric this is just awesome, can’t wait to integrate it!!  
Anyway, it is holidays time, no rush!!! =D

[Next page](https://forum.babylonjs.com/t/gizmo-support-for-cameras/12888.md?page=2)
