TransformControls XZ Plane Movement Without Axes

Based on your goal of creating a Sims 4-like control scheme where objects can be moved freely on the XZ plane without displaying any axes, I can suggest a better approach to achieve this.

The issue with your current code is that you're trying to hide all axes while still expecting the control to work. TransformControls needs at least one axis to be visible to function properly.

Solution

Instead of hiding all axes, you should:

1. Set the TransformControls to translation mode
2. Configure it to only show the plane you want (XZ plane)
3. Hide the individual axes

Here's how you can implement this:

JAVASCRIPTCopied
// Create transform controls
const transformControls = new THREE.TransformControls(camera, renderer.domElement);
scene.add(transformControls);

// Attach to your object
transformControls.attach(yourObject);

// Set to translate mode
transformControls.setMode('translate');

// Show only the XZ plane and hide individual axes
transformControls.showX = false;
transformControls.showY = false;
transformControls.showZ = false;
transformControls.showXY = false;
transformControls.showYZ = false;
transformControls.showXZ = true;  // Only show the XZ plane

// Optional: Set the size of the controls
transformControls.size = 0.8;

This configuration will display only the XZ plane (the pink square) without any of the individual axis handles, allowing your users to move objects freely on that plane similar to the Sims 4 building mode.

If you need to further customize the appearance of the plane itself, you might need to modify the TransformControls source code, as there isn't a direct API to change the plane's appearance.

Remember to add the necessary event listeners to handle the dragging state:

JAVASCRIPTCopied
transformControls.addEventListener('dragging-changed', function(event) {
    // Disable orbit controls when dragging objects
    orbitControls.enabled = !event.value;
});

This approach should give you the Sims 4-like movement control you're looking for.