0

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

这是我目前拥有的 -

物体：

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精灵的属性似乎没有做我想要的，我看到的所有示例都将它放置在屏幕的角落或中间。谢谢你的帮助 ！

4

1 回答 1

0

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

于 2020-08-20T17:59:58.827 回答