# Apply roll to ArcRotateCamera **URL:** \ **Category:** Questions\ **Created:** [April 27, 2022, 11:03am UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771 "2022-04-27T11:03:03Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 27, 2022, 11:03am UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/1 "2022-04-27T11:03:03Z")
Hello ! My goal is to apply [a roll](https://doc.babylonjs.com/divingDeeper/mesh/transforms/center_origin/rotation_conventions#yxz-local-axes-yaw-pitch-roll) to my ArcRotateCamera when you drag’n’drop the middle mouse. ![camalphabeta](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/f/9f70ab41d4ae60b605d6e5e4e50a62c0edeeedac.jpeg) Just like [the FlyCamera](https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction#flycamera) but with the middle button. I have two ideas, but my first is to play with the camera.upVector, like in [this topic](https://forum.babylonjs.com/t/roll-arcrotatecamera/10222) Here’s the playground : [Babylon.js Playground](https://playground.babylonjs.com/#RDS489) My problem is that I’m not good at math/geometry 😶 (whereas I like them !), and I struggle to modify the upVector to get what I want. Do someone have an idea, and could explain to me (and all the people landing on this thread !) ? The camera should continue to behave [“normally”](https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction#arc-rotate-camera) after a roll, too ! Vertical and horizontal dragndrop should move the camera according to the new point of view (but it looks like it would do that …) ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 27, 2022, 12:45pm UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/2 "2022-04-27T12:45:58Z")
So far, I can roll the camera, but it looks that it rolls from the creation point of the camera … > **[Babylon.js Playground](https://playground.babylonjs.com/#RDS489%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 27, 2022, 1:52pm UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/3 "2022-04-27T13:52:24Z")
Hey, turns out camera.upVector is not really like what I thought … > **[Babylon.js Playground](https://playground.babylonjs.com/#RDS489%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes L38 : I’ve added two boxes created when you press the middle mouse. upVector is not related to the camera, it’s related to the World… ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 27, 2022, 2:41pm UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/4 "2022-04-27T14:41:11Z")
Okay, I managed to roll by attaching a box, rotating it along the camera axis while camera is attached to the box ! But now, the panning (right-click) is broken… > **[Babylon.js Playground](https://playground.babylonjs.com/#RDS489%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**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:** [April 27, 2022, 2:50pm UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/5 "2022-04-27T14:50:24Z")
Adding @PolygonalSun 🙂 ---
**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:** [April 27, 2022, 9:08pm UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/6 "2022-04-27T21:08:49Z")
It looks like it isn’t panning properly because the upvector isn’t getting updated. Since it’s accounted for it Global space, all panning is being done as though it’s still using the y-axis as the up vector. It looks like you got the behavior working in your previous [iteration](https://playground.babylonjs.com/#RDS489%232), unless I’m misunderstanding something. Also, is there any reason why you’re using the mesh as the parent, rather than the camera? I just wanted to make sure that I’m understanding things properly. ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 28, 2022, 6:51am UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/7 "2022-04-28T06:51:45Z")
```auto It looks like you got the behavior working in your previous iteration, ``` No, in the [previous iteration](https://playground.babylonjs.com/#RDS489#1), updating the upVector while the camera is at its spawning point does the job, but when you move it (and pan it), you’ll see that it is not the wanted behaviour. ```auto It looks like it isn’t panning properly because the upvector isn’t getting updated. ``` In [https://playground.babylonjs.com/#RDS489#3](https://playground.babylonjs.com/#RDS489#3) and [https://playground.babylonjs.com/#RDS489#4](https://playground.babylonjs.com/#RDS489#4) I’m using a mesh as a helper for the camera rotation. ```auto is there any reason why you’re using the mesh as the parent, rather than the camera? ``` Since I know how to rotate a box, making it the parent of the camera actually rolls the camera. But still, there are problems with panning with the upVector not changing. ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 28, 2022, 9:20am UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/8 "2022-04-28T09:20:23Z")
Okay, third try 😢 > **[Babylon.js Playground](https://playground.babylonjs.com/#RDS489%238)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Attached a FlyCamera to the ArcRotateCamera When the middle mouse is pressed, the FlyCamera takes control, and when the roll is done, the upVectorof the FlyCamera is copied to the ArcRotateCamera upVector. But this doesn’t work well either … ---
**Author:** ![Dreadbond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dreadbond/32/12494_2.png) [@Dreadbond](https://forum.babylonjs.com/u/Dreadbond)\ **Post date:** [April 28, 2022, 9:48am UTC](https://forum.babylonjs.com/t/apply-roll-to-arcrotatecamera/29771/9 "2022-04-28T09:48:22Z")
Okay, I’ve found a quite brütal solution > **[Babylon.js Playground](https://playground.babylonjs.com/#RDS489%239)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes On middle mouse dragndrop, rotate the whole world. 🤘 We can see that lights don’t move, hence the shadows moving, but it can be fixed with a “ **root** ” element