Rotate camera around object with Three.js

Question

I'm displaying an OBJ element with Three.js using WebGlRenderer, now I'd like to allow users to rotate the camera around the object in any direction, I've found this answer:

Rotate camera in Three.js with mouse

But both examples return me errors, the first says that projector is not defined, and I don't know what it means with "projector". I've just a simple camera, the object and some light. The second code says that undefined is not a function.

Does someone know how to get the result I need?

Answer 1

This is what you want: http://threejs.org/examples/misc_controls_orbit.html

Include the orbit controls (after you have downloaded them):

<script src="js/controls/OrbitControls.js"></script>

Setup the variable:

var controls;

Attach the controls to the camera and add a listener:

controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );

and in your animate function update the controls:

controls.update();

[Update] controls.autoRotate = true; (tested in v73. Recent versions of OrbitControls.js has added this control.)

Answer 2

Here is a quick hack, in case you don't want to use the OrbitControls for some reason.

            camera.position.copy( target );
            camera.position.x+=Math.sin(camera.rotationy)*3;
            camera.position.z+=Math.cos(camera.rotationy)*3;
            camera.position.y+=cameraHeight; // optional
            tempVector.copy(target).y+=cameraHeight; // the += is optional
            camera.lookAt( tempVector );

camera.rotationy is a copy of the mouse rotation value since we are changing it with the call to lookAt.