What is the correct way to deal with a THREE.Sprite with a portrait image?


I have a THREE.Sprite with THREE.SpriteMaterial.
If I load an image with landscape orientation, the image renders OK and the bounding box is computed correctly.
But if I load an image with portrait orientation, the image appears rotated and the bounding box is computed as if the image was a landscape image.
I can rotate the image by setting the rotation value to 90 degrees (see code snippet below). This fixes the appearance, but the bounding box is still not correct.
I also have to flip scaleX, and scaleY in order for the image to appear with the correct aspect ratio.

What is the correct way to deal with a portrait image?
Can I rotate the Sprite object so that I do not have to separately do:

  • rotate the SpriteMaterial
  • flip scaleX, and scaleY
  • rotate the bounding box


var material = new THREE.SpriteMaterial( { map: spriteMap, rotation: Math.PI / 2 } );
planeMesh = new THREE.Sprite( material );
let scaleX = (texCamera.right - texCamera.left);
let scaleY = (texCamera.top - texCamera.bottom);
planeMesh.scale.set( scaleY, scaleX, 1 );

// bbox is fixed because the object does not change its coordinates
bbox = new THREE.Box3().setFromObject(planeMesh);

Do you mind demonstrating the issue with a live example?