How to rotate camera with arrow keys?

Let say we have two axes system. One is threejs default axes system which changes its x,y,z direction when we rotate the camera. Another is imaginary axes system(x-horizontal, y-vertical, z-pointing toward us). Let say when we open the application both axes system are in same direction(x-horizontal, y-vertical, z-pointing toward us). When I rotate the camera threejs default axes system direction will be changing(eg: x-pointing toward us, y-horizontal, z-vertical) but imaginary axes system direction will be same(x-horizontal, y-vertical, z-pointing toward us). Now when I press top arrow key it should rotate the camera about imaginary axes sytem x axis.

Note: I am using Trackballcontrols and I did not create imaginary axes system(This for you to understand my need).

Please refer https://cadexchanger.com/cloud-examples/cloudviewer/index.html. Here in top right corner we have controls for camera. I want to rotate the camera like how they are doing for top,bottom,left,right rotation.

image

The camera should rotate in an orbit vertically(along green) or horizontally(along red).