Interactivity vidéo 360 or picture 360 with Babylon Js

Questions
1

Hello
Is it possible to do interactivity with a 360 image or a 360 video with Babylon Js ?
If yes, do you have examples ?
Thank’s

2

Hi mecanicus,

https://www.babylonjs-playground.com/#21UPR3#30

Is that something along the lines of what you’re looking for? That’s from the “snippet” from the docs, which has a little (though not much) more information about the code.

You can also create such a scene in the same way and just put an ArcRotateCamera at the center, but the controls for that can be a little confusing on a touchscreen.

3

Hi synthétiquemagus

Thank you, it’s a start. In this example I would like to add clickable tags, for example a clickable icon on a tree would give info on the type of tree or for example by clicking on the wooden bridge that would indicate its date of construction, etc.

4

Sounds pretty cool. Would the Babylon 3D GUI work well for that purpose?

https://www.babylonjs-playground.com/#HB4C01#9

5

Would the Babylon 3D GUI work well for that purpose? That is the question !

6

Technically yes :slight_smile:

1 Like
7

Hi Deltakosh,
I used the exemple : https://www.babylonjs-playground.com/#SQ5UC1#0

should I use Babylon GUI or other instructions? which ones? I’m a little (a lot :wink: lost

8

I think we might need a little more context about what you’re trying to achieve. As I understand it, you want to place a button in the scene, then have that button show some information when clicked. The button will remain stationary in the scene; it’ll have no knowledge of anything else happening (camera panning or video playing). Is that an accurate description of what you’re going for, or have I misunderstood?

9

Actually, I should have started by better explaining my request. Here’s what I would do :Virtual Tour (360) | H5P

10

Hi mecanicus,

So sorry for the delay, I missed the notification that you’d replied. I think the Babylon GUI will work wonderfully for your scenario.

For your virtual tour, what you’ll essentially have (if I understand properly) is a graph where each vertex is a 360 image and each edge is a possible “movement” in the tour, transitioning from one 360 image to another. I think what you want to do is create a state machine that traverses this graph based on button presses, only ever enabling the 3D image for the state your user currently occupies. Then, for each state, manually place HolographicButtons as shown in the example I linked above to represent each possible transition. (You should be able to customize the appearance of the HolographicButtons, if that’s something you want to do.) Then, when the user activates a HolographicButton, simply transition your state machine accordingly to enable the new 360 image and associated HolographicButtons.

11

@syntheticmagus I would like to hear more about this. How can you manually place Holographic Buttons on the container3D? I was under the impression that the 3D-GUI-containers were volumetric.

Is it possible to add a HolographicButton to a specific position like (mouse-x, mouse-y) on the panel?

Edit: I see now, there is a position attribute for Control objects. You would use this to manually place the HolographicButtons in world space?

12

Yes, that’s what I would recommend, at least if you’re crafting scenes by hand. Later, you could introduce ways to more easily place controls at certain pre-determined locations, taking a dependency on assumptions like the levelness of the 360 image, etc. I’d definitely start with placing the buttons manually, though, and introduce more sophisticated capabilities from there.