Transparent button on 360 dom or cubemap?

wall and floor

I want to make space like this

it seem’s like use 360 dom or cube map but
in thoes space, mouse cursor seemed to know what is cursor point on the wall , floor, and some object

I don’t know how to implement it
is therer a transparent mesh to handle the click event? or cacluate mose point and change cursor ?

I dont’t know how to impletment it

The hint is here.


off topic, but the bespoke page opened on 2022/10/17 but engine is v4.2
(I’m sure there’s a reason to use the lower version, but the timing is a bit odd.)

Do you ask how to know if the pointer/mouse is over an 3D area (mesh)? If so, then

I think this would work i.e. by pointer listeners/observables and scene.meshUnderPointer/pickResult.pickedMesh

or by Actions:

Furthermore, it is even possible to combine it with 2D or 3D GUI:

am I righlyt understandig? it is not just a 360 dom picture but also put real mesh(but not seen in the render) to give collision information for cursor ?

Yes, BabylonJS does mesh picking while pointer move on default, so you can use this PickingInfo to get like pickedMesh and pickedPoint. But you might have to use custom picking predicate to include meshes that has isVisible == false. Or instead you can use transparent material, Or transparent 3D GUI…

If pickInfo.hit == true or pickedMesh != null, there was a ray-mesh intersection (collision). The ray orientates on your mouse/pointer.

Docs of Mesh picking and its predicate:

Also PickingInfo Docs if you need more informations:

1 Like

thank! It helps a lot :slight_smile: