# Camera roll rotation **URL:** \ **Category:** Questions\ **Created:** [December 29, 2023, 12:12pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803 "2023-12-29T12:12:33Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [December 29, 2023, 12:12pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/1 "2023-12-29T12:12:33Z")
Short question: is there a way to roll the camera in BabylonJS, like so? ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/b/1b9e428b4e3f3dcc21f80d5f78198accbf2d065f.png) I’m specifically using `ArcRotateCamera`, without interfering with any other functionality. I.e., I’d like to activate the roll rotation while holding the SHIFT key. If anyone’s got any Playground examples, I’d be interested to see. Cheers! ---
**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 2, 2024, 7:36pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/2 "2024-01-02T19:36:50Z")
Lets add @PolygonalSun but there is a upVector on Camera you might be able to use to set up your use case. ---
**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 2, 2024, 7:36pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/3 "2024-01-02T19:36:55Z")
Assigned @PolygonalSun on January 2, 2024, 7:36pm UTC ---
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [January 7, 2024, 2:44am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/4 "2024-01-07T02:44:10Z")
> [@sebavan](#): > > but there is a upVector on Camera you might be able to use I had initially tried this, but it seems that the roll rotation got a bit laggy at times instead of being smooth (especially when I’m zoomed up close to a shape), so I was wondering if someone had successfully achieved this before. ---
**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:06pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/5 "2024-01-08T21:06:27Z")
Wondering why this would not be smooth, can you share a repro in the playground ? ---
**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\ **Post date:** [January 9, 2024, 12:32am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/6 "2024-01-09T00:32:14Z")
The `upVector` would be the easiest way to get the roll to work for the `ArcRotateCamera`. I’d be curious to see how you’ve implemented the roll. Also, just out of curiosity, any there any reason why you’re using the ArcRotateCamera? ---
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [January 13, 2024, 5:36am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/7 "2024-01-13T05:36:58Z")
Here’s the implementation (to trigger the camera roll, hold the `CTRL` key while clicking + dragging): > **[Babylon.js Playground](https://playground.babylonjs.com/#1JIUB0%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes As you can see, the roll isn’t super smooth – it shakes a bit at times. Another implementation that didn’t go very well: > **[Babylon.js Playground](https://playground.babylonjs.com/#1JIUB0%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes In the second one, it seems that the camera doesn’t quite roll around its pointing axis. This can be observed by the fact that different sides of the cube are being revealed as you try to roll the camera, instead of simply rotating the frame. ---
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [January 15, 2024, 6:40am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/8 "2024-01-15T06:40:45Z")
> Also, just out of curiosity, any there any reason why you’re using the ArcRotateCamera? I started using the `ArcRotateCamera` and it’s been working quite well for my CAD-viewing app, so I’d rather not switch to another camera type just for this if possible. ---
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [January 18, 2024, 4:40am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/9 "2024-01-18T04:40:45Z")
Bumping in case anyone’s got any ideas for this. Thanks! ---
**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\ **Post date:** [January 19, 2024, 2:50am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/10 "2024-01-19T02:50:58Z")
> [@WarinSpace\_Game](#): > > Here’s the implementation (to trigger the camera roll, hold the `CTRL` key while clicking + dragging): > > [Babylon.js Playground](https://playground.babylonjs.com/#1JIUB0%232) > > As you can see, the roll isn’t super smooth – it shakes a bit at times. After playing around a bit with your PGs, it looks like you’re almost there with this first one. I think something might be incorrect with how you’re calculating the upVector though. When I tried to track how your upVectors were looking by drawing lines for them, it created more of rounded shape, rather than a circular plane. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/6/2625d127f4a2c8d377cc4324c3a6c378419f322c.png) Lemme play around a bit and see if I can get a better answer for you tomorrow. ---
**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\ **Post date:** [January 19, 2024, 7:04pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/11 "2024-01-19T19:04:08Z")
Okay, for generating your upVectors, I’d recommend using something like `camera.getDirection(BABYLON.Axis.Y)` to get the up direction, with respect to how the camera is facing. From there, you should be able to rotate it around the forward vector. ---
**Author:** ![WarinSpace\_Game](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/warinspace_game/32/28564_2.png) [@WarinSpace\_Game](https://forum.babylonjs.com/u/WarinSpace_Game)\ **Post date:** [January 22, 2024, 3:20pm UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/12 "2024-01-22T15:20:33Z")
Are you suggesting replacing ```js const newUpVector = initialUpVector.rotateByQuaternionToRef( BABYLON.Quaternion.RotationAxis(forward, accumulatedRoll), new BABYLON.Vector3() ); ``` with ```js const newUpVector = camera.getDirection(BABYLON.Axis.Y); ``` or something else? Because [that](https://playground.babylonjs.com/#1JIUB0#7) doesn’t seem to work correctly. ---
**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\ **Post date:** [January 25, 2024, 1:43am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/13 "2024-01-25T01:43:02Z")
Sorry, allow me to clarify, what I meant to say was that, for your `initialUpVector`, you should use `camera.getDirection(BABYLON.Axis.Y)` as that was the easiest way to get an `upVector` that you could rotate around. Looking back at this though, this may not actually be the best answer because this could effectively mess up your `alpha` and `beta` angle values. I decided to just try to make something and here’s a basic implementation: [Basic ArcRotateCamera Roll | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#IYIGRU#3) ---
**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\ **Post date:** [January 25, 2024, 1:43am UTC](https://forum.babylonjs.com/t/camera-roll-rotation/46803/14 "2024-01-25T01:43:05Z")
Unassigned @PolygonalSun on January 25, 2024, 1:43am UTC