正交相機底部中心的 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 ，然后您可以在這兩者之間找到一個值，然后將其放置在您想要的任何位置。