Three.js - How to Pivot Camera around a Vector3 point?
<p>Ok, I will try and be as concise as possible. I am not very good with math and what might seem obvious to you will most likely be rocket science to me.</p>

<p>I am using Three.js w/CSS3DRenderer to create a virtual gallery space.</p>

<p>I need a first person perspective, like an FPS game.</p>

<p>I have gotten the camera to move forwards, backwards, left and right all successfully.</p>

<p>However, when I go to rotate the camera, I get the result <img src="https://i.imgur.com/FY4N0zK.png" alt="pictured here"></p>

<p>The camera is rotating its local axis, but what I need is for the <code>viewport</code>, not the camera, to rotate, like </p>

<p><img src="https://i.imgur.com/ausNJB8.png" alt="pictured here"></p>

<p>So what I need is for the camera to orbit around a pivot point/vector, and then refocus by using <code>Object3d.lookAt()</code></p>

<p>I am aware that I can solve my problem by parenting the camera as a child of another object, and then rotating the axis of the object. However, I would rather do the math myself. </p>

<p>In short, I want to understand how to rotate one vector point around another, and how to represent that relationship mathematically.</p>

<p>I do <strong>not</strong> want to utilize a script, e.g., three.js pointer_lock controls, to get the job done. I want to get my hands dirty with the actual math.</p>

<p>Any advice or links to tutorials would be much appreciated!!!</p>