orbitControls rotate with SHIFT key

Discussion
1

I figured out a way to rotate the orbitControls with and without the Shift key. This had been bothering me for a long time.

The default is:



const orbitControls = new OrbitControls(camera, canvas);

orbitControls.mouseButtons = {
	LEFT: MOUSE.ROTATE, // 0
	MIDDLE: MOUSE.DOLLY, // 1
	RIGHT: MOUSE.PAN, // 2
};

However, when we press the Shift key, the orbitControls.mouseButtons LEFT and RIGHT effects are inverted (the log don’t show it):

orbitControls.mouseButtons = {
	LEFT: MOUSE.ROTATE, // 2
	MIDDLE: MOUSE.DOLLY, // 1
	RIGHT: MOUSE.PAN, // 0
};

So, my solution is to set the mouseButtons when the Shift is pressed

window.addEventListener("keydown", (event) => {
	const isShift = event?.key == "Shift";

	if (isShift) {
		orbitControls.mouseButtons.LEFT = MOUSE.PAN;
		orbitControls.mouseButtons.RIGHT = MOUSE.ROTATE;
	}
});
window.addEventListener("keyup", (event) => {
	const isShift = event?.key == "Shift";

	if (isShift) {
		orbitControls.mouseButtons.LEFT = MOUSE.ROTATE;
		orbitControls.mouseButtons.RIGHT = MOUSE.PAN;
	}
});

If anyone has another solution that works, let me know

2

It’s not difficult to create something that works like your basic orbitControls and uses something like the shift key to activate.