[Solved] OrbitalControls With OrthographicCamera - Sync OrbitalControls with camera following modified Camera rotation

Questions
1

I am not even sure if what I am trying to do is practical or is even possible.

This example below is a simplified version of a more complex setup where multiple shapes are connected together on the XY plane where their faces are facing Z-axis - so basically a bunch of 2D flat meshes.

The idea of this approach below was in hope, that I wouldn’t have to destroy/update/rotate any of the existing shape or their points. By rotating only the camera, I could visually trick the user that the shapes were being rotated, when really rotation occurs on the camera.

Although it works, my problem is that the camera is bind to the OrbitalControls. So even after I rotate the camera manually by code (say 90 degrees) as soon as the user tries to zoom, pan, etc on the scene, the orbital controls seems to revert the camera rotation back. I still want the orbitalControls to function and pick up with the new camera rotation. (this is where it may be impossible or impractical approach)

I tried following with orbitalControl.update() after applying rotation directly to the camera but that doesn’t seem to work either.

Here’s the simplified example in jsFiddle:
https://jsfiddle.net/blackstrings/cn8xpLh9/

to simulate what I mean > click run > click the rotateCamera90 2-3 times > then zoom or pan around in the scene. I don’t want the camera rotation to get reset and should pick right up where rotation is at.

2

My speculation why its not working could be due to the fact that, once I apply rotation to the camera, these are more like rotation offsetValues, which OrbitalControls isn’t designed to handle such scenario?

If so, I wonder if there is a way to put the camera into a container, rotate the camera with the offsets, and then apply OrbitalControls to the container.

Something like this:
rotation

[Solved] - After looking more closely at the diagram above, we simply achieve an effect like so by applying the offset rotation to the camera’s UP property and call update on the orbitalControl.

function rotateCamera90(){ var m = new THREE.Matrix4().makeRotationZ(Math.PI / 2); camera.up.applyMatrix4(m); orthoOrbit.update(); }