Move an object in a threejs scene with mouse

Question

I need to move an object in a threejs scene, but i can't select one object when i click with mouse. I tried adapt this code (https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_draggablecubes.html) for my application, but it didn't work in my case.

This function was correct?

The camera position and rotate is correct (see complete code)?

function onDocumentMouseDown(event) {
    console.log("function onDocumentMouseDown");
    console.log(mouse.x, mouse.y);
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objetos );

    if (intersects.length > 0) {
        alert("finalmente");
        console.log(intersects[0]);
        intersects[0].object.material.transparent = true;
        intersects[0].object.material.opacity = 0.1;
        SELECTED = intersects[0].object;
        var intersects = raycaster.intersectObject( plane );
        if ( intersects.length > 0 ) {
             offset.copy( intersects[ 0 ].point ).sub(plane.position);
        }
    }
}

For complete code access https://github.com/lohmanndouglas/Simulador.git

What do you mean when you say you can't select "one object"? Can you select all of the other objects and you are not able to select only that one? — Matt C
Sorry, my bad. I have many objects in scene and i need to drag one of this objects with the mouse (like the example draggablecubes), but in my application i have other code structure, so this example is not work in my project. I was thinking that error is in the camera position/rotation. Thanks in advance for your help :). — Lohmann
Your page is not working. Can you not make a fiddle to show your code? — Wilt
This link works . You click in yellow torus and add a torus into a scene, that is ok. Now I need drag the red torus in scene. I am trying to implement the function to do this in file simulador/view/Cena3D.js, where I implement the function onDocumentMouseDown(event). In this function I click in the red torus and the torus has change the opacity, but the code didn't work I can not able to intersect objects. Thanks in advance for your help. — Lohmann

Lohmann Lohmann · Accepted Answer · 2016-05-06T22:38:46

The problem was caused because I am using others DIV in my page, so to correct this problem its necessary to convert clientX and clientY to the relative coordinate of the DIV.

I changed the lines where I update the variables mouse.x and mouse.y.

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

For this:

   mouse.x = ( (event.clientX - event.target.getBoundingClientRect().left) /event.currentTarget.width ) * 2 - 1;
   mouse.y = - ( (event.clientY - event.target.getBoundingClientRect().top) / event.currentTarget.height ) * 2 + 1;

This works for me

Move an object in a threejs scene with mouse

1 Answers