Transform Control Colors

[sweissbach]

Description

Hi great ThreeJS team,
I have a request regarding the TransformControls

I like to set up custom colors for the arrows and rectangles. I know hot to do that. But the yellow hover state is hard coded 0xffff00. And a can't image a solution aside from fork the code and write a new class.

Maybe a Colors Options Object would be fine to set up the colors.

Tankst

Solution

Maybe a Colors Options Object would be fine to set up the colors.

`export class ColorfulTransformControls extends TransformControls {
constructor(camera, domElement, options = {}) {
super(camera, domElement);

// Standardfarben
this.axisColors = Object.assign({
  X: 0xffffff,
  Y: 0x00ff00,
  Z: 0xff00ff,
}, options.axisColors);


	// this.matYellow = gizmoMaterial.clone();

	console.log(this);
	// this.matYellow.color.setHex( 0xffff00 );

this.hoverColor = new THREE.Color(options.hoverColor || 0xffff00);
this._customizeGizmoColors();

...

_customizeGizmoColors() {

	const gizmo = this.getHelper();




if (!gizmo) return;

gizmo.traverse(child => {
  if (child.material && child.name) {
    if (child.name.includes('X')) {
  child.material.color.set(this.axisColors.X);
    } else if (child.name.includes('Y')) {
      child.material.color.set(this.axisColors.Y);
    } else if (child.name.includes('Z')) {
      child.material.color.set(this.axisColors.Z);
    }
  }
});

}
}`

Alternatives

Or a class or object to override this

Additional context

No response

[Mugen87]

How about something like a setColors() method? This approach is already used in helpers like AxesHelper or CameraHelper.

controls.setColors( xAxis, yAxis, zAxis, active, inactive ); // defaults are red, green, blue, yellow, gray

setColors() must process the gizmo hierarchy and update the materials accordingly.

[sweissbach]

Yes this is also a cool solution