Currently, I am using TransformControls which meets my requirements. However, it includes extra elements such as arrows and squares around the object. Is there a way to disable these additional elements and only display the arrows?
https://i.sstatic.net/LkEJG.png
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: Including image for visual reference
https://i.sstatic.net/oOhBD.png
Minimal Example Code Provided. Appreciate your help!