[Solved]How do I leave only the arrows in TransformControls mode translate?

Questions
,
1

At the moment TransformControls fits my needs but they have extra stuff like arrows in distance of the object and some squares. Is there anyway of me turning these off and instead keep only the arrows?

wti9m9c087ec1

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

const boxGeometry = new THREE.BoxGeometry();
const theeBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
const theeBox = new THREE.Mesh(boxGeometry, theeBoxMaterial);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);

scene.add(theeBox);

const orbitControls = new OrbitControls(camera, renderer.domElement);
const transformControls = new TransformControls(camera, renderer.domElement);
transformControls.attach(theeBox);
transformControls.setMode('translate')
scene.add(transformControls);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(50, 30, 20);
camera.lookAt(0, 0, 0);

const rayCaster = new THREE.Raycaster();
const mousePos = new THREE.Vector2();

let isDragging = false;

transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
    isDragging = event.value;
});



function animateTheeBox() {
    if (!isDragging && !orbitControls.enabled) {
        rayCaster.setFromCamera(mousePos, camera);
        const intersect = rayCaster.intersectObjects([theeBox]);

        if (intersect.length === 0) {
            const moveSpeed = 0.1;
            camera.position.x += (mousePos.x - 0.5) * moveSpeed;
            camera.position.y += (mousePos.y - 0.5) * moveSpeed;
            camera.lookAt(0, 0, 0);
        }
    }

    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animateTheeBox);

Edit: Added this image for reference

reference

Minimal Reproducing Code. Thanks in Advance!

2

May be this topic could help a bit, even if it is not a complete solution:

3

I used a reference of yours in my code

controls._gizmo.gizmo.translate.getObjectByName('XY').geometry = invisible;
controls._gizmo.picker.translate.getObjectByName('XY').geometry = invisible;

with “invisible” being on quotes because otherwise I got a blank white screen but even when they are on quotes I got an error: “Uncaught TypeError: sphere is undefined”.

4

To answer to my question since I have found the solution. First I took the code from this stackoverflow answer. Then instead of getting objects by name I got them by ID:

const gizmo = transformControls._gizmo.gizmo;
[83, 86, 89, 91, 92, 93, 94].forEach(axis => {
    // const obj = gizmo.translate.getObjectByName(axis);
    const obj = gizmo.translate.getObjectById(axis);
    obj.visible = false;
    obj.layers.disable(0);
});