React Three Fiber(R3F)中实现车门上固定尺寸圆形点击按钮的问题求助

嘿各位R3F大佬，我刚接触React Three Fiber，正在啃基础知识点。现在我想实现的效果是：加载一个.glb格式的汽车模型，然后在车门位置渲染一个圆形按钮，这个按钮能响应点击事件。但不管我试了多少方法，这个按钮都没法正常工作——试过<mesh>、<Sprite/>、<Geometry/>还有@react-fiber/drei里的<Html/>标签，全踩坑了。

先明确下我的核心需求：

• 按钮必须是圆形的
• 必须是固定尺寸，不管镜头缩放都不能变大小
• 位置必须精准贴合车门，之前用<Sprite/>的时候，我只设了5像素的偏移，结果直接飞出去老远，完全不对
• 可选需求：希望按钮能像网页里z-index:9999那样，始终显示在最上层，不会被其他模型挡住

我现在写了个ClickableSprite组件，代码如下：

function ClickableSprite() {
  return (
    <>
      <sprite position={spritePosition} ref={pulsingSpriteRef} material={texture} {...rest} />
      <sprite position={spritePosition} translateX={10} translateY={10} translateZ={10} {...rest}/>
      <Html onAfterRender={console.log} position={spritePosition} transform occlude 
        // distanceFactor={10}
        style={{ 
          width: "10px", 
          height: "10px", 
          borderRadius: "50%", 
          background: "red", 
        }} 
      />
    </>
  );
}

现在卡壳的问题点：

1. <Sprite/>的位置偏移完全不符合预期，一点点数值就会导致位置巨偏
2. <Html/>的圆形按钮要么位置不对，要么尺寸会跟着镜头缩放变，而且有时候会被模型挡住
3. 完全搞不懂怎么让按钮保持固定尺寸，并且精准定位到车门上

有没有大佬能帮我捋捋思路？或者给个可行的实现方案呀？感激不尽！

内容来源于stack exchange