Show three.js sprite and PlaneGeometry image completely whatever its size

Question

I would like the image to show completely whatever its size

var src1 = "https://i.imgur.com/C9lWPeL.jpg",
  src2 = "https://i.imgur.com/a9zyCRt.jpg";

const src = src1;

var scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
loader.load(
  src,
  function(texture) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      color: 0xffffff
    });
    var imageWidth = spriteMaterial.map.image.width;
    var imageHeight = spriteMaterial.map.image.height;
    var camera = new THREE.PerspectiveCamera(80, imageWidth / imageHeight, 1, 1000);
    camera.position.z = 500;
    var sprite = new THREE.Sprite(spriteMaterial);
    sprite.scale.set(1 * imageWidth, 1 * imageHeight, 1.0);
    sprite.position.set(0, 0, 0);
    scene.add(sprite);

    var geometry = new THREE.PlaneBufferGeometry(700, 700 * imageHeight / imageWidth, 0);
    var material = new THREE.MeshBasicMaterial({
      map: texture,
      color: 0xffffff
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 0, 0);
    //scene.add( plane );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(700, 700 * imageHeight / imageWidth);
    renderer.render(scene, camera);
    container.appendChild(renderer.domElement);
  },
);

<script src="https://threejs.org/build/three.js"></script>
<div id=container></div>

Answer 1

For the sprite using OrthographicCamera would be the best approach.

As for the PlaneBufferGeometry calculating the right distance that should be between the camera and the near plane like so

var camera = new THREE.PerspectiveCamera(45, imageWidth / imageHeight, 0.001, 1000);
camera.position.z = halfHeight / Math.tan(Math.PI / 8);

will resolute the problem.

PS: if plane.position.z != 0 you should add it to the camera position camera.position.z += plane.position.z

var src1 = "https://i.imgur.com/C9lWPeL.jpg",
  src2 = "https://i.imgur.com/a9zyCRt.jpg";

const src = src1;

var scene = new THREE.Scene();
var loader = new THREE.TextureLoader();
loader.load(
  src,
  function(texture) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      color: 0xffffff
    });
    var imageWidth = spriteMaterial.map.image.width;
    var imageHeight = spriteMaterial.map.image.height;
    var width = 700,
      height = width * imageHeight / imageWidth,
      halfHeight = height / 2;


    /*var camera = new THREE.OrthographicCamera( imageWidth / - 2, imageWidth / 2, imageHeight / 2, imageHeight / - 2, 0, 1000 );
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set(1 * imageWidth, 1 * imageHeight, 1.0);
    sprite.position.set(0, 0, 0);
    scene.add( sprite );*/

    var camera = new THREE.PerspectiveCamera(45, imageWidth / imageHeight, 0.001, 1000);
    camera.position.z = halfHeight / Math.tan(Math.PI / 8);
    var geometry = new THREE.PlaneBufferGeometry( width, height, 0);
    var material = new THREE.MeshBasicMaterial({
      map: texture,
      color: 0xffffff
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.position.set(0, 0, 0);
    scene.add(plane);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    container.appendChild(renderer.domElement);
  },
);

<script src="https://threejs.org/build/three.js"></script>
<div id=container></div>