Place hotspots on all materials or access the userData of a model

[subhankar-trisetra]

I want to place hotspots on all the materials of the model, so that I can in turn change the color of the material.
In my current approach I am listening to the click event of ModelViewer, and then calling positionAndNormalFromPoint(x, y) to get the values and then place hotspot, which in turn changes the color of the material.

Can anybody help me with ideas to acheive my problem?

I thought of an idea i.e. to traverse through all the children of the model, and then the ones using a material, would have their worldPosition. I was thinking to use that worldPosition to place the hotspot on the object.

But sadly, modelViewer doesn't expose the Three3D DOM.

UPDATE:
I am finally able to access the ThreeJS Scene, which gives me flexibility to work with model viewer.

import { ModelViewerElement } from '@google/model-viewer';

export async function getScene(modelViewer: ModelViewerElement) {
    // @ts-ignore
    const internalThreeJsScene = modelViewer[Object.getOwnPropertySymbols(modelViewer).find((symbol) => symbol.toString() === 'Symbol(scene)')];
    console.log('getScene', internalThreeJsScene);
    return internalThreeJsScene as THREE.Scene;
}