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;

这对我有用

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

1 个答案: