Question

Using three.js is it possible to rotate a panned object about its center. I have created a jsfiddle, http://jsfiddle.net/yKt6h/4/

When I checked the Auto rotate mode in the control panel, i am able to rotate the panned cube about its center. Is it possible to have a similar effect when i try to rotate the cube with mouse movement.

If it is possible please provide me sample code

Answer 1

I am getting an errors in the console when viewing your jsFiddle THREE is not defined However, what you are asking is not difficult. The trackball camera is designed to do exactly what you want it to. If you are rendering your object at the origin you just need to initialize the trackball controls. I created a simple moon demo that uses TrackballControls. You don’t need to do any modifcation in TrackballControls.js.

In the above demo I call a function to initialize the trackball controls the function is defined in my ThreeUtil.js file as:

function initTrackball(camera, rotate, zoom, pan, damping) {
    var controls = new THREE.TrackballControls(camera);
    controls.rotateSpeed = rotate || 1.0;
    controls.zoomSpeed = zoom || 1.2;
    controls.panSpeed = pan || 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = damping || 0.3;
    return controls;
}

If you don’t want the user to be able to pan or zoom, only to be able to rotate around your object, then simply set controls.noZoom = true and controls.noPan = true in the function above.

Since my moon object is at the origin of my scene all I have to do is set the camera some distance away from the origin. We will put it on the positive z axis so it is already looking at our object at the origin. Then we call the above function to set up the controls. I pass in a custom rotation speed:

controls = initTrackball(camera, 0.8);

Then in each frame all you have to do is call the update function in your anim loop:

controls.update(camera);