hit2501

Mesh fixed as a button

Recommended Posts

Hello, its me again, sorry for inconvenience.

 

I have the following question:

 

How can I position a mesh as a button in the corner of the (free)camera in a fixed position on the corner even if I move the camera?

 

Thanks.

Share this post


Link to post
Share on other sites

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 )

Share this post


Link to post
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.

 

Cheers.

Share this post


Link to post
Share on other sites

I'll guess that you can also adapt the code which attaches a light to your camera to also attach the parent object I previously mentioned.  If you need help with the code, I can try and find time to put this together.  Cheers.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Great!  Now if you exclude the box "button" from your light, then you would most likely have what you were trying to acheive.  I agree - please make F5 conditional in playground.  Thanks. Cheers.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hi there,

i do have to reactivate this interesting thread.

I am looking for a way to fix a mesh in a scene with an ArcRotateCamera.

Apart from the approach of @Mike Pelton, is there another solution available in the meantime?

Thanks for any help.

Share this post


Link to post
Share on other sites

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", () => {
    this._engine.resize();
});

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

EDIT: Scaling added

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.