Arcball Controls Panning and Camera Animation leads to Rotation

Questions
,
1

Hello everyone,

I am a longtime reader of this forum but this is the first time I am leaving the observer modus. So hi and thank you so much for all these fantastic pointers over the years.

Currently I am building a new project with the fantastic Arcball Controls. It is a 2D map so I have panning enabled controls.enablePan = true; and Cursor Zoom controls.cursorZoom = true;.

Everything works perfectly. But when I am updating the camera position with gsap the entire scene rotates. Logging console.log(camera.rotation) shows me that there is an actual rotation going on.

I have made a minimal version of the problem here:

Conceptually I kind of understand the problem. But I cannot wrap my head around what I need to update in addition to the rotation. What I what is the same animation behavior as on Zoom interaction from Cursor Zoom and Pan.

Any help would be highly appreciated. The project also works without the animated zooming, but with it, it would be much cooler.

Thank you,

Kim

2

The ArcballControls has a property called target. It defines the where the camera is facing. If you pan the camera, you should also pan the target. I guess this picture shows the situation:

image
image947×496 20.8 KB

  • left image – when the camera position is moved, but the target is not moved, the camera rotates so that it faces the target
  • right image – when the camera and the target are panned synchronously, the direction of the camera is not changed

Try the following change in the gsap (see the three added lines). Does it eliminate the camera rotation?

gsap.to( camera.position, {
	duration: 1,
	x: Math.random()*10,
	y: Math.random()*10,
	z: 20,
	onUpdate: function() {
    	controls.target.x = camera.position.x;  // added in order
    	controls.target.y = camera.position.y;  // to pan the target
    	controls.target.z = 0;                  // of the controls
		animate();
		controls.update();
	}
});
2 Likes
3

Dear Pavel,

This works perfectly, thank you so much. I wouldn’t have come up with this solution on my own but in hindsight, it makes complete sense. Also thank you for this detailed answer and the diagram. I am utterly happy that this is working.

Kim

2 Likes