Interaction of 2D & 3D UI with Babylon

[VoyVoda]

Hello. I have a new project dream. I have a few questions to ask. Can you enlighten me?

My project looks like the example at this address. https://byggmodul.talgo.no/app#

Questions:

1- Which technologies should I use with babylon to do such an application?

2- My designs are completed, but how can I do babylon interaction with the user interface? So I want to build a dynamic structure with the user interface as in the example project (https://byggmodul.talgo.no/app#). I have special ui designs for this. When a user selects something or enters a value, how can I transfer it to babylon?

I know. I asked long questions. That's why I'm sorry. Most of my project is over. it's just missing here. Can you guide me?

[Sebavan]

This is a rather large topic where basically every single part of the doc could be used.

If I were you I would start by tutorials to better understand the engine: https://doc.babylonjs.com/babylon101/

Then I would move on to loading meshes from obj or gltf to better grasp the art pipeline you would use: https://doc.babylonjs.com/how_to/load_from_any_file_type and related docs

Finally I would go on more advance dynamic mesh modifications and so on: https://doc.babylonjs.com/how_to/ in the mesh category 

 

 

[VoyVoda]

I've read the Babylon document completely.
Completed sections:

1- Designs
2- Babylon structure. (Babylon related parts are complete)
3- Objects are on stage. (with import mesh)

Missing are:
1- I don't know how to communicate with Babylona with Html DOM (2D User interface). I don't know how to transfer the selected ones from the 2D UI to the babylon in the first scene.
2- I do not know the necessary structure to interfere with Babylona UI as in the example and how to send it to the database.

I need a small sample for my 2 questions above. I've been working with babylon for a while. I dominate most of Babylon. Most of my project has been completed. I am having trouble in 2D and 3D interaction.

[ssaket]

Not sure how efficient this is but you can interact through normal javascript using DOM events, same can be used for making POST requests to the server. Follows a demo in which I try to change the sphere's height by taking value from input text  - https://codepen.io/anon/pen/OaxabZ

[Wingnut]

https://www.babylonjs-playground.com/#3U658N#15

When you make the HTML GUI from within the scope of the BJS scene, things go fairly smooth.

For my top button... look at line 81.  It sends some data to the setCamLateralLeft() func... at line 178.

Line 179 alerts that data to screen.

This all may be worthless information... IF your HTML was created outside-of the scope of the scene.

So, ignore me at-will.  I could be off-topic and/or intellectually null & void.    I just wanted to show a playground demo that I once created... which MIGHT be pertinent.

[VoyVoda]

Thank you very much for your reply. @ssaket
It looks like this, yes.
I just want you to think like this. (Https://byggmodul.talgo.no/app#rnd=0.5336367516475533)

1- When something is selected in this example, how can I transfer it to the clicked location. In other words, how can I instantly transfer the selected things to the babylon without being refreshed?
2- Can the user load texture instead of entering a number as in your example?

I don't want to refresh the page while all this happens. I want to see the dynamic way directly on babylon. Again As in this example, https://byggmodul.talgo.no/app#rnd=0.5336367516475533 

[Sebavan]

1- You need to call sceneLoader.Append to append element to an existing scene instead of reloading the whole scene.

2- You can simply call new BABYLON.Texture and assign it to the material once ready .

This will not reload the page only modify the scene or its materials

[ssaket]

just a quick demo, not efficient though, change the texture using select - https://codepen.io/anon/pen/OaxabZ