Three.js, Camera rotation around a point

Question

I'm trying to make a camera rotation and zoom around a point. I don't want to use THREE.TrackBallControls because as i see, it only modify the fov when zooming, it is not what i want.

I'm using this simple equation : http://en.wikipedia.org/wiki/Sphere#Equations_in. To compute a point on the sphere, this point will be the position of the camera.

In three.js

var point = new THREE.Vector3(
    radius * Math.cos(theta) * Math.sin(phi),
    radius * Math.sin(theta) * Math.sin(phi),
    radius * Math.cos(phi)
);
point.add(center);

To manipulate it, i use :

• left mouse, for rotation : x coord === theta and y coord === phi
• middle mouse, for zooming : zoom in/out === radius

It doesn't work well, especially for 'phi' rotation, maybe because it's define between 0 and PI.

Maybe there is a better solution using Quaternion.Slerp ?

edit :

My camera :

aspectRatio = container.offsetWidth / container.offsetHeight;
camera = new THREE.OrthographicCamera( -aspectRatio * viewSize / 2, aspectRatio * viewSize / 2, viewSize / 2, -viewSize / 2, -10, 10 );
camera.position.x = 0.004;
camera.position.y = 0.004;
camera.position.z = 0.004;
camera.lookAt(new THREE.Vector3(0, 0, 0))
scene.add(camera);

My OrbitControls :

controls = new THREE.OrbitControls ( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.keyPanSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;

when using left mouse (rotation) the camera.position change.

when using middle mouse (zoom) the camera.position is still the same.

check made in the render function :

function render() {
  // update camera controls
  controls.update();
  console.log(camera.position);
  // actually render the scene
  renderer.render( scene, camera );
}