[Solved]How to prevent the fact that the arrows gets inside the box?

Questions
,
1

I want to prevent that when I zoom the arrows won’t be “inside” the box. Also, if it could be possible to have the arrows at the lower left corner of the object.

image
image1623×827 2.32 KB

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(5, 5, 5);
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')
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);
});

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


let isDragging = false;


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


function animateTheeBox() {
    if (!isDragging && !orbitControls.enabled) {
        rayCasters.setFromCamera(mousePos, camera);
        const intersect = rayCasters.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);

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

This is Minimal Reproducing Code.

1 Like
2

Like this?

image
image1577×1208 144 KB

1 Like
3

I also added code to re-enable depth test on the widget to make it look like this, is this is what you meant:

image
image1577×1208 141 KB

1 Like
4

Yess exactly!!! I’m not near my laptop now but when I do I will mark this as solution!!