Jump to content

Create custom mesh


Recommended Posts

Hello everybody,


I begin to discover BJS :)


I would like to create a custom mesh (whithout importation from Blender or other) :

first a triangle shape,

after a rectangular parallelepiped (because we can't choose one side size with BABYLON.Mesh.CreateBox() )


(like this with ThreeJS: https://github.com/mrdoob/three.js/issues/255)


Is it possible ?


Thank you a lot

Link to comment
Share on other sites

Thanks a lot guys ! (this is a good community =p)

There something that I don't understand : Why do we need to name Meshes ? What is the goal of that ?

There is my code : http://www.babylonjs-playground.com/#10GOD0#2

How to not show the diagonal edge of the square ? (with wireframe)
Same question for the circle, the square base of the pyramid and the parallelepiped.

How to fill a geometry and color the contour ?
I tried it by applying a multi material like that (but it doesn't work) :

var multiMaterials = new BABYLON.MultiMaterial("multiMaterials", scene);
square.material = multiMaterials;

Exists there better solutions than mine, in order to create these shapes ?

Question for Jerome Etienne : do you continue to developp with Three.JS or do you have stopped in favor of Babylon.JS ?

Have a good night

Link to comment
Share on other sites

hehe.  I don't think Jerome Etienne visits here,  but maybe he is in disguise.  We'd be glad to have him on-board, though, I would think.  :)

Nice looking custom mesh, 3Dlove, and welcome to the forum!  Good to have you with us.

Here's a multi-material (submeshes) demo... might help.



Filling your mesh with color/contours... is done with BJS per-vertex colors.  I did your triangle: (giggity)


1.  Removed the blueWireframe material from the triangle - line 40

2.  Added a section that put three Color4 values into the colors[] array - line 100 - 105.  green, red, blue.  Used soon.

3.  Added a line to apply the color data... to the mesh - line 118

4.  Added a light - line 17-18

5.  Moved the triangle closer to the camera.  :)

PARTY!  Pretty color-per-vertex with color contours/dithers!

Later, if you want to apply a texture to your mesh, you will need to apply another KIND of data to your triangle... called uvs.  It is done in much the same way as I did for colorKIND.


The .setVerticesData function that you are using (lines 116-119) is a bit old, though it still works great, thanks to strict BJS backward compatibility efforts.  I disabled it, and instead used the NEW WAY to set custom mesh data... the vertexData object.  That code is in lines 122 - 133.

All of Babylon's basic shapes are plotted on the vertexData object, as you can see by its methods (lots of create-shapes).  These shapes are applied to blank mesh by our Mesh object, which also has many create-shapes functions.  Mesh functions call vertexData functions.  For example, Mesh.CreateBox calls vertexData.CreateBox...  asking for a box-shaped vertexData object (its properties hold data that's ready to make a box shape).  Mesh.CreateBox receives the stocked-with-data vertexData object, and applies it to a blank mesh.  I bet you know what happens next.  :)


I don't know how to remove the diagonal line in the side of a box... when in wireframe mode.  I'm not sure it can be done.  You might want to give the box no material, or a material with .alpha set low, but then set box.showBoundingBox = true;  Maybe a box made from 12 thin cylinders?  (build-it-yourself wireframe) 

Be well!

Link to comment
Share on other sites

Thank you Wingnut!

Thank you a lot for your explanations, OK fot the NEW WAY to set custom mesh data =D

OK for multi-material, it wasn't really that I would mean in reality^^, the question is :
how to set a wireframe to a fill mesh, I think you answer me with showBoundingBox = true but how to choose the color ?

I think the 4th parameter of each line in colors table is the alpha value, isn't it ?
(example : 0, 1, 0, 1, : green with 100% opacity ?)

At the moment, for the wireframe, it's not already OK, I can plot a parallelepiped with white wireframe, due to material.alpha and box.showBoundingBox = true;
Is it possible to change the white color ? :) (here is my new code : http://www.babylonjs-playground.com/#10GOD0#5 )

For UVS, I don't understand why use it instead material.diffuseTexture, do you have an example ? :)

Genral question : Why do we need to name Meshes ? What is the goal of that ?

Yes I thought, sorry for the confusion :/

Link to comment
Share on other sites



just a quick answer to your questions:


Last parameter of color4 is alpha, you are correct.


The color of material properties can be changed. you can try it here - http://materialeditor.raananweber.com/ . I am not too sure if the color of the bounding box can be changed.


UVs are the "location definition" or mapping of the texture on this mesh. Diffuse Texture will not work without them. They tell the shader that *this* triangle should have *that* part of the texture. This is a very abstract way of explaining that, if you want some more information about it start here - http://en.wikipedia.org/wiki/UV_mapping 


Naming meshes comes in handy when you want to search for a mesh with a specific name. It is also nice to have when you use the debug layer, as you know exactly what you are looking at. Other than that, it wouldn't matter if you give the object a name or leave it a blank string. The same and more can also be done with tags (http://doc.babylonjs.com/page.php?p=22521).

Link to comment
Share on other sites

UVs... well not easy to explain


Imagine your texture is a picture, a rectangular one. So it has a width and a height expressed in number of pixels.

Now, replace the width and height number of pixels by a percentage : first width pixel on the left is zero and last width on the right pixel is one (100%). The same for the height : first top pixel is zero, last bottom pixel is one (100% height).

Ok ?


Let's go on...


You can now imagine you will bend your flat image on each vertex your mesh will use (so only the vertices used in the indices array, in other terms vertices used to construct tiny triangles). As you would wrap a 3D object with a paper image.


Imagine then each vertex of your object could print a red ink dot on contact.

If you unfold your paper, you will see many red dots, one per vertex touched, on the image.


Well, UVs are simply the coordinates of each red dots on the image :

U is the dot coordinate on the image width axis, expressed in the range 0 .. 1

V is the dot coordinate on the image height axis, expressed in the range 0 .. 1


UV is just this pair of numbers : 2D coordinates on the image.


and UVs is just the series of these pairs of numbers declared in the same order as the vertices in their own array


hope it will help ;)

Link to comment
Share on other sites

Great posts, you guys!

3Dlove... there is one more way to do your wire-framing.  It's our LINES basic shape.  I don't have much experience with the Lines mesh, but it's easy to use.


Lines mesh is a slightly longer route to gramma's house, but it gets the job done.  :)

And you can see how easy it is to color the lines.  I set the initial color in line 60, and then I set a double-power random color every scaling cycle (line 72).  Fun!  Party on!

Link to comment
Share on other sites

  • 2 weeks later...

Hello, I'm back :)


Ok for UV, I understood :-D Thanks RaananW and Jerome !


Thanks Wingnut for the other wireframe way =)


All my questions were answered =)


Just for the wireframe, with the way of box.showBoundingBox = true, are you sure that we can't change the white color by another ?

If not, this topic can be closed =D (how can I close it ? by added [RESOLVED] to the title ?)

Link to comment
Share on other sites

Hi again 3L, welcome back!


Hey, I found some new (old) information!  In the great "What's New" document, under version 1.11...



New option for mesh: mesh.showBoundingBox to display mesh's bounding box. You can configure back and front color using scene.getBoundingBoxRenderer(). This function returns a BABYLON.BoundingBoxRenderer where you can define backColor, frontColor and showBackLines (deltakosh)


So I tried it on one of your scenes...




(I needed to slow the camera speed a bit in line 13)


Looking good, sort-of.  (yay!)


line 82 - got a boundingBoxRenderer object

line 83 - set its frontColor to blue

line 84 - set its backColor to green

line 85 - set its showBackLines to true


And I added another rectangle... pave2... to help me see stuff.


Well, I see blue bounding lines on the rectangles.  YAY!  I see no green, though.  I see yellow, though.  Weird.


And SOME of the lines are yellow and blue at the same time!  Strange.


Anyway, apparently there IS a way to change boundingBox colors.  YAY!  You and I both learn things, today.  :)

Link to comment
Share on other sites

I didn't know it was broke.  Seems to work goooood.  :)


.showBackLines was broke?  nod. 


I guess that IS green, too.  Looks like yellow because its so hard-lit and upon a red thing.


Killer-fast bug-wranglin', dk.  You're a god!  Fastest gun in the west.  Thanks!

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...