PlaneGeometry ratio matching texture image size and wrong image.width/image.height values returned

Questions
,
1

Hi,

we have this ortographic camera:

private createOrtigraphicCamera() {
this.ortographicCamera = new OrthographicCamera(
-window.innerWidth / this.frustumSize,
window.innerWidth / this.frustumSize,
window.innerHeight / this.frustumSize,
-window.innerHeight / this.frustumSize,
- 500,
1000
);

this.ortographicCamera.position.z = 1;

}

(frustumSize = 28.5) and we create a background plane cropping the loaded image as a strip having height of 1080 pixels:

async createBackgroundPlane(backgroundURL) {
const tex = await new TextureLoader().loadAsync(backgroundURL);

const imageWidth = tex.image.width;
const imageHeight = tex.image.height;

const backgroundCropWidth = imageWidth;
const backgroundCropHeight = 1080;
const cropOffsetX = (imageWidth - backgroundCropWidth) / 2;
const cropOffsetY = (imageHeight - backgroundCropHeight) / 2;

tex.wrapS = tex.wrapT = RepeatWrapping;
tex.repeat.set(backgroundCropWidth / imageWidth, backgroundCropHeight / imageHeight);
tex.offset.x = cropOffsetX / imageWidth;
tex.offset.y = cropOffsetY / imageHeight;

const planeWidth = backgroundCropWidth;
const planeHeight = backgroundCropHeight;
const propFactor = planeHeight / planeWidth;
const geometry = new PlaneGeometry(61, 61 * propFactor);

const material = new MeshBasicMaterial({
  color: 0xffffff,
  side: DoubleSide,
  map: tex,
  transparent: true
});

const backgroundPlane = new Mesh(geometry, material);
backgroundPlane.name = 'backgroundPlane';
backgroundPlane.lookAt(0, 0, 0);

this.scene.add(backgroundPlane);

}

In the end we have this onWindowResize:

private onWindowResize() {

const aspect = window.innerWidth / window.innerHeight;
const width = this.container.clientWidth;
const height = this.container.clientHeight;

this.ortographicCamera.left = this.frustumSize * aspect / - 2;
this.ortographicCamera.right = this.frustumSize * aspect / 2;
this.ortographicCamera.top = this.frustumSize / 2;
this.ortographicCamera.bottom = -this.frustumSize / 2;
this.ortographicCamera.updateProjectionMatrix();

this.renderer.setSize(width, height);

this.renderer.render(this.scene, this.ortographicCamera);

};

Resizing the browser window we aim to have alvays visible the image strip of 1080 pixels height, no matter for the width (the part of image out of the screen).

The first question is how to calculate the param (e.g. 61) in declaration

const geometry = new PlaneGeometry(61, 61 * propFactor);

In this example the value 61 is ok for an image of 2300 pixels width but changing it we have to reset this value in empiric way.

The second question regards the tex.image.width and the tex.image.height: if the image is bigger than 4000 pixels width, the returnig values are wrong:
for example with 7680x4320 image tex.image.width and tex.image.heigth returns 4096 and 2304 respectively.

Thank you!

2

4096px is the maximum size of a texture. This is a device/browser limitation (depend how webGL work on them, can vary) I guess three.js resize them automatically to prevent renderer to just crash.

3

Thank you Oxyn!
I hope in some help about first question.