Wrong direction of numbers

Questions
1

Hi everyone,

I’m new to Babylon.js and have decided to create a 3D object for my website using this technology. I’m working on a cylinder with the functionality to select a face by clicking on it. When a face is clicked, I want its color to change and its face ID to be displayed in a text box.

Currently, I’m facing an issue with assigning numbers to each face ID. I’m not sure how to correctly map these numbers to the faces. Does anyone have any ideas on how to achieve this?

Thank you for your help! :blush:

2

Hello and welcome :slight_smile:

You had a few issues in your playground :

  • You don’t need to create the engine, it’s already existing within the Playground context. You only need to define the createScene() function
  • scene was not defined in addClickAction()
  • For automatic rotation of the text meshes toward camera, you can use the billboard mode (see in the updated playground line 183.
  • In my playground line 181 plane.bakeCurrentTransformIntoVertices(); is a trick to offset the plane regarding its center, so that the billboard mode automatically ads the right offset

Here is a fix :
cylinder
Playground

NB: on top the text meshes are not at the center of the triangles, I suspect you might rework your bounding box center input

++
Tricotou

1 Like
3

Thank you, Tricotou. You fixed the error I had been trying to resolve for two weeks.

Regarding the center of the triangles, could you help me with this? Should I add a condition for the triangle to be in the plane (lines 179-184)?

1 Like
4

Problem comes from the fact that you are using a bounding box center on a triangle. Here is a drawing to understand why it won’t fit :

image
image1194×592 17.9 KB

The bounding box center is B while what you want is A …

Instead, just pass the points list to the addNumbersToFace() function and compute the baycenter on it :
cylinder

Playground

++
Tricotou

1 Like
5

Now it’s amazing. I see your function getBarycenter and I understand where the issue was. Thank you very much for the explanation and for helping me. You are the best! :slight_smile:

1 Like