TransformControls Modification for Simultaneous Translation and Rotation

Based on the available documentation, the standard TransformControls in Three.js doesn't natively support displaying both translation and rotation controls simultaneously as shown in your reference image (Dreis Gizmo).

The default TransformControls implementation requires switching between different modes:

• Translation mode
• Rotation mode
• Scaling mode

Possible Approaches

To achieve functionality similar to the Dreis Gizmo with both translation and rotation controls visible simultaneously, you would need to:

1. Create a custom implementation by extending or modifying the existing TransformControls class
2. Use multiple TransformControls instances - one for translation and one for rotation - and manage their interactions carefully

Implementation Considerations

If you decide to create a custom implementation:

JAVASCRIPTCopied
// Example approach (conceptual)
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

class CombinedTransformControls extends TransformControls {
  constructor(camera, domElement) {
    super(camera, domElement);
    
    // Override or extend the necessary methods to display both control types
    // This would require deep understanding of the TransformControls implementation
  }
  
  // Custom methods to handle the combined gizmo display and interaction
}

Alternatively, you could try using two separate instances:

JAVASCRIPTCopied
// Create separate controls for translation and rotation
const translateControls = new TransformControls(camera, renderer.domElement);
translateControls.setMode('translate');
// Customize appearance if possible

const rotateControls = new TransformControls(camera, renderer.domElement);
rotateControls.setMode('rotate');
// Customize appearance if possible

// Attach both to the same object
translateControls.attach(object);
rotateControls.attach(object);

scene.add(translateControls);
scene.add(rotateControls);

// You'll need to handle potential conflicts between the two control sets

Challenges

The main challenges with this approach include:

1. Handling interaction conflicts between the two control types
2. Managing the visual appearance to avoid cluttering the interface
3. Ensuring proper event propagation between the controls

There's no direct documentation indicating that anyone has successfully implemented this specific functionality in the standard Three.js controls, but it's technically possible with custom development.