Add a html label element besides each room to show the room no

Questions
,
1

Hi There,
I’m a beginner in threeJs.

I want to add a number as an HTML label or Text(react-three/fiber) element beside each room to showroom no. Here’s an example of what I mean:

123
123714×629 69.2 KB

Here’s the code in the sandbox: 3rddddddddddd - CodeSandbox

I used that:

      <Text position={position} anchorX="0px" font="/Inter-Regular.woff" fontSize={1} letterSpacing={0}>
        1
        <meshStandardMaterial color="black" />
      </Text>

but it shows like that:

111
1111335×623 49.7 KB

2

what’s the problem you were facing, why not just add it?

<Html>
  <div className="myAnnotation">1</div>
</Html>

and it’s done. if you don’t want it to face the camera add the transform option.

1 Like
3

Thank You for your response @drcmda .
Yeah kinda like that. But how can I face the camera exactly like the picture I showed?

4

Thank You so much.
It did worked