Need help with preventing 'frame' from stretching to fit on the canvas in 3D

[Bushra_Fatima]

I am working on creating these ‘rectangle frames’ in 3D design area of my project. The reason behind these ‘frames’ is that we need a way of showing these “frames” in 3D that represents the selected sheet size (there are. That sheet size would be like viewports but it would be fixed in the current view, and the user could pan and zoom their model to “center it” etc. without the frame moving.
I created these ‘rectangles frames’ using GIMP software with correct dimensions. And, then I am calling these frames in 3D to see if it will work.
NOW, the PROBLEM is that these frames are stretching to fit on the canvas and it SHOULD NOT do that because they should maintain it’s exact size or else these frames will not work.
I have looked up many ways using Babylon Docs, but didn’t find any good method I can use. Does anyone have any idea about this? To prevent these frames from stretching?
I would appreciate any help as I dont have much knowledge about Babylon JS.

here is my code regarding that:
const importImageComponent3D = async (imageDataURL, imageBlob, scene) => {

const {design, camera3D} = store;

if (design?.designRef?.current?.designId) {
camera3D.updateImageComponent(imageDataURL);
}
}
updateImageComponent = (imageUrl) => {
const { scene, camera3D } = store;
if (imageUrl != null && imageUrl != undefined) {
const layer = new BABYLON.Layer(‘image’, null, scene);
layer.texture = new BABYLON.Texture(imageUrl, scene);
layer.layerMask = LAYER_MASK_3D;
layer.isBackground = false;
camera3D.renderTarget = layer;
} else {
camera3D.renderTarget = null;
}
}

here ’ importImageComponent3D’ is basically allowing me to insert these ‘frames’ from my local machine.
Thanks

[carolhmj]

Hello and welcome to the Babylon community! Can you share your code in a Playground please? It’s easier to understand and discuss solutions this way

[Bushra_Fatima]

Hello, thanks. the problem is that I can’t really create this in the playground because i am basically importing these frames that I created in GIMP and they are in my local. And in the playground I don’t think I can insert anything from local. But, I can provide any other code you want to see. I have attached the frame here for you to look at. It’s basically just a rectangle frame with 1056x1632 size. And in my application when I am inserting this frame, it’s stretching to fit on the canvas. I also attached the video reference. Hope this helps.

[carolhmj]

You just need to upload your resource somewhere to use it in the playground Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)