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>
For the
sprite
usingOrthographicCamera
would be the best approach.As for the
PlaneBufferGeometry
calculating the right distance that should be between the camera and the near plane like sowill resolute the problem.
PS: if
plane.position.z != 0
you should add it to the camera positioncamera.position.z += plane.position.z