Rotate camera in Three.js with mouse
Here's a project with a rotating camera. Looking through the source it seems to just move the camera position in a circle.
function onDocumentMouseMove( event ) { event.preventDefault(); if ( isMouseDown ) { theta = - ( ( event.clientX - onMouseDownPosition.x ) * 0.5 ) + onMouseDownTheta; phi = ( ( event.clientY - onMouseDownPosition.y ) * 0.5 ) + onMouseDownPhi; phi = Math.min( 180, Math.max( 0, phi ) ); camera.position.x = radious * Math.sin( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 ); camera.position.y = radious * Math.sin( phi * Math.PI / 360 ); camera.position.z = radious * Math.cos( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 ); camera.updateMatrix(); } mouse3D = projector.unprojectVector( new THREE.Vector3( ( event.clientX / renderer.domElement.width ) * 2 - 1, - ( event.clientY / renderer.domElement.height ) * 2 + 1, 0.5 ), camera ); ray.direction = mouse3D.subSelf( camera.position ).normalize(); interact(); render();}Here's another demo and in this one I think it just creates a new THREE.TrackballControls object with the camera as a parameter, which is probably the better way to go.
controls = new THREE.TrackballControls( camera );controls.target.set( 0, 0, 0 )
take a look at the following examples
http://threejs.org/examples/#misc_controls_orbit
http://threejs.org/examples/#misc_controls_trackball
there are other examples for different mouse controls, but both of these allow the camera to rotate around a point and zoom in and out with the mouse wheel, the main difference is OrbitControls enforces the camera up direction, and TrackballControls allows the camera to rotate upside-down.
All you have to do is include the controls in your html document
<script src="js/OrbitControls.js"></script>and include this line in your source
controls = new THREE.OrbitControls( camera, renderer.domElement );