Changing the colour of a face of a cube - three.js

Question

I am trying to change the colour of the face of a cube, when the mouse hovers over:
This is what i came up with so far:
function onDocumentMouseMove(event)
{
event.preventDefault();
// update the mouse variable
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 )
{
var index = Math.floor( intersects[0].faceIndex / 2 );
switch (index)
{
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
}
}
}
The problem is i dno't know what method to use to paint the faces a different colour inside the switch-case
Take a look at this jsfiddle with code i used from Georges:
https://jsfiddle.net/rand0mus3r/5qe4gyj3/4/
Look only for the onDocumentMouseMouve() function.
I tried your code but it didn't work.
The reason i put your code under the if (cube.material.color == 0xff0000),
was because i still wanted the cube to be painted grey when a hover over.
But when it it selected, thus the colour is red, i wanted on hover over, that side to change.
So when you change the y dimension on the gui and create a cube, and it IS selected (thus the colour is red), when you hover over its sides, it doesn't change colour.
I am stuck as to what to do next, as it is unclear how to paint the sides of the cube.
Here is the code for this function:
function onDocumentMouseMove(event)
{
event.preventDefault();
// update the mouse variable
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
{
cube.material.color.set( 0xF7F7F7 );
}
else if (isClicked === false)
{
cube.material.color.set( cube.userData.originalColor );
}
if (cube.material.color == 0xff0000)
{
if ( intersects.length > 0 )
{
// pick the first object. It's the closest one
this.pickedObject = intersectedObjects[0].object;
// save its color
this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
// set its emissive color to flashing red/yellow
this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
}
}
}

Answer 1

You're on the right track with normalizing your mouse position to pass into the raycaster. This page on ThreeJSFundamentals has a solution that should be similar to you're after, with the exclusion of coloring a specific face. I believe you need to set up your raycaster as
var raycaster = new THREE.Raycaster();
// cast a ray from the camera's location to where the mouse click was registered
raycaster.setFromCamera(mouse, yourCameraName);
Once you've got this, then you can call something similar to the following (taken from the link above)
var intersectedObjects = raycaster.intersectObjects(scene.children);
if (intersectedObjects.length) {
// pick the first object. It's the closest one
this.pickedObject = intersectedObjects[0].object;
// save its color
this.pickedObjectSavedColor = this.pickedObject.material.emissive.getHex();
// set its emissive color to flashing red/yellow
this.pickedObject.material.emissive.setHex((time * 8) % 2 > 1 ? 0xFFFF00 : 0xFF0000);
}
You may also find it's easier to break your cube into an Object3D() of planes, and color the intersected plane