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
This is what happens when I try to fit the image top the different frames/parts.
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