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

似乎您在拨弄中混入了不同的空间。因此，直接将窗口坐标分配给顶点数据是不正确的。相反，请尝试始终在世界空间中工作，这可以通过使用当前光线投射逻辑的结果轻松完成。像这样尝试：

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偏移。为了避免z战，我分别为polygonOffset和polygonOffsetFactor设置了材料。

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

1 个答案: