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

Question

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

这是我目前拥有的-

对象：

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

Answer 1

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

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

Position sprite at bottom center of orthographic camera

javascript

three.js

react-three-fiber