Jump to content

Replicating MapBox camera


Recommended Posts

Has anyone ever re-created a MapBox (or other mapping api) camera in Babylon.js?  

I've found a project in Three.js that recreates the MapBox camera by updating the camera projection matrix and world matrix: https://github.com/peterqliu/threebox/blob/master/src/Camera/CameraSync.js

There is this kind of code that access the camera world matrix but I'm not sure how to do that in Babylon.js:

this.camera.projectionMatrix = utils.makePerspectiveMatrix(fov, this.map.transform.width / this.map.transform.height, 1, farZ);

        var cameraWorldMatrix = new THREE.Matrix4();
        var cameraTranslateZ = new THREE.Matrix4().makeTranslation(0,0,cameraToCenterDistance);
        var cameraRotateX = new THREE.Matrix4().makeRotationX(this.map.transform._pitch);
        var cameraRotateZ = new THREE.Matrix4().makeRotationZ(this.map.transform.angle);

        // Unlike the Mapbox GL JS camera, separate camera translation and rotation out into its world matrix
        // If this is applied directly to the projection matrix, it will work OK but break raycasting



Link to comment
Share on other sites

In particular, I'm trying to find out the Babylon.js equivalent of these methods/properties:

this.camera.matrixAutoUpdate = false;   // We're in charge of the camera now!

this.world.matrixAutoUpdate = false;

this.camera.projectionMatrix = projMatrix;

this.camera.matrixWorld = cameraWorldMatrix;

this.world.matrix = worldMatrix;


this.world is a group of meshes and can be transformed so it applies those transformations to all child meshes as a whole,  so I'd say its the same as a node which is used as a parent of multiple meshes

Link to comment
Share on other sites

  • 3 weeks later...
On 2017-5-30 at 1:41 AM, Deltakosh said:


you can override camera.getViewMatrix and camera.getProjectionMatrix to do it manually 

Thanks for the tip!  Also, I'm wondering if its possible to do a smooth transition between a perspective camera and ortho camera

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