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.
The camera should rotate in an orbit vertically(along green) or horizontally(along red).