How to change the color using "renderer.material.color"?

Hello Everyone,

I’m trying to make some arrows in order to show the parts of my 3d object. When I press the button to enable and show my arrows they become visible in white.

But I want to change the color to red when my mouse is over of certain button.

Now I can enabled and vanish my arrows and change the color to red from white, when the mouse cursor is over the button or Rect area assigned to change the color.

But when the cursor is outside of the Rect assigned to change the color. The color white is not back again.

Any advice is more than welcome!

Please take a look to this little short video.

Link video

Please take a look to my Script.

    private var alpha: float = 1; // alpha starts at 1
    private var vanish = false;
            var fadeSpeed : float = 7.5;
      
  
    function Update(){
 
    if(vanish){
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 1, Time.deltaTime * fadeSpeed);
    } else {
    renderer.material.color.a = Mathf.Lerp(renderer.material.color.a, 0, Time.deltaTime * fadeSpeed);
    }
    if(guiNew .alphaGo == 1){  
    t01();
    guiNew . alphaGo = 0;
    }
    if(guiNew .alphaGo == 2){
    t02();
    guiNew . alphaGo = 0;
    }
     if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
    }
	}
	
/////////////////////////////////////////
    
    function t01(){
    vanish = true;
    }
    
    function t02(){
    vanish = false;
    }

the easiest way would be add an else to your mousePosition if statement

if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42){
    renderer.material.color = Color.red;
}
else{
    renderer.material.color = Color.white;
}

Looks like you never set the color back to white once your mouse leaves the rect. Also, you are constantly setting the color every frame while the mouse is inside the rect.

Maybe try putting a bool to test whether it’s on or not. Then, add a function that will change the color based on the parameter you pass to it.

Try this, at the top of your class, add a private variable:

var selected = false;

then in your update function, change your mouse over check to this:

    if(Input.mousePosition.x>890&&Input.mousePosition.y>385&&Input.mousePosition.x<890+60&&Input.mousePosition.y<385+42)
    {
        if (!selected)
        {
           selected = true;
           ToggleArrow(selected);
        }
    
    }
else
{
    if (selected)
    {
        selected = false;
        ToggleArrow(selected);
    }

}

Then add a new method that will change the color based on whatever you pass to it:

function ToggleArrow(var selected)
{
    if (selected)
    {
        renderer.material.color = Color.red;
    }
    else
    {
        renderer.material.color = Color.white;
    }

}

FYI, there are a few GUI packages that might make it easier to handle the UI. EZGUI is one, and we’ve also tried UIToolKit from Prime31. It’s free and open-source–not the ideal solution but I thought it worked well.

P.S. I apologize if my JS syntax is incorrect, I primarily use C#.