Transform Control Colors #31257
Description
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
Metadata
Metadata
Assignees
Projects
Relationships
Participants
Activity
Mugen87 commentedon Jun 12, 2025
How about something like a
setColors()method? This approach is already used in helpers likeAxesHelperorCameraHelper.setColors()must process the gizmo hierarchy and update the materials accordingly.sweissbach commentedon Jun 12, 2025
Yes this is also a cool solution