正交相机底部中心的 Position 精灵

Question

我正在尝试在正交相机的底部中心放置 position 个精灵。

这就是我目前拥有的 -

object：

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属性似乎没有按照我的意愿执行，我看到的所有示例 position 它都在屏幕的角落或中间。 谢谢你的帮助 ！

Answer 1

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