Javascript 在Three.js中，当用户拖动鼠标时，如何获得正确的坐标

我正在使用ThreeJS。我需要在用户单击和拖动鼠标时绘制一个矩形

我正在使用threejs

    function onDrag(event) {
        if (!isDrawing) { return; }
        // The rectangle should follow the users mouse 
        var clientX = (event.pageX - startPosition.x) / 50;
        var clientY = (event.pageY - startPosition.y) / 50;
        var vertices = geometry.vertices;
        vertices[1].x = -clientX * -1;
        vertices[2].x = -clientX * -1;
        vertices[2].z = -clientY * -1;
        vertices[3].z = -clientY * -1;
        geometry.verticesNeedUpdate = true;
    }

//有关完整代码，请点击此链接

---

鼠标按下事件后，矩形应跟随用户鼠标。但是矩形并不跟随鼠标，它比用户正在绘制的要小得多。谁能告诉我我做错了什么吗

看来你把不同的空间混在了一起。因此，直接将窗口坐标指定给顶点数据是不正确的。相反，尝试始终在世界空间中工作，这可以通过使用当前光线投射逻辑的结果轻松完成。试着这样做：

function onDrag( event ) {

    if ( ! isDrawing ) return;

    var current = get3DPosition( event );

    var x = current.x;
    var z = current.z;

    geometry.vertices[ 1 ].x = x;
    geometry.vertices[ 2 ].x = x;
    geometry.vertices[ 2 ].z = z;
    geometry.vertices[ 3 ].z = z;
    geometry.verticesNeedUpdate = true;

}

演示：

---

还需要重构一些代码，因为平面应该理想地放置在地面的顶部，没有y偏移。我已经为相应的材料设置了

polygonOffset

和

polygonOffsetFactor

，以避免z-fights。

谢谢，我对threejs有点陌生，这有点帮助。