# ArcRotateCamera upVector and alpha make wrong rotation **URL:** \ **Category:** Questions\ **Created:** [December 5, 2024, 9:25am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196 "2024-12-05T09:25:09Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![uiosade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/uiosade/32/44067_2.png) [@uiosade](https://forum.babylonjs.com/u/uiosade)\ **Post date:** [December 5, 2024, 9:25am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/1 "2024-12-05T09:25:09Z")
Hello. Please help me to understand how it works or is it a bug I have **ArcRotateCamera**. I want to set **upVector** and then set **alpha**. ```auto camera.upVector = new BABYLON.Vector3(0, -1, 0) camera.alpha = 1.5707963267948966 // 90 degrees ``` It works good on different upVectors, but there’s some case that I can’t understand. If I set **x = 0.01** and **y = -1** of upVector like this `new BABYLON.Vector3(0.01, -1, 0)` it seems that **alpha** is changed too. If x is 0.04 it still works strange. But when x is 0.05 it works predictable again. Here is an example: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#12WBC%231586)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes I expect that the blue arrow always looks down and the red arrow always looks right. But when `camera.upVector = new BABYLON.Vector3(0.01, -1, 0)` the angle of both arrows is changed about 45 degrees Please uncomment one of these lines (13 - 15) for better understanding what I mean. ```auto // camera.upVector = new BABYLON.Vector3(0, -1, 0) // ok camera.upVector = new BABYLON.Vector3(0.01, -1, 0) // not ok // camera.upVector = new BABYLON.Vector3(0.1, -1, 0) // ok ``` Also if I set **alpha = 0** OR upVector’s **y = 1** (not negative) then it works good in all cases ---
**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:** [December 5, 2024, 9:41am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/2 "2024-12-05T09:41:10Z")
Hi @uiosade welcome to the forum This issue is named Gimbal Lock : [Gimbal lock - Wikipedia](https://en.wikipedia.org/wiki/Gimbal_lock) Basically, trying to keep an up vector aligned with view direction is unstable and a slow variation on 1 axis forces the other axis to realign. Or, in other words, if a view and up are aligned, then there is an infinite number of possible axis values for right vector. There is no perfect solution. Usually, in my PG, I set a limit to arc rotate camera angles so up and direction can’t be aligned. ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [December 5, 2024, 10:02am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/3 "2024-12-05T10:02:29Z")
Hello @uiosade, welcome ! 🙂 Yeah as @Cedric said, it’s a gimbal lock issue, which happens only near perfect 90° angles. Have a look at this topic (not specific to cameras) where I had explained a little bit about this issue : > [@What is the difference between rotation, rotationQuaternion, rotate(), addRotation()?](https://forum.babylonjs.com/t/what-is-the-difference-between-rotation-rotationquaternion-rotate-addrotation/51733/2): > > Hello slight_smile rotation: BABYLON.Vector3 defining the rotation of a mesh in [EULER mode](https://en.wikipedia.org/wiki/Euler_angles) rotationQuaternion: BABYLON.Quaternion (see it as a Vector4) defining the rotation of a mesh in [QUATERNION mode](https://en.wikipedia.org/wiki/Quaternions_and_spatial_rotation) rotate(): Method for rotating around a specific axis addRotation(): Method for adding Euler angles to the current rotation Now if you wonder why using Quaternion, it’s usefull because it a way to avoid the [Gimbal Lock](https://en.wikipedia.org/wiki/Gimbal_lock) problem of euler angles. Best way to understand it is to open Blender an… * * * To give an explanation proper to the camera, let’s consider this : The ArcRotateCamera has 2 angles : Alpha (Azimuth, red), and Beta (Elevation, Blue) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/911354e4f4db69621070d3d0cb649a47829f71a9.png) In this situation, the camera will always be “straigth”, **aligned with horizon** * * * Which means you are missing one degree of freedom : rotating arround view axis : ![Screencast from 05-12-2024 10:56:09](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/5/6524f2578a4f1e0d0b345b4e41619ecb4f32cf88.gif) In the above GIF (Blender) you see this black axis attached to the mouse ? It’s the Up Vector. By default it’s (0,1,0) : ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/f/4f2d79b97f8ebfcfc009732e5458b73f34b59101.png) And you would shift it a bit when you need the camera **not aligned with horizon** : ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/5/c51f57b7d281fc90fd9acf1f9d17f6fc6c30cef9.png) * * * As you can see, the angle arround axis is defined by the plane made by the view vector (purple) and the up vector (yellow). If you have the up vector (almost) aligned with view vector, you create a huge instability of the camera angle. You should always try to keep your up vector perpendicular to view vector 🙂 ---
**Author:** ![uiosade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/uiosade/32/44067_2.png) [@uiosade](https://forum.babylonjs.com/u/uiosade)\ **Post date:** [December 5, 2024, 2:25pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/4 "2024-12-05T14:25:56Z")
Thank you for your response. Is it possible to use quaternions with ArcRotateCamera? As a result I need to see the box from exactly this position, as I tried to set up with upVector+alpha. I cannot rotate the box directly for some reasons, I want to rotate camera. But my approaches with ArcRotateCamera+Quaternion gave no result as if the ArcRotateCamera doesn’t work with quaternions ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [December 5, 2024, 2:27pm UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/5 "2024-12-05T14:27:32Z")
To me ArcRotateCamera is really to be used as is, I.E. rotating arround a target using Alpha & Beta. If you want to use any direction, why don’t you use a FreeCamera ? ---
**Author:** ![uiosade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/uiosade/32/44067_2.png) [@uiosade](https://forum.babylonjs.com/u/uiosade)\ **Post date:** [December 8, 2024, 4:43am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/6 "2024-12-08T04:43:07Z")
I tried FreeCamera and found out that camera’s **position** is what I need (probably). With defining a target it gives the same result for both ArcRotateCamera and FreeCamera. The top of view depends on upVector so now I changed it to (0, 0, 1). User can change input field to set degrees for new top of view, but only around view axis (by the top of view i mean the triangle on the picture). ![](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/9/b9a6ca4ea086d01415aada586c474bb953ae04f3.png) So I suppose I still have to rotate upVector by user’s angle. Because i set position and in case of changing alpha all is broken. I thought that the view vector can change itself depending on upVector. So if no, is the view vector same for upVector(0, 1, 0) and upVector(0, 0, 1)? How can I know view vector coordinates? Sorry for long time answer, all this time i was investigating ---
**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:** [December 9, 2024, 9:03am UTC](https://forum.babylonjs.com/t/arcrotatecamera-upvector-and-alpha-make-wrong-rotation/55196/7 "2024-12-09T09:03:13Z")
You can use [Babylon.js docs](https://doc.babylonjs.com/typedoc/classes/BABYLON.Camera#getDirectionToRef) with (0,1,0) as local vector.