How to Center Html Icon in a mesh?

Here is what I have.
Here is the code.

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

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

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.

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

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>

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.

Got it okay thanks, I will do some experimentation