WebGL 中的拖放方向出现故障

Question

我正在尝试通过拖放在 WebGL 项目中实现相机移动。我通过计算与事件中先前位置的差异，然后将此值添加到当前轮换级别来做到这一点。

这是执行此任务的代码片段：

function animate()
{
    // drag and drop part
    /*var spdx = 0, spdy = 0;
    spdy =  (HEIGHT / 2 + difference_y) / 400;
    spdx =  (WIDTH / 2 + difference_x) / 400;*/

    if(mouseDown)
    {
         camera.rotation.x += difference_x / 200;
        //camera.rotation.y += difference_y / 200;
    } 

    requestAnimationFrame(animate);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFSoftShadowMap;

    object.rotation.x += 0.005;
    object.rotation.y += 0.01;

    // Render the scene.
    renderer.render(scene, camera);
    //controls.update();

}

function onDocumentMouseMove(event){
    mouseX = event.clientX;
    mouseY = event.clientY;

    difference_x = mouseX - last_position_x;
    difference_y = mouseY - last_position_y;

    last_position_x = mouseX;
    last_position_y = mouseY;
}

具体是animate()函数中到requestAnimationFrame(animate)为止的部分。变量 mouseDown 在 useDown 事件上设置为 true，在 mouseUp 上重置为 false。我在文件中的整个代码你可以找到 here（尽管它在 fiddle 中不起作用）

为了正确显示参考，我禁用了向其中一个方向移动并上传了它 here，这样您就可以正确地测试奇怪的行为。

有人知道问题出在哪里吗？谢谢

Answer 1

所以，问题出在 mouseDown 事件上，我也需要在那里存储实际坐标。

function onDocumentMouseDown(event){
    mouseDown = true;
    last_position_x = event.clientX;
    last_position_y = event.clientY;
}

WebGL 中的拖放方向出现故障

Glitching drag&drop direction in WebGL

javascript

three.js