Jump to content

illuminate all sides of a mesh


Recommended Posts


I would like to setup so that light falls on the mesh, even when mesh is rotated.


Currently, if I rotate the mesh and look at the bottom surface, it is rendered as black, which means there is no light that hits this surface.

I think this means light moves along with the camera. is this correct?

However, when scene is rotated and a different surface is placed on top, I see a shine. Why is this ?

I think I am missing something very basic here.


All I want is use a single source of light and illuminate the mesh, no matter how it is rotated. Is this possible ?





Link to comment
Share on other sites

Hi rajkumar and others.

  If I may...  http://www.babylonjs-playground.com/#1HCFXA#4

Raj... notice I turned off the light completely, and I am using box.material.emissiveColor (in line 27) so the box material will self-illuminate.  This is the perfect way to "illuminate-color" all sides of a box, but notice that it is difficult to see the face edges.  We can fix that in a moment.  Understand that this is self-illumination, and no shadows can be cast from self-illumination.  Shadows need lights to function properly.  (I bet you knew that already)  :)

If you activate lines 30-33, it activates the edges renderer, which can be used to add lines to the edges.  It is a strange way to do that, but it works great.

If you turn OFF edges renderer, turn OFF material.emissive color, re-activate the good light choice of the hemisphericLight,  and re-activate material.diffuseColor (like this demo), you get nice even lighting.  Take notice of line 17.  Setting a hemisphericLight.groundColor is the way to distribute more under-the-mesh light, so the mesh bottom is lit, and the sides get brighter.

Lastly, notice the two lines in the animate() function (lines 48 and 49).  One line rotates the mesh without orbiting the camera.  The other line orbits the camera around the mesh without rotating the mesh. 

I hope some of this helps.  Have more questions?  Feel free to ask.  Party on!

Link to comment
Share on other sites

:)  Good.  I forgot to tell you about mesh.showBoundingBox = true/false;

http://www.babylonjs-playground.com/#1HCFXA#6   (line 29) 

That is another way to see face edges (without using the edgesRenderer).

There is also material.wireframe = true/falsehttp://www.babylonjs-playground.com/#1HCFXA#7

Sometimes our friends want "half-wireframe"... and I think the "approved method" is to use TWO boxes atop one another.  One box is wireframe, the other is solid:


I wanted to be "thorough".  Sometimes people want diagonal lines on their boxes (wireframe) and sometimes they don't want them (edgesRenderer or showBoundingBox).  Ok, bye again.  :)

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