Sunday, 4 September 2022

Three,js image texture to scale fit-center

I'm trying to fit images to picture frames and areas similar to them. Some frames work ok but generally I cannot fit the image right...this is the original image

enter image description here

This is what happens when I try to fit the image top the different frames/parts.

enter image description here

enter image description here enter image description here enter image description here

This is my current code. As I said does work ok with picture frames that are similar to image size. But I try to do is to automatically scale and center to make image to different picture frame sizes/areas.

var texture = null; 
var material = null
const loader = new THREE.TextureLoader() 
texture = await loader.load(media, async img => {  
    if(invertX) {
        texture.wrapS = THREE.RepeatWrapping; 
            texture.repeat.x = - 1; 
    }

    if(invertY) {
        texture.flipY = false;
    } 
    material = new THREE.MeshBasicMaterial({
        map: texture
    });  
    elm.material = material;  
});

I tried different code without any success, placing below if any of them may help someone lead me somewhere

// const planeGeom = new THREE.PlaneGeometry(1,1)//(16, 9)   
// const planeAspect = planeGeom.parameters.width / planeGeom.parameters.height;
// const imageAspect = texture.image.width / texture.image.height; 
// const aspect = imageAspect / planeAspect;  

//doesnt work
// let imgRatio = img.image.width / img.image.height;
// let planeGeom = new THREE.PlaneGeometry(1,1)//16, 9) 
// let planeRatio = planeGeom.parameters.width / planeGeom.parameters.height; 
// texture.wrapS =  THREE.RepeatWrapping; // 
// texture.repeat.x = planeRatio / imgRatio;
// texture.offset.x = -0.5 * ((planeRatio / imgRatio) - 1);  

//this doesnt work as well
// const aspectOfPlane = planeGeom.parameters.width / planeGeom.parameters.height;
// const aspectOfImage = image.width / image.height;
// let yScale = 1;
// let xScale = aspectOfPlane / aspectOfImage;
// if (xScale > 1) { // it doesn't cover so based on x instead
// xScale = 1;
// yScale = aspectOfImage / aspectOfPlane;
// }
// texture.repeat.set(xScale, yScale);
// texture.offset.set((1 - xScale) / 2, (1 - yScale) / 2);

//this is another try
// var repeatX, repeatY;
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
// if (img.image.height < img.image.width) {
//   repeatX = planeGeom.parameters.width  * img.image.height / (planeGeom.parameters.height *img.image.width);
//   repeatY = 1;
//   texture.repeat.set(repeatX, repeatY);
//   texture.offset.x = (repeatX - 1) / 2 * -1;
// } else {
//   repeatX = 1;
//   repeatY = planeGeom.parameters.width * img.image.width / (planeGeom.parameters.height  * img.image.height);
//   texture.repeat.set(repeatX, repeatY);
//   texture.offset.y = (repeatY - 1) / 2 * -1;
// } 


from Three,js image texture to scale fit-center

No comments:

Post a Comment