Mesh fixed as a button

[hit2501]

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.

[iiceman]

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:

http://www.babylonjs...d.com/#1IG874#7

 

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 )

[dbawel]

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.

[dbawel]

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.

[iiceman]

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?

[dbawel]

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.

[RaananW]

There is also no need to constantly update the position and rotation - http://www.babylonjs-playground.com/#21IMDW#2 (gotta love javascript!). that is unless you ever change the camera's position/rotation with a new Vector. Then simply reassign it.

[hit2501]

Thank you all. I could do it with:

 

http://www.babylonjs-playground.com/#21IMDW#2

 

I can now make custom 3D buttons.

[iiceman]

Ah, of course, it gets referenced.. then it's even easier... well, I was close anyways :-"

 

Anybody an idea how to do this for an arcRotationCamera?

[Mike Pelton]

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 June 2, 2016 by Mike Pelton
Removing any TypeScript confusion

[ziguri]

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.

[Guest]

What about making the mesh a child of the camera? (If I understand your ask correctly): See line #29 https://www.babylonjs-playground.com/#LRF5DR

[ziguri]

@Deltakosh great job.

That totally solves my issue.

I didn't except such an easy solution. Thank you!

[ziguri]

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

[ziguri]

FYI:

Using a StackPanel with a backgroundImage instead of a mesh as described in this post fixed my issue.