使用鼠标在Threejs场景中移动对象

Question

我需要在Threejs场景中移动一个对象，但是当我用鼠标单击时我无法选择一个对象。 我尝试为我的应用程序修改此代码（ https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_draggablecubes.html ），但在我的情况下不起作用。

这个功能正确吗？

摄像机的位置和旋转是否正确（请参阅完整的代码）？

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

有关完整的代码，请访问https://github.com/lohmanndouglas/Simulador.git

Answer 1

引起该问题的原因是我在页面中使用了其他DIV，因此要解决此问题，必须将clientX和clientY转换为DIV的相对坐标。

我更改了更新变量mouse.x和mouse.y的行。

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

为了这：

   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;

这对我有用