Creating Mesh groups

[helloworld]

Hi everyone

I'm creating a bench out of different babylon meshs. I was wondering if there was a way to group these meshs so i could for example

link the file with the bench objects to a index html and then create the mesh in the index file?

 

fyi i don't desperately need this answered but if you just happen to know please reply

[JohnK]

Hi and welcome from me to the forum. Whilst other forum helpers can read questions and understand what is required I often get confused easily so am not at all sure what you are needing.

6 hours ago, helloworld said:

I'm creating a bench out of different babylon meshs

OK I can picture that

6 hours ago, helloworld said:

I was wondering if there was a way to group these meshs so i could for example

OK a grouping under some condition or other

6 hours ago, helloworld said:

link the file with the bench objects to a index html

the file - what file? The file with the bench objects (meshes?) in - but then this file is a grouping of the objects.

to a index html? index.html is usually the reference to the landing page for a website.

6 hours ago, helloworld said:

and then create the mesh in the index file?

the mesh - what mesh the completed bench?   the index file, is this different to the index html? By index do you mean the bench parts are indexed or the bench is indexed - what is the index file?

You may be clear in your mind what you need but I am not clever enough to work it out. Explaining what you need can be really difficult and I want to help. Please try to explain step by step how the meshes and files link together and work together to produce what you need.

[Wingnut]

Hi guys.  I am not understanding either... but maybe... helloworld wants to put the bench on a web page, and make it LOOK as-if there is no canvas element.

Perhaps like this:  http://urbanproductions.com/wingy/babylon/hit2501_fun/fun.htm

It looks as-if there is no canvas, and no BJS.  Just BJS mesh... rendered in html file... using same background image as html file.  It happens like this... because of THIS line: 

scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
                                                \
                                               This 0 means webGL canvas has transparent background. 

If you want FOUR BJS scenes on one webpage (for example, using 4 canvas elements, one in each page corner), then you need FOUR BJS engines (I think).   I think you need one BJS engine for each HTML canvas element on the web page.

Anyway, MAYBE this is what helloworld wants.    Maybe not.  More explaining please, helloworld.  (thx)  And thank you too, John... for being a caring forum helper.

[helloworld]

sorry for not being clear

so the meshes will be in a separate js file then linked to the html page where everything comes together

then i want to create those meshes under a single id/class so they can be edited and animated in a separate file

[JohnK]

First Issue

50 minutes ago, helloworld said:

meshes will be in a separate js file

How will the meshes be in a file? So for a bench there are leg meshes, seat mesh and back mesh. So you can have a js file with the code necessary to create these meshes ie something like

var leg = BABYLON.MeshBuilder.CreateBox( "leg", legOptions, scene);
var seat = BABYLON.MeshBuilder.CreateBox( "seat", seatOptions, scene);
var back = BABYLON.MeshBuilder.CreateBox( "back", backOptions, scene);

Then an HTML file that among other things has a <script> that pulls in Babylon.js and sets up the scene with camera and lights etc, then as required pulls in the 'bench' file and puts the pieces together to make a bench.

Or

You can serialize  the mesh data for the leg, seat and back, stringify the results and save in JSON format as a .babylon file and then in your HTML <script> section load the ,babylon file and put the pieces together.

Or

You could create your meshes in Blender save as .babylon file and load this file.

Am I getting anywhere close to what you need. If so then I think you have a lot of reading to do.

 

 

[Wingnut]

8 hours ago, helloworld said:

create those meshes under a single id/class so they can be edited and animated in a separate file

That is a rough sentence.  heh. 

Ok, I guess you mean... inside a SINGLE html container element... with an id/class.  Keep in mind that MOST people load scripts in the <head> of a HTML document.  It is quite rare to use <script> as a childNode of a container node (except if that container node is <html> or <head>.) 

But anyway...  here's a badly-formatted mistake-filled html markup...

<div id="scene" style="display: none;">
    <script src="babylon.js" />
    <canvas id="renderCanvas" />
    <script>
         var createScene = function() {
              importMesh()
              do stuff...
         }
    </script>
</div>

Then maybe... <body onload="document.getElementByID('scene').style.display = 'block';">

hehe.  Complete scene... in a div.    I'm not sure how "portable" this <div> node/element would be, or how editable it would be... in some kind of HTML editor.  I'm not even sure that I am on-topic. We need even MORE details, HW! 

[helloworld]

yeah i think this might be causing a few people a headache so im gonna leave it this but thanks for the help

[Wingnut]

I think you have a nice vision of something.  I hope we get to see it, someday.  You might be a genius... I'm not sure yet.  Maybe a diagram would help us understand.

Anyway, we're here to (try-to) help.  Sorry about mis-understanding.  If you want, perhaps write something.txt (in ANY language) and we'll translate to all other languages, and then ONE of us might understand better. 

But, if you are a super-genius (I'm thinking that you ARE), then perhaps NONE of us will EVER understand.  We are not smart enough. 

Try not to be disappointed in us.  You have been kind, and you have caused no headaches.  We LIKE helping people with 3D/VR... cuzzzz VR rocks. 

One last comment... attempting on-topic.

Grouping of mesh... indexing separate files... use JSON as much as possible.  .babylon IS a json file... but it is easy to load json into any scene... and you can use that json object as a "marshaller"... to command imports or other json loading.  BJS has lots of JSON tools and mesh serializers/deserializers.  JSON is your friend, for all sorts of uses.  Maybe that helps.

Be well, party on!

[helloworld]

Thanks Wingnut it was just an idea that i could put babylon meshes into a "div" so an action would affect all items. inside that "div" (probaly should of opened with that)

Also this is the first i've heard of JSON do you have a link to it?

[JohnK]

Like Wingnut I am happy to help and no headache  as you keep doing the right thing by accepting that we answer when we are available to.

A couple of links for JSON

https://en.wikipedia.org/wiki/JSON

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

So back to your

2 hours ago, helloworld said:

idea that i could put babylon meshes into a "div" so an action would affect all items

This I believe shows the root of the issue. Do you understand that a babylon mesh is not an html object? A babylon mesh can only exist within a babylon scene and you can only have a babylon scene when there is a babylon engine running.  You can see a typical template for this here.

So for any web page displaying a babylon scene there is the babylon engine running in the background and a <canvas> element displaying the scene.

Now the <canvas> element does not have to be full size as in the template above. It can be any size and any position on your page. Of course you could put a <canvas> inside a <div> if you wish to.

You could apply allowed css actions to the <canvas> and the current babylon scene would still be displayed within that <canvas> as the actions were applied to the canvas.

Example http://grideasy.github.io/canvasfun.html

[Wingnut]

Yep, well said.  And HTML form elements... buttons, readouts, sliders, all sorts of stuff... CAN send/receive events to/from a canvas/scene.  So, you have the best of both worlds, events-wise.  With CSS position: absolute, and top:some%, and left: some%, you can place an html button or readout directly atop a canvas area... so it looks like it is part of the webGL scene.  (cool)

Or you can make mesh that are buttons and readouts... and parent them to the camera.  Lots of other GUI-making BJS-extensions are available, too.

It's a wide open frontier, covered with girls in bikinis!   errr... I mean... full of opportunities.

BUT... dragging a mesh from one canvas to another... has been met with "mixed results".    I think someone actually pulled-it-off, but I think they went insane soon afterwards.    It requires serializing and deserializing, I think.  I try not to think about it, so I don't go insane. 

[helloworld]

On 6/2/2017 at 4:16 PM, JohnK said:

. Do you understand that a babylon mesh is not an html object?

yes i do. i just don't know what, if there is one, the JS equivalent of a div. Which is why i used "".