Question

我试图将精灵放置在正交摄影机的底部中心。

这是我目前拥有的-

对象：

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轴上的深度如何，都可以使用camera.bottom获得底部。顶部是camera.top，然后您可以在这两个位置之间找到一个要放置的值。

将精灵放置在正交摄影机的底部中心

1 个答案: