Changing mesh in mouseover callback

[alexanderfrey]

Hi,

I have a question on how to alter meshes after the whole scene & model has been rendered.

In order to highlight specific meshes in my model I am registering a 'mouseover' event with your library. The result is that the event is successfully fired upon mouse hover and I even know what mesh caused the event but when I try to set the opacity of the mesh material it just gets ignored.

Notice, I'm using react with react-three-renderer.

this.props.parsedModel.model.traverse((child) => {
        if(mesh instanceof THREE.Mesh){
          this.domEvents.addEventListener(mesh, 'mouseover', (event) => {
           // mesh is defined and event.target is also set but changing the properties does not change the                
          // mesh in the scene for some reason
            event.target.material.opacity = 0.5. // does not work
            mesh.material.opacity = 0.5. // does not work either
          }, false)
        }
      });

My question is:

How do you change the properties of meshes in the callback ? Am I misunderstanding sth fundamentally wrong here ?

And also does anyone have some experience with threex together with react-three-renderer ?

Any help is much appreciated.

Kind regards,
Alexander