What is the best way to apply or change textures in multiple parts of the object?

[nunowar]

Hi.

I would like to know if there is a better way to apply or change textures in multiple parts of the object, and how to show the loading progress bar for this tasks?

const modelViewer = document.querySelector("model-viewer");

const createAndApplyTexture = async (material, channel, textureFile) => {
	const texture = await modelViewer.createTexture(textureFile);

	if (channel.includes('base') || channel.includes('metallic')) {
		material.pbrMetallicRoughness[channel].setTexture(texture);
    } else {
    	material[channel].setTexture(texture);
    }
}

modelViewer.addEventListener("load", () => {
	modelViewer.model.materials.forEach(function(item, index) {
		if (item.name === 'body') {
			item.pbrMetallicRoughness.setBaseColorFactor('#222');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/body_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/leather_n.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/leather_rg.jpg');
		}

		if (item.name === 'body_stitches') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);
		}

		if (item.name === 'front') {
			item.pbrMetallicRoughness.setBaseColorFactor('#ccc');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'normalTexture', 'models/now/leather_n.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/leather_rg.jpg');
		}

		if (item.name === 'front_stitches') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);
		}

		if (item.name === 'top') {
			item.pbrMetallicRoughness.setBaseColorFactor('#ccc');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/top_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/leather_n.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/leather_rg.jpg');
		}

		if (item.name === 'top_stitches') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);
		}

		if (item.name === 'heel') {
			item.pbrMetallicRoughness.setBaseColorFactor('#ccc');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'normalTexture', 'models/now/leather_n.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/leather_rg.jpg');
		}

		if (item.name === 'laces') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/laces_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/laces_n.jpg');
			createAndApplyTexture(item, 'baseColorTexture', 'models/now/laces_tex.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/laces_rg.jpg');
		}

		if (item.name === 'lining') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/lining_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/lining_n.jpg');
			createAndApplyTexture(item, 'baseColorTexture', 'models/now/lining_tex.jpg');
		}

		if (item.name === 'plantar') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/plantar_ao.jpg');
		}

		if (item.name === 'ribbon') {
			item.pbrMetallicRoughness.setBaseColorFactor('#000');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/ribbon_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/ribbon_n.jpg');
			createAndApplyTexture(item, 'baseColorTexture', 'models/now/ribbon_tex.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/ribbon_rg.jpg');
		}

		if (item.name === 'ribbon_stitches') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);
		}

		if (item.name === 'sidepanel') {
			item.pbrMetallicRoughness.setBaseColorFactor('#ccc');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/sidepanel_front_heel_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/leather_n.jpg');
			createAndApplyTexture(item, 'metallicRoughnessTexture', 'models/now/leather_rg.jpg');
		}

		if (item.name === 'sidepanel_stitches') {
			item.pbrMetallicRoughness.setBaseColorFactor('#fff');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);
		}

		if (item.name === 'sole') {
			item.pbrMetallicRoughness.setBaseColorFactor('#ccc');
			item.pbrMetallicRoughness.setRoughnessFactor(0.8);

			createAndApplyTexture(item, 'occlusionTexture', 'models/now/sole_ao.jpg');
			createAndApplyTexture(item, 'normalTexture', 'models/now/sole_n.jpg');
		}
	});
});

[elalish]

You could probably use a Map of item name -> properties structure, to reduce duplication. You might also make use of mv.model.getMaterialByName(name: string): Material|null;