Model texture url image disable stretch

[henrik-dons]

Hello, I use an image upload input to upload image to a model texture layer: modelViewer.createTexture(textureUrl)

But the image gets stretched across the whole texture
Is there a way to disable the stretching?

[elalish]

No, that's how textures work - the stretch is defined by the UV coordinates in your model - you need the [0, 1] rectangle of UVs to cover the area of the shirt you desire.

[elalish]

Actually, I take it back - there is a way to affect this without changing your model. If you go to our materials API and scroll down the to Sampler interface, you'll see you can do something like mv.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture.sampler.setScale([0.6, 1]); - you may need setOffset as well.

[henrik-dons]

Okay thanks! But it is best to define inside the model file itself?

Because we have other model which also has stretching issues.
We apply texture image dynamically to the model.
But then the whole image gets stretched instead of repeated on material

See image or link: https://ecommerce.kfive.it/product/profilo-standard/

[elalish]

Did you try the setScale feature I showed above? It should also affect this stretching/repeating issue. I won't be able to help until you give me a simple example URL where you are trying to use the API and can describe exactly what you are failing to achieve.

[henrik-dons]

Hello,

Yes I tried all methods.
Unfortunately this don't seem to work.
I'm testing on version 3.5.0

I have created following function based on the example docs:

async function createAndApplyTexture(name, textureUrl, channel = "baseColorTexture") {
	if ( textureUrl ) {
		var texture = await modelViewer.createTexture(textureUrl);

		var sampler = texture.sampler;
                sampler.setScale([0.6, 0.6]);
	} else {
		var texture = null;
	}

	var material = modelViewer.model.getMaterialByName(name);
	await material.ensureLoaded();

        if ( material && material.pbrMetallicRoughness[channel] ) {
	       material.pbrMetallicRoughness[channel].setTexture(texture);
        }
});

[elalish]

I won't be able to help until you give me a simple example URL where you are trying to use the API and can describe exactly what you are failing to achieve.

I still need this to help. If I can't see what you see, I have no idea what the problem is. One thing - have you tried setting the scale after setting the texture? This could be a bug.