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在ouseDown事件上设置为true，在mouseUp时重置为false。我在文件中找到了整个代码here（尽管它在小提琴中不起作用）

要正确显示引用，我禁用其中一个方向的移动并将其上传here，以便您可以正确测试这种奇怪的行为。

任何人都知道问题可能在哪里？感谢。

Answer 1

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

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

WebGL

1 个答案: