Top view draggable orthographic Camera

Hello,

New with BJS and programming in general.

I am trying to create an interior design app so I need the app to have a top-down view initially for the floor plan. This is what I have right now Babylon.js Playground

Then I need to be able to drag the camera (left, right, up, down) around with the mouse by clicking anywhere. I am stuck here.

Am I on the right path?

I am familiar with events but not sure how exactly this should work.

Hello and welcome to the forum !!!

Maybe you could use a transition to animate from one position to another one a bit like in this thread:

1 Like

I dont think thats what I am looking for.

Here is how it sould work exactly:

  1. if Mouse down and move mouse 10 to the left
  2. then I want the camera position to move 10 to the left also.

So if I understand how this should work, I need:

  • the starting Vector position when I click the mouse down
  • the end Vector position when mouse is moved
  • the distance between the two == end - start
  • subtract/add (?) the difference from the current camera position

And this should work in real time as I hold the mouse down.

Ideally this will work with touch also and at any direction on the x, z axis.

I think this is what I was looking for https://playground.babylonjs.com/#K9MWF6#3

Now I am a bit confused on if I should be using [ORTHOGRAPHIC_CAMERA] property or not. Because in the playground example its not used. What is the difference?

Hi. There are multiple ways to do this. You can use ArcRotateCamera, FreeCamera, with or without orthographic mode, or you can you the new drag system, maybe more :slight_smile: it depends.
Related to ortho and perspective camera, the main difference, I think, is that ortho doesn’t have depth, but you can ‘simulate’ this with a normal camera with perspective view as well.

2 Likes

I have some problems https://playground.babylonjs.com/#K9MWF6#13

Why does panning on the Z axis not work?

Why is Zoom in/out broken after enabling the orthographic mode?

Do I need to call the attachControl() method 2 times on the camera? In https://playground.babylonjs.com/#K9MWF6#3 its called twice.

This is supposed to be the top view so the Y axis is supposed to face up right? This is how Babylon works? On the other hand, in Blender this axis is represented by the Z axis?

https://playground.babylonjs.com/#K9MWF6#14 - with few explanations :slight_smile:

1 Like
camera.panningAxis = new BABYLON.Vector3(1, 1, 0);

These are not the world axis? These are the local axis of the camera? The way I thought of it was that panning up & down was on the Z axis which is the 3rd parameter on the above vector.

Why does the ground not change size on zoom in/out? I thought the orthographic camera is just viewing everything flat, with all lines parallel to each other (in case of a box)

It seems ArcRotate Camera has only 2 axis for panning X and Y.


You are right, the vector3 is x,y,z, but internally arcCamera use for panning only x and y.
And related to zoom, I think is because of the depth as I wrote (it doesn’t exist), but there should be other way to ‘simulate’ zoom in this mode too.

1 Like

Managed to add zoom thanks to this example https://playground.babylonjs.com/#EBPQH9#1

And related to zoom, I think is because of the depth as I wrote (it doesn’t exist)

Thanks @MarianG, now I get it.

2 Likes