WebGL中的拖放方向(Glitching drag&drop direction in WebGL)

WebGL中的拖放方向(Glitching drag&drop direction in WebGL)

我试图通过拖放实现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。 我可以在这里找到的文件中包含整个代码（尽管它在小提琴中不起作用）

为了正确显示参考，我禁止向其中一个方向移动并将其上传到此处 ，这样您就可以正确测试这种奇怪的行为。

谁知道问题可能在哪里？ 谢谢。

I am trying to implement camera movement in WebGL project by drag&drop. I've did it via calculating differences from previous position in the event, and then this value adding to current rotation level.

Here is the piece of code which is doing the job:

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; }

It is specifically the part in animate() function up to requestAnimationFrame(animate). Variable mouseDown is set to true on ouseDown event and reset to false at mouseUp. The whole code as I have it in files you can find here (although it does not work in the fiddle)

To show reference properly I disable moving in one of the direction and uploaded it here, so you can properly test the strange behaviour.

Anyone knows where the problem might be? Thanks.

最满意答案

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

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

So, the problem was in the mouseDown event, I needed to store actual coordinates there as well.

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