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

Question

我正在使用 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;
    }

//如需完整代码，请点击此链接 https://jsfiddle.net/shawnswebsites/tcpakwgL/1/

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

Answer 1

看来你在 fiddle 中混合了不同的空间。所以直接将窗口坐标分配给顶点数据是不正确的。相反，尝试始终在世界空间中工作，这可以通过使用当前光线转换逻辑的结果轻松完成。像这样尝试一下:

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;

}

演示:https://jsfiddle.net/qw03d14o/1/

还需要重构一些代码，因为理想情况下飞机应该放置在地面上，没有 y 轴偏移。我为相应的 Material 设置了 polygonOffset 和 polygonOffsetFactor 以避免 z-fighting。