Jump to content

Highlight/Apply color to a specific part of a big mesh


Recommended Posts

I do have only ONE big mesh imported to BabylonJS. I need to visually highlight a small part (let us call it HotSpot) of the big mesh.

What I did so far:

  • Extracted all the positions via getVerticesData
  • Collected the vertices
  • Filtered only vertices of interest (HotSpot)

So I ended up in an array vertexMapHS comprising all the HotSpot vertices. 

Now I need to either highlight using a HighlightLayer or apply a different color all the vertices in vertexMapHS. 

Does anybody have a hint how to do that?

Here is the playground of what I have got so far:


Thx in advance

Link to comment
Share on other sites

If you want to apply a color to a vertex for hotspotting facets - here is a good start and it explains the structure of the Colors array:

Note: I think you have to fill the entire array, so can't use filter like in your PG.

HighlightLayer, I think, would require two separate meshes.  One for hotspot and one for not, so doesn't look like an easy option.

Link to comment
Share on other sites

Hi guys.

   Ziguri, if the objective is to focus user's attention at a certain location upon the model, then this might be a job for Babylon decals.

They have the abilities to contour to a bumpy surface, and they have full Babylon Material powers, such as transparency, colors, textures, post-processing, etc.

Keep in mind that decals are created ESPECIALLY-FOR the surface-contour beneath them.  If you try to re-position a decal post-creation, it will NOT live-update its contours.

So, if you need to drag a decal:

- When pointerMove begins, dispose the old decal, switch to a grabbing-hand cursor for your pointer.

- OnPointerUp (drop)... normalize pointer cursor, get a fresh pickedPoint somehow, and create a NEW decal upon the mesh... there.  It will have fresh surface-conforming contours.

*shrug*  At least that's what I would do, if I ever had to drag a decal.  :)

Link to comment
Share on other sites

AND... there's one more "old school" way to put user's attention/eyes... at a certain location.  It has been used in the entertainment industry for a LONG LONG time.

The world famous... spotlight.  :)  No, you can't use 1000 of them all at the same time, but still, for certain tasks... light-it-up, baby.  :)

What?  Another way?  Okay, okay, you can also "encircle" an area on the surface of a mesh... with a ring of short-lifetime sparkly particles.  This is the "up-town" way of focusing user attention at a certain place.  Circus-grade highlighting.  :D   It's not exactly your grandfather's targeting reticle, is it?  And it's not so easy to place onto the surface of a mesh.

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