What hook to use for TextGeometry to respect collisions properly?

[graysonhicks]

Currently trying to use useBox on textGeometry, but the text seems to react very strangely (immediate collisions when placed in the scene with the plane, finally resting above or below the plane, other objects passing slightly through). What am I doing wrong?

export default function ({
  children,
  vAlign = "center",
  hAlign = "center",
  size = 1,
  color = "#000000",
  ...props
}) {
  const [textRef, api] = useBox(() => ({
    mass: 10,
  }));
  const font = useLoader(THREE.FontLoader, "./Montserrat_Bold.json");
  const config = useMemo(
    () => ({
      font,
      size: 3,
      height: 0.4,
      curveSegments: 24,
      bevelEnabled: true,
      bevelThickness: 0.9,
      bevelSize: 0.3,
      bevelOffset: 0,
      bevelSegments: 10,
    }),
    [font]
  );

  const mesh = useUpdate(
    (self) => {
      const size = new THREE.Vector3();
      self.geometry.computeBoundingBox();
      self.geometry.boundingBox.getSize(size);
      self.position.x =
        hAlign === "center" ? -size.x / 2 : hAlign === "right" ? 0 : -size.x;
      self.position.y =
        vAlign === "center" ? -size.y / 2 : vAlign === "top" ? 0 : -size.y;
    },
    [children],
    textRef
  );

  return (
    <group
      castShadow
      {...props}
    >
      <mesh ref={mesh} castShadow>
        <textGeometry attach="geometry" args={[children, config]} />
        <meshNormalMaterial attach="material" />
      </mesh>
    </group>
  );
}