How to Highlight/Colorchange the 3D Object/Mesh on Mouse Hover

[sameeryel]

Hello all,

I'm a Product Designer and very new to Coding and even to Github. I'm trying to use Model-viewer to showcase some of my work on my personal portfolio website.

I would like to be able to make a scene where the mesh object is highlighted (May be change of color or an outline border around the 3D object) when the user hovers the mouse over the object in the scene. It will be a collection of objects and the mouse hover should be able to highlight each object mesh separately as the mouse hovers over them.

Kind of like this but in model viewer
https://stemkoski.github.io/Three.js/Mouse-Over.html

May be something like this (https://modelviewer.dev/examples/scenegraph/#pickMaterialExample) but with a mouse hover action instead of clicking.

Any code snippet which I can copy and paste and modify for this would be highly appreciated.

Thanks

[elalish]

You found the right example; you just need to change from a click event listener to a mousemove listener. Also, properties are per material, not per mesh, so you'll need to author your GLB with separate materials for each thing you want separately selectable.

[sameeryel]

[sameeryel]

Should that "click" word be changed to "mousemove"or anything else has to be done for the mousemove listener?

[elalish]

To do something this advanced, you'll need to learn a bit of JS. It won't be too hard, but yes, you'll need to make some changes, look on MDN, debug, etc.

[sameeryel]

Appreciate your quick responses! Hopefully the future is all drag and drop based.