Top view draggable orthographic Camera

Questions
1

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.

1 Like
2

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
3

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.

4

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?

5

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
6

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?

7

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

1 Like
8 
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)

9

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.

2 Likes
10

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.

3 Likes