Jump to content

Follow cam, top down view/follow


Recommended Posts



So I am in the process of converting my game from three.js to Babylon. I have a top down scene with a ground mesh, and several cubes rendering on top. I have a "player" cube that the camera is meant to follow, which starts at 0,1,0. The camera is then set above it:

this.camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 20, 0), this.scene);

I then set the camera to look at the player mesh:

this.camera.target = this.player.mesh;

However, the camera then flies back behind the player, and slightly above, looking at roughly a 45 degree angle. Any idea how to keep it above, like I was simply rotating on the x axis instead?



Link to comment
Share on other sites

Tried working on my own version of the follow cam, just keeping it really simple as i just need one view: top down. However it has not gone well, and i think i am misunderstanding how the setTarget function in the parent's TargetCamera is supposed to work.


The follow camera used angle calculation to adjust its position, and would call setTarget(cameraTarget.position); I however, just need to keep the same X & Z values as the target, but about 20 Y above it. So here's my code:


var __extends = this.__extends || function (d,  {  for (var p in  if (b.hasOwnProperty(p)) d[p] = b[p];  function __() { this.constructor = d; }  __.prototype = b.prototype;  d.prototype = new __();};(function (BABYLON) {  var TopDownCamera = (function (_super) {    __extends(TopDownCamera, _super);    function TopDownCamera(name, position, scene) {      _super.call(this, name, position, scene);      this.radius = 12;      this.rotationOffset = 0;      this.heightOffset = 0;      this.cameraAcceleration = 0.05;      this.maxCameraSpeed = 20;    }    TopDownCamera.prototype.getRadians = function (degrees) {      return degrees * Math.PI / 180;    };    TopDownCamera.prototype.follow = function (cameraTarget) {      if (!cameraTarget)        return;      this.position.x = cameraTarget.position.x;      this.position.z = cameraTarget.position.z;      this.setTarget(cameraTarget.position);    };    TopDownCamera.prototype._update = function () {      _super.prototype._update.call(this);      this.follow(this.target);    };    return TopDownCamera;  })(BABYLON.TargetCamera);  BABYLON.TopDownCamera = TopDownCamera;})(BABYLON || (BABYLON = {}));

what happens it camera looks straight across, not down at all, even though the target position is right below it.


Now, when i do some debugging and check out the setTarget call, the _camMatrix property is all NaN. I think it's because at one point there is a / by 0, which results in Infinity. And then math is done on said Infinity in the invert() operation, making the whole matrix NaN.

Link to comment
Share on other sites

Hey Delta, I kind of have a solution.


So instead of using the follow camera, i decided to use the target camera since it seems to define the cameraRotation behaviour. I simply apply an x rotation and I am able to point down:



this.camera = new BABYLON.TargetCamera("FollowCam", new BABYLON.Vector3(0, 0, 0), this.scene);this.player = new Player(this.scene);this.camera.parent = this.player;this.camera.position.y = 20;this.camera.cameraRotation.x = (Math.PI / 4);

I'll have to see how movement goes, now that i have the camera attached to the player. My mouse input logic is still broken, so i don't know yet :)

Link to comment
Share on other sites

Don't think so, the numbers on coordinate projection must be wrong. I know when i had them in threejs, a single coordinate would range between 30 and -30 or so. Im only getting 1.5 to -1.5 here. I fixed it to use unproject over project (whoops), but still not getting the mouse coordinates quite right.


 MouseControls.prototype.coordsAsVector = function (x, y, camera, target) {    var vector = new BABYLON.Vector3(      ( x / window.innerWidth ) * 2 - 1,      - ( y / window.innerHeight ) * 2 + 1,      0.5    );    BABYLON.Vector3.Unproject(      vector,      window.innerWidth,      window.innerHeight,      window.scene.camera.getWorldMatrix(),      window.scene.scene.getViewMatrix(),      window.scene.camera.getProjectionMatrix()    );    var dir = vector.subtract(camera.position).normalize();    var distance = - camera.position.y / dir.y;    target.copyFromFloats(camera.position.x, camera.position.y, camera.position.z)    return target.add(dir.multiplyByFloats(distance, distance, distance));;  }
Link to comment
Share on other sites

What I can see so far:

- mesh.moveWithCollisions move with a vector of (17, 0, -9)

- then mesh.position is set to 17, 0.5, -9

- almost immediatley the mesh is moved with a (-17,0, 9)

- so mesh.position is reverted to (0, 0.5, 0)



So visual result is as expected :)


My first thinking would be: is (17, 0, -9) not too much??

Link to comment
Share on other sites

Figured it out. In the end the best thing to do was use more high level functions of babylon. Instead of my own function, im passing the mouse coords to scene.pick(), and use the resulting hit coordinates to get it to work. I saw the picking collisions in the wiki, but didn't think of this application. I also dropped down the velocity to 10% of what it was.

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...