如何在 TransformControls 模式下仅保留箭头进行翻译？

Question

目前

TransformControls

满足我的需求，但他们有额外的东西，比如物体距离上的箭头和一些方块。我是否可以将它们关闭并只保留箭头？

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);

编辑：添加图像以供参考

最少的复制代码。预先感谢！

Answer 1

检查 Gizmo 的类（第 #781 行），

https://github.com/mrdoob/ Three.js/blob/master/examples/jsm/controls/TransformControls.js

class TransformControlsGizmo extends Object3D

并尝试根据该方法，禁用某些东西

this.gizmo['translate'].XY.visible = false;
this.gizmo['translate'].YZ.visible = false;
this.gizmo['translate'].XZ.visible = false;
this.gizmo['rotate'].E.visible = false;
this.gizmo['scale'].XYZ.visible = false;
this.gizmo['scale'].XY.visible = false;
this.gizmo['scale'].YZ.visible = false;
this.gizmo['scale'].XZ.visible = false;