CODEWITHSUNDEEP
javascriptthree.jsclickable
sRcBh
sRcBh

Reputation: 286

Three.js - TransformControls

I'm using the transformControls to translate, rotate and scale my objects. I want to be able to click on the different objects in my scene and transform them whenever I want: and it works ! The only problem is that geometries have their clickable zone half moved up:

The hitbox isn't centered

That is to say that I can't select my object on clicking in the lower zone, but if I click above it will be selected.

And for the collada files it is even worse.

I think it should be somewhere here:

function onDocumentTouchStart(event){
    event.preventDefault();
    event.clientX = event.touches[0].clientX;
    event.clientY = event.touches[0].clientY;
    onDocumentMouseDown(event);
}
function onDocumentMouseDown(event){
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects);
    if(intersects.length > 0){
        SELECTED = intersects[ 0 ].object;
        scene.add(control);
        control.attach(SELECTED);
    } else{
        scene.remove(control);
    }
}

EDIT :

OMG... The problem was some margins which were here...

But now, my beginner problem is that I don't really know how to attach transformControls to my object. With the transformControls, I still have the problem. But when I change the material color on click, it works perfectly. Have the transformControls some kind of margins ? I did this :

if(intersects.length > 0){
            SELECTED = intersects[ 0 ].object;
            scene.add(control);
            control.attach(SELECTED);
        } else{
            scene.remove(control);
        }

Upvotes: 2

Views: 5340

Answers (2)

jox
jox

Reputation: 2368

The answer by sRcBh is basically correct, but the code contains a mistake. The detach method of TransformControls does not take any arguments.

if (intersects.length > 0) {
    SELECTED = intersects[ 0 ].object;
    control.attach(SELECTED);
    scene.add(control);
} else {
    control.detach(); // <- THIS IS CORRECT
    scene.remove(control);
}

(See https://threejs.org/docs/#examples/en/controls/TransformControls)

Upvotes: 0

sRcBh
sRcBh

Reputation: 286

The answer was obvious... :

    if(intersects.length > 0){
    SELECTED = intersects[ 0 ].object;

    control.attach(SELECTED);
    scene.add(control);

} else{
    control.detach(SELECTED);
    scene.remove(control);
}

I forget to detach the controls

Upvotes: 2

Related Questions