I'm currently working on adding camera movement to my WebGL project through drag-and-drop functionality. I've achieved this by calculating the differences in position from the previous event and then adding that value to the current rotation level.
Below is a snippet of the code responsible for this task:
function animate()
{
// Drag-and-Drop Section
/*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;
}
The section within the animate() function up to requestAnimationFrame(animate) pertains to handling mouse events. The variable mouseDown is set to true on the mousedown event and reset to false at mouseup. You can access the full code as it appears in the files here, although it may not function correctly within the fiddle.
To accurately demonstrate the issue, I have restricted movement in one direction and provided a test environment here. Feel free to explore and identify any potential problems.
If anyone has insights into where the problem might lie, I would greatly appreciate your input. Thank you.