I am attempting to 'fit-to-scale' a mapped image texture on a single plane, aiming to simulate the behavior of object-fit:cover.
The image map needs to scale proportionally in order to cover the entire plane completely.
I have experimented with adjusting the repeat and offset of the texture but have been unsuccessful thus far (the code is commented out).
As you can see from the snippet below, the current result still stretches the image to fit. Any assistance would be greatly appreciated!
var renderer = new THREE.WebGLRenderer({ canvas : document.getElementById('canvas'), antialias:true});
renderer.setClearColor(0x7b7b7b);
// use device aspect ratio //
renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window
renderer.setSize(window.innerWidth, window.innerHeight);
// SCENE
var scene = new THREE.Scene();
// CAMERA
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
// MESH 0
// texture
var texture_0 = new THREE.TextureLoader().load("https://i.imgur.com/YO0ygMx.jpg");
texture_0.wrapS = THREE.ClampToEdgeWrapping;
texture_0.wrapT = THREE.RepeatWrapping;
// var tileWidth = 2;
// var tileHeight = 1;
// repeatX = tileWidth * 1024 / (tileHeight * 2048);
// repeatY = 1;
// texture_0.repeat.set(repeatX, repeatY);
var geometry_0 = new THREE.PlaneGeometry(1.3,1,32);
var material_0 = new THREE.MeshBasicMaterial({
color: 0xd8d0d1,
side: THREE.DoubleSide,
map: texture_0
});
var mesh_0 = new THREE.Mesh(geometry_0, material_0);
scene.add(mesh_0);
mesh_0.position.x = -0.7
// MESH 1
var texture_1 = new THREE.TextureLoader().load("https://i.imgur.com/YO0ygMx.jpg");
texture_1.wrapS = THREE.ClampToEdgeWrapping;
texture_1.wrapT = THREE.RepeatWrapping;
var geometry_1 = new THREE.PlaneGeometry(1,3,32);
var material_1 = new THREE.MeshBasicMaterial({
color: 0xd8d0d1,
side: THREE.DoubleSide,
map: texture_1
});
var mesh_1 = new THREE.Mesh(geometry_1, material_1);
scene.add(mesh_1);
mesh_1.position.x = 0.7
// RENDER + ANIMATE
function animate() {
/* render scene and camera */
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
// RESIZE EVENTS
window.addEventListener('resize', onResize);
function onResize() {
width = window.innerWidth;
height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<canvas id="canvas"></canvas>