Colors of TransformControls' Axes Not Rendering Correctly After Mouse Hover

[TimJJTing]

• three version: 0.128.0
• @react-three/fiber version: 6.0.19
• @react-three/drei version: 4.3.3
• node version: 15.10.0
• npm version: 7.5.3

Problem description:

Colors of TransformControls' axes become white after mouse hover.
Their original color (red, green, and blue) are gone, which differs from the example shows in the official Three.js documentation.

Before mouse hover:

After mouse hover:

Relevant code:

Not sure what causes this bug, but you can find it here

[joshuaellis]

This is an issue in three-stdlib so i'm going to move it there.

[flixr]

Running into the same problem...

[Amaranthos]

So I tried to track down the cause of this one was it's affecting a project where I'm trying to use TransformControls from pmndrs/drei. It seems like it was introduced in cc079be, but I can't quite figure out what is causing the issue exactly

[orivier3]

I think I have found the root cause of this issue. I have looked at the original implementation of the transform control in the threejs library and tried to replicate the visual feedback.

I netted out with something like this :

Cause

So what seems to be wrong in the TransfromControl.js is the state management when the pointer is not hovering on a gizmo axis. The error is probably in the following code block;

three-stdlib/src/controls/TransformControls.ts

Lines 1272 to 1308 in 637f11d

	//@ts-ignore
	handle.material.opacity = handle.material.opacity || handle.material.opacity
	//@ts-ignore
	handle.material.color = handle.material.color || handle.material.color.clone()
	//@ts-ignore
	handle.material.color.copy(handle.material.color)
	//@ts-ignore
	handle.material.opacity = handle.material.opacity
	if (!this.enabled) {
	//@ts-ignore
	handle.material.opacity *= 0.5
	//@ts-ignore
	handle.material.color.lerp(new Color(1, 1, 1), 0.5)
	} else if (this.axis) {
	if (handle.name === this.axis) {
	//@ts-ignore
	handle.material.opacity = 1.0
	//@ts-ignore
	handle.material.color.lerp(new Color(1, 1, 1), 0.5)
	} else if (
	this.axis.split('').some(function (a) {
	return handle.name === a
	})
	) {
	//@ts-ignore
	handle.material.opacity = 1.0
	//@ts-ignore
	handle.material.color.lerp(new Color(1, 1, 1), 0.5)
	} else {
	//@ts-ignore
	handle.material.opacity *= 0.25
	//@ts-ignore
	handle.material.color.lerp(new Color(1, 1, 1), 0.5)
	}
	}

Broken code

This block of code doesn't make sense to me

three-stdlib/src/controls/TransformControls.ts

Lines 1271 to 1281 in 637f11d

	// highlight selected axis
	//@ts-ignore
	handle.material.opacity = handle.material.opacity || handle.material.opacity
	//@ts-ignore
	handle.material.color = handle.material.color || handle.material.color.clone()
	//@ts-ignore
	handle.material.color.copy(handle.material.color)
	//@ts-ignore
	handle.material.opacity = handle.material.opacity

I suppose that it was used to cache the axis colour in a previous revision, but as @Amaranthos mentioned cc079be commenting this block of code doesn't seem to do anything.
Maybe @joshuaellis, this could be the key to solve that problem, but I couldn't make sense of it.

Axes disappearing

At the end of the main code block

three-stdlib/src/controls/TransformControls.ts

Lines 1302 to 1306 in 637f11d

	} else {
	//@ts-ignore
	handle.material.opacity *= 0.25
	//@ts-ignore
	handle.material.color.lerp(new Color(1, 1, 1), 0.5)

This called as soon as the component is enabled, for me resulting in the axes disappearing entirely before the first hover when dynamically attaching TransfromControl to an object, the *= is the culprit here.

Proposed solution : managing the end of the hover state

Looking at the pointerHover event, the axis property is set to null when the user not hovering on top transform gizmo. So we can use that to reset the opacity of the gizmo. The following code created the gif that I shared at the top.

         if (!this.enabled) {  //component is not enabled. Hide the axes
          
           handle.material.opacity = 0; 

        } else if (this.axis) { 
          if (handle.name === this.axis) { // pointer hover an axis, set opacity of this.axis to 1 
            
            handle.material.opacity = 1.0;

          } else if (this.axis.split('').some(function (a) {  //don't understand this bit
            return handle.name === a;    
          })) {                                                

            handle.material.opacity = 1.0; 

          } else {  //set all other axis to 0.25 
            
            handle.material.opacity = 0.25; 
            
          }
        }else{   //when this.axis is null set all axis to maximum opacity expect the planar ones
          handle.material.opacity = handle.name==='XY'||handle.name==='YZ'||handle.name==='XZ'? 0.5 : 1;
        }

Please, @joshuaellis let me know the best course of action. Do you want me to create a PR with the following changes?
I think it would be ideal for the @react/three-drei TransfromControl component to follow the original three js behaviour.

[joshuaellis]

@orivier3 think that's a good idea, this is definitely a bug. So your PR is certainly more than welcome if you have an idea how to solve said issue!

[orivier3]

The solution was in the end pretty simple! See the PR.