Three.js texturing and highlighting issue

Question

I have a cube that I want to change the colour of when I hover over it. This works when I just use one texture, but now I want to advance this to using a texture array, one texture per face.

if ( intersects.length > 0 )
{
// if the closest object intersected is not the currently stored intersection object
   if ( intersects[ 0 ].object != INTERSECTED ) 
    {
      // restore previous intersection object (if it exists) to its original color
        if ( INTERSECTED ) 
            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
            // store reference to closest object as current intersection object
            INTERSECTED = intersects[ 0 ].object;
            // store color of closest object (for later restoration)
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            // set a new color for closest object
            INTERSECTED.material.color.setHex( 0x118D08 );
    }

When I do this the color change on hover doesn't work and I get these errors:

Uncaught TypeError: Cannot read property 'setHex' of undefined [repeated 13 times]

Uncaught TypeError: Cannot read property 'getHex' of undefined

The cube is textured the way I want it to be, so the error is not with that. I think it has something to do with MeshFaceMaterial not having a color parameter or something. Could anyone tell me if what I am trying to do is possible or any ideas where I'm going wrong?

So you changed a `MeshBasicMaterial` to a `MeshFaceMaterial`? Can you elaborate on `INTERSECTED` and `intersects[0]` a bit more? Be aware that the latter is just a container for other materials that are indexed on a per-triangle basis (using the `materialIndex` attached to a `Face3` instance). You'd have to index it. And as a sidenote: Just always use curly braces in loops and conditions (see [semicolon insertion](http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)) — Stefan Hanke, Aug 18 '14 at 16:25
intersects[0] is an element of an array of the objects in the scene, and INTERSECTED is the object my mouse has intersected with and the object I want to change the color of. I really want to know if it is possible to change the color of a MeshFaceMaterial, I think these lines: INTERSECTED.material.color.setHex( INTERSECTED.currentHex ); are throwing errors because I'm not getting to the correct element to change — Jennifer M, Aug 19 '14 at 09:08
A [`MeshFaceMaterial`](http://threejs.org/docs/index.html#Reference/Materials/MeshFaceMaterial) has no color per se. It aggregates other materials that are set on the individual faces on the boxes. Try creating different materials and setting those directly on the meshes. Try to minimize your code and upload to [jsfiddle](http://jsfiddle.net/) — Stefan Hanke, Aug 19 '14 at 16:00

score 0 · Answer 1 · edited May 23 '17 at 12:06

You have to get the 'materials array' from the 'material' like so:

for(var p =0; p < INTERSECTED.material.materials.length; p++){
    INTERSECTED.currentHex = INTERSECTED.material.materials[p].emissive.getHex();
}

This way you are not selecting the MeshFaceMaterial but the MeshLambertMaterial or MeshBasicMaterial that you are using for each face. If you are using images as your textures I would suggest checking out Three.js material texture and color for a quick answer to that question.

Hope this was helpful!

Three.js texturing and highlighting issue

1 Answers1