My goal is to display the image in its entirety regardless of 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>