firtoz / react-three-renderer

Render into a three.js canvas using React.
https://toxicfork.github.com/react-three-renderer-example/
MIT License
1.49k stars 155 forks source link

Binding events to mesh and altering mesh #176

Open alexanderfrey opened 7 years ago

alexanderfrey commented 7 years ago

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 the help of the threex library. The result is that the event is 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 the parsedModel helper class to load external json from blender.

this.props.parsedModel.model.traverse((child) => {
        if(mesh instanceof THREE.Mesh){
          this.domEvents.addEventListener(mesh, 'mouseover', (event) => {
            event.target.material.opacity = 0.5. // does not work
            mesh.material.opacity = 0.5. // does not work either
          }, false)
        }
      });

My question is:

What is the best practice way to add events to individual meshes and change certain properties of those meshes when an event is fired ?

Does anyone have some experience with threex together with react-three-renderer ?

Any help is much appreciated.

Kind regards, Alexander

toxicFork commented 7 years ago

For opacity to work please ensure that the transparent property is set to true (and that the shader or material supports these properties.

If you have access to the mesh or material then the way you did it should work.

You could try changing other properties of the mesh or material to see if it will have a visible effect, as well.

Unfortunately I have not had opportunity to use threex and am not sure at what level it can interact with R3R.

alexanderfrey commented 7 years ago

Thanks for your reply. I'm trying to export a model to Three.js json from blender or the three.js online editor but up to now only blender seems to work. The strange thing is that the transparent property always seems to false after exporting ?! No matter what I do.

Could it be that three.js binding is still r84 and there are bug fixes in the r85 ? Do you plan any releases to ensure compatibility with r85 ?

Thanks for your help and best regards, Alexander