input forms

[Queue]

Hello everyone,

I am starting a new project and intended to go for pixi.js. After some further adjustments I decided to consider 3d graphics and here I am

I want to have some clickable objects which open "modal" (or something similar) and include input forms which can be send to and php backend. My first thought was to use react and have it "behind" my babylon scene and just get it in front on click.

Is that a decent way or would you recommend something else?

I also stumbled upon the "canvas 2d" stuff http://doc.babylonjs.com/extensions/canvas2d_home

Should I read further into it or is my first approach more appropriate?

Best regards

 

[Wingnut]

Hiya Queue.  I think MANY people would use an HTML form... inside a DIV that is CSS absolutely-positioned atop the webGL canvas. 

It is actually quite simple.  On that DIV... use CSS stylerules display: absolute; and then top: some%; and left: some%.  With the correct % values, the DIV should open atop the 3D render canvas.  Need it to disappear but still exist?  CSS stylerule display: none;  You could even make it partially transparent with opacity: .5; and/or move it behind the renderCanvas with CSS zIndex.

Within BabylonJS scene code, you can get references to HTML objects... with normal JS things like var mydiv = document.getElementByID("myDiv") and then get its style object with var mystyle = mydiv.style.  Then... mystyle.display = "absolute" and mystyle.top = whatever and mystyle.left = whatever, and mystyle.zIndex... and mystyle.opacity, etc, etc.  Need a CSS3 quick-ref doc?  Here ya go.  (Perhaps slightly out-of-date, but not too much.  Might need some control-mousewheeling to get it scaled nice).

You can even CREATE html within scene code.  Ex: var mydiv = document.createElement("div") and then document.body.appendChild(mydiv).  Easy, eh?   You may wish to study mydiv.focus(), too.  Having a JS function inside the scene code... that COMPLETELY creates your html form (or many different forms)... is quite achievable.  It takes quite a few lines of code, but it is all easy coding.  You could even create your form differently each time, depending upon what the user is trying to do (a 'dynamically-generated' form). 

Or you can make 1-10 different forms inside the html part of your document, and just toggle them ON/OFF with scene code.  Lots of flexibility.

In this way, you are working-with HTML forms, which is easy and won't require any fancy stuff. I don't know much about submitting the form to your server, but it will likely be exactly the same as submitting standard HTML forms.

Anyway, I just wanted to remind you that HTML forms/controls ARE available, even when working-with 3D context canvas.  After all, the renderCanvas is just the same as any other HTML element.  It just has a 3D context instead of a 2D context. 

Good luck.  Keep us posted.  Others may comment soon.

[Queue]

Thanks for your detailed answer. That was approximately what I was planning and I just wanted to confirm there is no "build-in better" way to handle this stuff. Therefore I will just do it this way,

have a nice day.

[Wingnut]

Cool!  Sometimes... it is not easy to get a "pop-up form" to happen perfectly atop a clicked mesh.  Usually, you put a mouse-click actionManager on the mesh, and use it's executeCodeAction to run a func.  That func could query current scene.pointerX and .pointerY... so now you know WHERE ON THE CANVAS... the click happened.  From that point-onward... it's hell.    (nah)

HTML elements are measured from the upper left corner... so it is easy to place your "form div" so that its upper left corner lands on the clicked location.  But... to get the CENTER of that DIV... to land on the clicked point... that takes some magic.  Good fun, though.  With some trial and error testing, you can sort-of guess how much to subtract from scene.pointerX and scene.pointerY (and then poke those values into div.style.left and div.style.top)... to make the center of the div land-on the clicked point.  Goof around, have fun.

Oh, you're asking about why "hell"?  Well... that happens if your renderCanvas is NOT full-screen.  CSS top and left... are measured from upper-left of webpage corner... not renderCanvas corner.  SO, with non-full-screen renderCanvas... you need to calculate-in HOW FAR the upper-left corner of the renderCanvas... is... from the upper-left corner of webpage.  Then add THAT amount... to scene.pointerX and pointerY, and then poke THOSE values into formDiv.style top/left.  Erf.  A bit of hell, right? 

We DID build a Canvas2D based context menu (right click popup menu), once.  Right click on mesh to launch little menu.  It works fine... but we did not have any user type-in input.  Just 8 buttons on a menu...each of them running a func when clicked.  Right click to toggle the menu OFF again, too.  It took a substantial amount of Canvas2D code, as you can see.    These menus are "centered" on the mesh origin (its center) and NOT located at the click-place.

You could easily do this type of thing... with your HTML menu/form, too (right click on mesh to launch form).  And, you can always change it later.  You could have 3-4 different versions of your formMaker() func.  Try it in many ways, see which one you like best.  I'm sure the Babylon.GUI system would work fine, too.  Here is a super-form made from Babylon.GUI.  No type-in input boxes in that demo, but nearly every other kind of form control known to man. 

But you won't get any CSS for Babylon.GUI or Canvas2D systems.    Your "form" will be positioned in a different way, using those two systems.  I bet you knew that already.  Be well.

[Queue]

Thanks for your huge input again.

Lets see weather I am able to deal with hell

Quote

Usually, you put a mouse-click actionManager on the mesh, and use it's executeCodeAction to run a func. 

I just discovered this one a few minutes before reading the post, at least I know now its the way to go

Beside that I will keep you updated, but it seems to be rather straight forward from here. Although the boxes inside of the 3d enviroment (your posted examples) look pretty cool they probably wont fit my plans right now. Therefore I'll go the easy way and stick to HTML base for now.

[brianzinn]

You mention your first thought was React...  If you're looking for some React sample code this started kit uses an npm for React and BabylonJS.  You could easily do a modal form with 'react-boostrap' npm.  The demo here is Quarto is from temechon moved partially to React as a proof of concept:

https://brianzinn.github.io/react-redux-babylonjs-starter-kit/quarto