将精灵定位在正交相机的底部中心答案

【问题标题】：Position sprite at bottom center of orthographic camera将精灵定位在正交相机的底部中心
【发布时间】：2023-03-30 05:45:01
【问题描述】：

我正在尝试将精灵定位在正交相机的底部中心。

这是我目前拥有的 -

对象：

function Obj() {
  const texture = useLoader(THREE.TextureLoader, loadedimg);

  const spriteRef = useRef();

  return (
    <group>
      <sprite
        position={[1,  ???, 0]}
        ref={spriteRef}
        scale={[texture.image.width * 1.5, texture.image.height * 1.5, 1]}
      >
        <spriteMaterial
          attach="material"
          map={texture}
          sizeAttenuation={false}
        />
      </sprite>
    </group>
  );
}

相机渲染：

      <Canvas orthographic camera>
        <Suspense fallback={<React.Fragment>loading...</React.Fragment>}>
          <Obj />
        </Suspense>
      </Canvas

我试图提出一种适用于所有不同精灵的计算方法（它们都有不同的高度，因此例如通过设置position={[1, -128, 0]} 将其中一个定位在底部，而对于其他坐标则让它漂浮，因为它的高度较短）。我查看了文档，精灵的center 属性似乎没有做我想要的，我看到的所有示例都将它定位在屏幕的角落或中间。感谢您的帮助！

【问题讨论】：

标签： javascript three.js react-three-fiber

【解决方案1】：

使用正交相机，只要相机不旋转，就很容易找到平截头体的底部。由于正交凸轮的所有边缘都是平行的，因此无论精灵在 z 轴上有多深，都可以使用camera.bottom 获得底部。顶部是camera.top，然后您可以在这两者之间找到一个值，放置在您想要的任何位置。

【讨论】：