Jump to content

Mesh fixed as a button


Recommended Posts

I think an idea on how to do that was mentioned yesterday by deltakosh in another thread:



For position the best idea should be to use two cameras. One camera to see and control your scene and another one to only display UI for instance. In this case you can use this to display selective meshes for a camera:

mesh.layerMask = 1;
camera.layerMask = 1

A mesh is displayed for a specific camera if mesh.layerMask & camera.layerMask !== 0





I was more thinking about two simultaneous cameras with scene.activeCameras like here:


The main idea is to use two cameras. On that is focused on the meshes that you want to use as UI and one that is the normal camera. Then seperate the UI objects from the others by using layers and combining the to camera views with different view ports. Might that help you?


I combined it in a playground for you here: http://www.babylonjs-playground.com/#1IG874#12 (I so have to use that for my editor, too :D )

Link to comment
Share on other sites

I believe it would be far simpler to attach the object to the camera directly.  However, since this does not appear to be available at this point, I would use a parent object to match your camera position and orientation in which your box (button) was a child of, and transfer all vector deltas to the parent object simultaniously with the camera's deltas.  Not simple at all, but do-able.


For the future, I would certainly like to request a simple parenting of objects and elements to cameras, and will do so on the request page.



Link to comment
Share on other sites

Hmm... that was easier than expected: http://www.babylonjs-playground.com/#21IMDW#1


I am always confused if something works on pretty much the first try... so do I miss some kind of disadvantage of the method here or... could it really be THAT easy?


Edit: just figured out that it doesn't work as simple as that with an arcRotationCamera :(


PS: Once again I hit F5 after I was almost done and I lost my scene... could we maybe disable F5 in the playground? :P

Link to comment
Share on other sites

  • 1 year later...

I have a solution to the arcRotationCamera challenge - am hoping it's a sledgehammer and that someone can find an easier way, but it works to fix a mesh in the camera view.

This code runs inside the render loop.

The camera's view direction is along Z, so to get the view viector in world space we transform by the camera's world matrix:

var dir = BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(0, 0, 1), _babylonArcRotateCamera.getWorldMatrix());

Now we create a position which is (arbitrarily) 200 units in front of the camera - adding 200 times our dir vector to the camera's position:

_viewMesh.position = _babylonArcRotateCamera.position.add(dir.scale(200));

That's enough to lock it in space; if we also want to lock its rotation, so it doesn't twist as the camera moves:

_viewMesh.rotationQuaternion = BABYLON.Quaternion.FromRotationMatrix(_babylonArcRotateCamera.getWorldMatrix());

Hope it helps someone - it took me a while to get something to work so I hope it saves other people some sweat!

Edited by Mike Pelton
Removing any TypeScript confusion
Link to comment
Share on other sites

  • 1 year later...

A further issue arises. I am able to fix the mesh and set it to an fixed position with mesh.position.

But once i changed the Browser Size (e.g. Fullscreen - or minimize it) the mesh stays at its position.

Yes i do have resize-event listener activated:

window.addEventListener("resize", () => {

Is there a way to set the position and scaling of the fixed mesh based on the browser window size?

EDIT: Scaling added

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