Position sprite at bottom center of orthographic camera

Question

I'm trying to position sprites at the bottom center of the orthographic camera.

This is what I have currently -

The 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>
  );
}

The camera rendering:

      <Canvas orthographic camera>
        <Suspense fallback={<React.Fragment>loading...</React.Fragment>}>
          <Obj />
        </Suspense>
      </Canvas

I've tried to come up with a calculation that could work for all different sprites (they all have different heights so for example one of them would be positioned at the bottom by setting position={[1, -128, 0]} while for the other those coordinates would just leave it floating due to it being shorter in height). I looked at the documentation and the center attribute for sprites doesn't seem to do what I'd like it to, all of the examples I've seen position it at the corners of the screen or right in the middle. Thanks for your help !

score 1 · Accepted Answer · answered Aug 20 '20 at 17:59

With an Orthographic camera, it's easy to find the bottom of the frustum as long as the camera doesn't rotate. Since all edges of an ortho cam are parallel, the bottom can be obtained with camera.bottom, regardless of how deep in the z-axis the sprite is. The top is camera.top and then you can just find a value in between those two to be placed wherever you'd like.

Position sprite at bottom center of orthographic camera

1 Answers1