How to Center Html Icon in a mesh?

Questions
1

Here is what I have.
image
Here is the code.

              <mesh  geometry={nodes.table_A_Head_1.geometry}>
                  <Html receiveShadow castShadow >
                    <ArrowUpward style={{ fontSize: 50, color: "cyan" }} />
                  </Html>
              </mesh>

What is the best way to center the Arrow Icon in my tableTop mesh? Right now the arrow is a Child of one of the tableTops (the flat round thing on top of the wooden cylinders).

2

you have the same props as on any other object3d, so position, rotation and scale (matrix, quaternion etc). there’s also a “transform” prop on the html component which switches it to css3d.

3

Thanks by your response I think you are saying to mess with the transform values until the html element is where I want it. Cool I can do that, I was thinking there might have been an automatic way

4

there might be an automatic way using drei BBAnchor GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

For instance, if you want the Html component to be pinned to positive x, positive y, and positive z corner of a mesh:

<mesh geometry={foo}>
  <BBAnchor anchor={[1, 1, 1]}>
    <Html center>
      <span>Hello world!</span>
    </Html>
  </BBAnchor>
</mesh>

you still need transform and correct rotations though.

im guessing you are trying to make buttons that allow the user to stretch the things, i would not use html and bbanchor for that but a dedicated solution. if you change vertices by mutation BBAnchor for instance has no way of knowing that you did, it won’t position the html arrow correctly after the fact.

5

Got it okay thanks, I will do some experimentation