I am trying to reproduce the camera movement of this playground in my project: https://playground.babylonjs.com/#EBPQH9#1
I implement all the same code for zoom2DView , setTopBottomRatio, etc.
But the movement of the camera are inversed on some axis and the behavior of the mesh, Y and Z axis are not the same as X axis.
I need help to understand what can cause this strange behavior.
Video of the behavior:
Pinging @PolygonalSun who is our input expert (and possibly the author of that PG?)
It’s quite hard to tell what’s the issue without seeing your code. If it works in the PG it has to work in your project as well. However the example you are trying to reproduce is slightly overcomplicated and you can achieve the same effect like this:
I know that it is difficult to resolve without seing the code but did you know what can cause the fact that when I am dragging left the mesh goes down, right it goes up etc. I look at the playground and I dont find any code that set this.
I also know that it is the attach method with the 0 argument that allow the mouse click to move the camera but how does the the dragging direction work?
Sorry, no. There is one thing though. If the distance of the camera is negative the axis are swapped.
I don’t know what type of camera you use. You should refer to the documentation of the camera type you are using.
thanks for those informations, I have an ArcRotateCamera and Im using some sort of panning mode.
I think I need to configure the panning to be able to fix my issue.
Ok so I fugure out that the weird behavior was because my camera was rotate from 90 degree on the X axis.
const transformNode = new TransformNode('tn', this.scene);
this.camera.parent = transformNode;
transformNode.rotate(Axis.X, Math.PI / 2);
But I still dont know why my X axis is not moving.
I found my issue, I was targeting the X axis.position with my camera instead of targeting a clone of it.
this.camera.target = this.axis.x.position ->
this.camera.target = this.axis.x.position.clone();
That’s why a test PG with your code is crucial. I am glad you’ve solved the problem!
you can also do this which will save on allocations: