CODEWITHSUNDEEP
three.js
user1584421
user1584421

Reputation: 3863

Changing the colour of a face of a cube

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);
            }
        }

    }

Upvotes: 1

Views: 79

Answers (1)

Georges
Georges

Reputation: 11

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

Upvotes: 1

Related Questions