Accesing transformation matrices of ArcRotateCamera

Questions
1

Hello again!

This might be quite an advanced question, and hard to solve, since I can’t really provide a playground for it. So, to make it as easy and understandable as possible, I will give as much information as I can to see if somebody as the key on how to help me. Thanks in advance!

As my last question-posts indicate, I am doing a project that closely involves ‘ArcRotateCamera’ and I have been trying to understand all of its functionallities, and how I can expand the normal usage. My main goal is to be able to rotate the camera around its ray-axis (that is, the imaginary axis that joins the camera and the targeted object/point in space).

As JohnK indicated in his answer to a previous question of mine (Rotate an 'ArcRotateCamera' around its "target" axis), using the camera property upVector seems to be the right approach to it. I had been playing with it a bit and it was not until I saw this post: How to create a TrackballCamera with the ArcCamera from Necips and the suggestion into using arcCamera.noRotationConstraint = true; that I saw the potential of it.

However it still does not reach that full functionallity I’m looking for. If in the playground from the previous link you focus on the red faces of the cubes, and try to rotate them around (Try to keep the red faces always seeable) you can see how you can only have either the purple faces or the yellow faces on top. You are not able to see the red faces in a vertical position (one on top of the other).

This is where upVector comes into play, which would allow that to happen. I was having some issues with the logic of that property when defining it in different ways (upVector logic in ArcRotateCamera depends on how you define this vector) and apparently the only good way to define this property is through .upVector = new BABYLON.Vector3(x, y, z), as trying to specify each component on it’s own will cause a malfunctioning of the rotation matrices.

Now, all that was the introduction, so I can finally get into my real issue :smiley:

In my project, I’m using a range of technologies (which can be basically summarized into React+Typescript+Babylon) and that’s why I cannot provide a playground for it… In this project, I’m interacting with this ArcRotateCamera through buttons, and once that you click these buttons, the upVector of the camera gets rotated 90deg. However, when doing this, the logic of the camera is broken. It does not matter if I am using some React Component Button to change this property, or if I’m using a mesh in BABYLON that will trigger this change. The logic is still broken. On the other hand, if I create some simple playground to try to show you guys about this performance, it does work on the playground, and I don’t run into these issues (which is why I can’t really show my problem). Now, I don’t know where this problem is coming from, as now I am changing the upVector with the propper approach (new BABYLON.Vector3()) and the logic is still broken.

I’ve tried to read on my own how these transformation matrices work for webGL cameras (WebGL 3D - Cameras) and I was wondering:
Is it possible to know how these matrices are defined/work in BABYLON? I’m afraid this might be the only way of checking what parameters are interacting with them, and if my ‘button’ approach within this big project is causing some bad interaction (or even, to see if the problem is somewhere else within my code).

If anyone has any suggestion or has gone through something similar and has an advice, I will be extremely happy to hear about them =)

Thank you!

2

If you have already considered the following points then I have not been much help and hopefully others will respond soon.

The implication here that there is a problem with your application, perhaps missing components. What error messages do you get? How are you accessing Babylon.js? Have you read Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation and https://doc.babylonjs.com/resources/babylonjs_and_reactjs and https://doc.babylonjs.com/babylon101/how_to_get?

Perhaps using babylon.max.js will allow you to check what is happening within babylon.

I cannot do better than suggesting you look at https://github.com/BabylonJS/Babylon.js/tree/master/src/Cameras others might be able to narrow it down further.

3

Well, after investing a lot of time into trying to find the root cause of this problem, I have to say that I’ve learnt a lot about BJS Cameras, and I was eventually able to find the solution where I was not expecting to: By upgrading BJS version.

I was using 3.2.0 and when I updated to 4.0.3 the problem was not there anymore. I was checking the differences between two cameras (one in BJS Playground and another in my project) and I saw that updateUpVectorFromRotation property was available in Playground Camera, but not in my project one, and by the name, it looked like the exact property I was looking for. So I hoped upgrading the version would help, and it certainly did! :smiley:

So, thank you a lot to all of you that have helped me with my issues with the cameras, and I will leave this answer here in case somebody with some old-version project comes to the forum looking for an answer to the same problem I had.

1 Like