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
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 =)