Is the image resizable while adding to a mesh using material?
Eg :
backWall.material = new BABYLON.StandardMaterial(“backWallMat”, scene);
backWall.material.diffuseTexture = new BABYLON.Texture(“/textures/logo.svg”, scene);
you can set uScale and vScale to tile Texture on mesh
Texture | Babylon.js Documentation (babylonjs.com)
1 Like
But this is used to tile right? it cant be used to resize i believe.
Can you please post everything related to a same issue in just a single post? You will get faster answers for the overall issue of yours and it will keep the forum cleaner. Thanks.
With that said, for the above, your assessment is wrong. Scale is used to apply a scale of the texture/image on the object. A scale of 1 will make the texture/image fit the object. A lower scale will make the texture bigger and will crop it at the limits of the object. Whereas, and only in this case, a higher scale number (higher than 1) will make it so that the texture is smaller than the object and will (by default) be repeated/tiled to still match the size of the object.
ok sure, then how can i crop and make it small?
To be specific, the backwall image should be cropped out and make it small. How can i do that?
backWall.material = new BABYLON.StandardMaterial(“backWallMat”, scene);
backWall.material.diffuseTexture = new BABYLON.Texture(“/textures/logo.svg”, scene);
What you want is to show a texture that is smaller than the object, correct. Apparently, a logo.
What you don’t quite understand here (I suppose) is that a texture is not an image only (at least not for a mesh). There is a way to have your texture smaller than the mesh but it requires you to do a pre-pass and calculate and fill-in the remaining space. And then you would still need to align your image. Sounds a bit complex for just placing (a logo, is it?) on a texture.
The easiest way (and the one I use for that) is simply to create a larger sized png, with the max size of the texture I want my logo to be placed on (leaving plenty of transparent space around it). This way I can still make it bigger but at 1 scale, it will always fit the entire object texture.
Yes, i got your point. let me try that way. thank you 
can we use the position property for these textures?
yes, you can use uOffset and vOffset (but it’s just for fine tuning the alignment, it won’t change anything for the above). To have a texture smaller than the object, you need to use the wrap property but as I said, you would then need to fill-in the remaining space (or it will create artefacts).
Simply put, make a PNG with plenty of transparent space around it. Next use the vScale, uScale, vOffset and uOffset properties to finetune it on your mesh BUT never make the scale bigger than 1. If this is not enough, simply make more transparent space on your PNG.
3 Likes