Jump to content

Interaction of 2D & 3D UI with Babylon


Recommended Posts

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#


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?

Link to comment
Share on other sites

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 



Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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.

Link to comment
Share on other sites

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 

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

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...