Jump to content

How close roof sides without using caps of extrude shape?


Recommended Posts

Hi D!  Hey, good-looking warehouse.

Here is a non-scientific method.  https://playground.babylonjs.com/#F1QRLS#19


With the createDisc command, we can make a triangle.

Then... using careful camera zooming and inspection (along with precise mesh scaling)... we can use these triangles to cap the roof-ends.

There are other ways... like extruding a triangle, too.  Hope this helps.

Note1:  It is best to keep hemisphericLights aimed straight UPward... like this.  var light = new BABYLON.HemisphericLight("luz", new BABYLON.Vector3(0, 1, 0), scene);  This way, all sides of your building are lit the same amount (and therefore are the same color).

Note2:  If you wish to stop the SUPER BRIGHT light reflection on the ground and warehouse, you can do:  light.specular = BABYLON.Color3.Black();  [ or use new BABYLON.Color3(0,0,0) ]

Link to comment
Share on other sites

Here is a more "dynamic" version...  https://playground.babylonjs.com/#F1QRLS#20

See line 58... frontao.scaling = new BABYLON.Vector3(alturaParede*.5, baseLarg*.192, 1);

Buildings via math, eh?  *nod*

New stuff in lines 61-63.  I "baked-in" the rotation and scaling... for the triangles.  (reset the .rotation and .scaling values to default, even though the triangle shape stayed frozen.)

Why did I do it?  I dunno.  Makes like easier, maybe.  heh.

Math-made warehouses... 101.  :)  FUN!

Link to comment
Share on other sites

Hi @Wingnut. Great answer!

I imagined that the object would be upgradeable, but the answer is valid. 

Sorry I don't understand how work the "bakeCurrentTransformIntoVertices" and what is its usefulness? I did not notice a difference. Or why I did not drink coffee today ?

Thank you for the extra tips, very useful.

One medal for you ?

Link to comment
Share on other sites


Yeah, I guess I don't see a difference with the baking, either.

Lines 58/59 mess-with frontao rotation and scaling... possibly making ugly numbers.

But when I display frontao rotation and scaling in line 62, it appears to NOT be rotated or scaled.  Instead, pretty numbers.  Interesting.

I thought... at line 62... we would see ugly values.



AHHH BUT... when I add updatable = true to the end of line 57 createDisc line, THEN line 62 reports at-JS console...

Before bake:  frontao.rotation: Object { x: 0, y: -1.5707963267948966, z: 1.5707963267948966 }   frontao.scaling: Object { x: 1.5, y: 6.72, z: 1 }

THERE'S our ugly numbers, eh?  Alright!  I KNEW they were nearby.  :D

After bake:  frontao.rotation: Object { x: 0, y: 0, z: 0 }     frontao.scaling: Object { x: 1, y: 1, z: 1 }

Clean numbers again... yet didn't change scene at all.

Mostly useful if you need to make many more triangles for other warehouses... using var newtriangle = frontao.clone("newtriangle");

Easier to rotate new triangles with newtriangle.y = Math.PI/2;  Easier to scale half-wide with newtriangle.scaling.x = .5;

I'm not sure WHY the updatable set to true (line 57) matters.  Your scene doesn't need it, but, I needed to determine/learn why line 62 was showing pretty numbers instead of ugly numbers.

I'm still learning, even after 5 years of playing with BJS.  I think... in the older days... we didn't need to set updatable TRUE... to make the numbers be ugly.

A couple years ago, BJS added "transformNodes"... which I know very little about.  That could have changed things... and Wingnut didn't pay attention.  :)


Technically, we should add verso.rotation.y = Math.PI;  ... near line 74.  Currently, verso has its BACK SIDE facing outward... and frontao has its FRONT SIDE facing outward.

Line 69 - frontao.material.backFaceCulling = false;    ... makes us NOT NOTICE this.  Remove line 69 or set it to true, and we will be able to see-thru verso... when viewed from outside.  And we could also see-thru frontao, when viewed from inside the warehouse.

When we use frontao.material.backFaceCulling = false; ... we cannot see thru EITHER side of the material-covered triangles, no matter which SIDE is inward or outward.

Front-sides, back-sides... it's all fun, eh? 


Want to go a step further?  Let's visit sideOrientation: DOUBLESIDE


Look at the changes in line 57.  We added BABYLON.Mesh.DOUBLESIDE and we re-enabled backfaceCulling in line 69 (which is the default setting for BJS materials).

We cannot see-thru any triangle, no matter which side... because we created the triangle in doubleside mode.  Weird, eh? 

We got lots of options to play-with.   Verso doesn't need a 180 degree (Math.PI) Y-rotation.  Having it's backside facing outward... is just fine, because we created the triangles doubleside'd.  :)

You probably know all this stuff already, eh?  My apologies, if you do.  :)

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