How to do a highlight animation when a material is selected?

[nunowar]

Hi folks,

I would like to know if there is a simple way to do a highlight animation when a material is selected?

I'm trying to do it by changing the color after the material is clicked and setting the original color after 500ms, but it's not smooth...

$(modelViewer).on('click', function(e) {
    const material = modelViewer.materialFromPoint(e.clientX, e.clientY);

    if (material != null) {
        partSelected = material.name;
        materialSelected = metafields['material-' + material.name];

        material.pbrMetallicRoughness.setBaseColorFactor('#FFF');

        setTimeout(function() {
            modelViewer.model.getMaterialByName(partSelected).pbrMetallicRoughness.setBaseColorFactor(data.now.parts[partSelected].material[metafields['material-' + partSelected]].colors[metafields['color-' + partSelected]].hex);
        }, 500);
    }
});

[elalish]

You'll need to use requestAnimationFrame to set an interpolated color each frame if you want a smooth transition.

[nunowar]

Thanks.