Custom cover() function for mimicking css background-size 'cover' for shaders, OrthographicCamera, TextureLoader, and PlaneBufferGeometry

[trusktr]

@Vickie_C there’s too much happening (and some things not doing anything) in your pen.

I recommend you simplify by positioning a Mesh (with PlaneGeometry), not a texture for scene background, based on this:

Functions to calculate the visible width / height at a given z-depth from a perspective camera

In case it helps anyone, here’s how to fit an object (most likely a flat plane) on the screen so that it “fits” depending on aspect ratio. For example, if we have an object taller than it is wide we want the Y dimension (the tall dimension) to fit within the view, but if the object is wider than it is tall we want the X dimension (the width dimension) to fit within view. The following distanceToFitObjectToView function will tell you at what distance to place the object so that it fits within vi…

There you’ll find functions to implement similar to CSS object-fit: cover.

That will position exactly how you want using a PerspectiveCamera. It is even easier if you use an OrthographicCamera because then the fristum is rectangular. You can even fork the codepen from that post and start with that, then you can apply your shader to the texture of that Mesh (remove anything that is not needed in the shader like offset, etc).

Here’s the pen forked to use cover mode (see lines 90 to 92):

Video: