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

【问题标题】：Move an object in a threejs scene with mouse用鼠标在threejs场景中移动对象
【发布时间】：2016-05-02 22:55:07
【问题描述】：

我需要在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

【问题讨论】：

你说不能选择“一个对象”是什么意思？您可以选择所有其他对象并且您不能仅选择那个对象吗？
对不起，我的错。我在场景中有很多对象，我需要用鼠标拖动其中一个对象（例如示例 draggablecubes），但在我的应用程序中我有其他代码结构，所以这个示例在我的项目中不起作用。我在想错误在于相机位置/旋转。提前感谢您的帮助:)。
您的页面is not working。你能不能不做一个小提琴来展示你的代码？
这个link 有效。您单击黄色圆环并将圆环添加到场景中，没关系。现在我需要在场景中拖动红色圆环。我正在尝试在文件 simulador/view/Cena3D.js 中实现执行此操作的函数，我在其中实现了 onDocumentMouseDown(event) 函数。在此功能中，我单击红色圆环，圆环改变了不透明度，但代码不起作用，我无法与对象相交。提前感谢您的帮助。

标签： javascript three.js

【解决方案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;

这对我有用

【讨论】：