I am incorporating components of the Three.js Editor into my current project.
Recently, I adjusted the z-axis to serve as the camera.up element, following the instructions provided here and illustrated in the image below.
Issue
The behavior of my EditorControls has become erratic when executing rotations, presumably due to its failure to consider the camera.up. How can I update the class to factor in camera.up during rotations?
Below is the rotate function:
this.rotate = function ( delta ) {
vector.copy( object.position ).sub( center );
var theta = Math.atan2( vector.x, vector.z );
var phi = Math.atan2( Math.sqrt( vector.x * vector.x + vector.z * vector.z ), vector.y );
theta += delta.x;
phi += delta.y;
var EPS = 0.000001;
phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
var radius = vector.length();
vector.x = radius * Math.sin( phi ) * Math.sin( theta );
vector.y = radius * Math.cos( phi );
vector.z = radius * Math.sin( phi ) * Math.cos( theta );
object.position.copy( center ).add( vector );
object.lookAt( center );
scope.dispatchEvent( changeEvent );
};