Jump to content

How to move orthographic camera to follow target in isometric view


Recommended Posts


I am developing a game with babylon.js, and I use an isometric view (so z coordinate, is actually pointing top left of the screen, and x bottom left) :

var zoom = 2;
var cameraPosition = new BABYLON.Vector3(5*zoom, 4.1*zoom, 5*zoom);

var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.TargetCamera("camera1", cameraPosition, scene);
camera.orthoTop = 2.5 * zoom;
camera.orthoBottom = -2.5 * zoom;
camera.orthoLeft = -5 * zoom;
camera.orthoRight = 5 * zoom;

Therefore, when the player wants to go up (velocity.top), the controlled mesh should increment both z, and x, which results in the following equations :

if (player.velocity.top !== 0 && player.velocity.left !== 0)
  var d = 0.7071; // Cos(45°)
  var d = 1;

player.position.z += Math.sign(player.velocity.top - player.velocity.left) * d * t;
player.position.x += Math.sign(player.velocity.top + player.velocity.left) * d * t;

All this seems to be working fine.

Now, I would like the orthographic camera to follow the player when he is moving.

I can't make the camera target the player, as it breaks the isometric view : the camera doesn't move to follow the player, it rotates, and as the angle of the camera changes, the isometric view breaks.
Instead, I think I need to move the bounding box of the orthographic camera to be centered on the player position. But because the camera is orthographic, the bounding box doesn't seem to be related to the same coordinates as the player : the same way position.z is an arbitrary combination of velocity.top and veloctiy.left, orthoTop should be the inverse combination of position.z and position.x.

So instead, my idea was to increment the bounding box by the same amount the player moves (as the velocity is in the same direction than the bounding box).

By tweaking the values, I came up with this approximate solution, which I have a hard time to understand.

if (player.velocity.top !== 0 && player.velocity.left !== 0)
  var d = 0.35; // Cos(45°)³
  var d = 1;

camera.orthoTop -= Math.sign(player.velocity.top) * d * t * .7;
camera.orthoBottom -= Math.sign(player.velocity.top) * d * t * .7;
camera.orthoLeft -= Math.sign(player.velocity.left) * d * t * 1.4;
camera.orthoRight -= Math.sign(player.velocity.left) * d * t * 1.4;

It is approximate, because it only minimizes the error of movement between the camera and the mesh. But if the player goes one direction long enough, it will eventually go out of the screen.

I am pretty sure there is an explanation for all this, but can't find it.
What is the correct way to make an orthographic camera follow a target in an Isometric view ?



Link to comment
Share on other sites

  • 7 months later...


i dont know the correct way with the ORTHOGRAPHIC_CAMERA but i also played around with the iso view. Check this pg:


it is not that perfect, changing the camera Position watching the target causes the normal up-down-left-right moving to right-up right-down etc. i corrected it but it still seems not to work like intended.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...