Jump to content

Place meshes relative to the viewport?


Recommended Posts

My goal is a 3d minimap or radar.

My starting point was to use a simple arrow as a compass or objective pointer, which I tied to the camera and positioned appropriately:

compass.parent = camera;


The problem is when the resolution changes, ex. going from landscape to portrait mode, my compass in the top left disappears off the screen.

So, is there a preferred way to position meshes relative to the screen, as in a UI element?

I've considered using a second camera and setting up a room with just my minimap elements, or installing a second canvas with absolute positioning relative to the page, but these don't seem so great.


I would also like to have my camera pan away from a character until that character hits the edge of the screen, which would prevent further panning in that direction. These seem like a similar problem, perhaps in reverse. Maybe each frame I shoot a ray into my scene and test for collision with the character? Or set up a plane to shoot a ray at to determine the correct world position to correctly place the UI elements/stop the camera with the given viewport?


Any insight is greatly appreciated!





Link to comment
Share on other sites


For "camera pan away from a character until that character hits the edge of the screen" try

while ( camera.isInFrustum( character )) { pan }

or while ( camera.isCompletelyInFrustum( character )) { pan }


From the first page of "google babylonjs frustum":



Link to comment
Share on other sites

camera.isInFrustum() is a nice helper but feels sloppy for collision, so I want to check myself against the plane.

This playground shows me the planes from Frustum.GetPlanes() which return in the order [far, near, right, left, bottom, top]:


My near plane is a million miles away for some reason?

I think I can use that as a starting point to build a quad that stays in front of the camera to base my UI elements on.

But again, any insight is welcomed.



Something like the solutions here might be useful:

October 4, 2017


Link to comment
Share on other sites


var camera = new BABYLON....  try adding:
camera.minZ = 1;
camera.maxZ = 44;
Also you can add
camera.fov = 2.7 (or something)
to widen or narrow the frustum.
Look over the properties and methods in http://doc.babylonjs.com/api/classes/babylon.camera#maxz 
Here's an index of BABYLONjs classes, etc. http://doc.babylonjs.com/api/globals
It's not the easiest thing to browse, but along with GOOGLE I find it valuable.
Good luck with your projects!         ☘️
Link to comment
Share on other sites

Yes, nice docs and an active community are reasons I would choose an API.


I was under the impression that the near plane of the frustum is basically synonymous with what is seen on-screen with the view-port.

Setting camera.maxZ brings the near plane closer for some reason, but obviously ruins the view distance.

Maybe I am using the wrong vocabulary or something, it seemed pretty basic to want to position something relative to the camera with regards to the view port. Anyways, I'll stop back when I work out something I like, if nobody else has any good ideas.



Edit: Maybe I should set up another scene and camera to lay over my existing scene? Is that the right sort of thinking?

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