Add callback function to OrbitControls?

Major props to the writers of OrbitControls. I have used it in basically every three.js project I’ve done.

I’ve been trying to figure out a way to use OrbitControls with my current project, and minimize the number of times I re-render the scene. Often, the scene is stationary, in which case there’s no need to keep rendering at 60fps. Only when I change the camera’s position, or the contents of the scene should I re-render.

I’ve also been trying to figure out how to do this in a way that my application does not need to know the inner workings of OrbitControls, and OrbitControls doesn’t need to know anything about my application.

What are the chances of adding a few optional parameters to OrbitControls? These parameters would be callback functions for the dollyIn, dollyOut, pan, and rotate functions.

For example, we could add another member variable to the class:

// Callback functions for pan, dolly, rotate, and one for if anything changes at all
this.callbackFunctions = {
    onPan: undefined,
    onDolly: undefined,
    onRotate: undefined,
    onAny: undefined

Once a user instantiates an OrbitControls object, they can set the callback functions as follows:

var controls = new THREE.OrbitControls(camera, canvas);
controls.callbackFunctions.onAny = myUpdateFunction;

Then, in the respective functions, we add the following. I’ll use pan as an example:

this.pan = function ( deltaX, deltaY ) {
    // all that good panning stuff
    if ( this.callbackFunctions.onPan !== undefined ) {
        // call the callback function that was provided

This way, I can provide OrbitControls with a callback function, which will eventually get back to my application and call my render function. My render function won’t be called by OrbitControls unless it needs to re-render.

Does this sound like a worthwhile change?

Author: Fantashit

1 thought on “Add callback function to OrbitControls?

  1. OrbitControls already supports what you want to do. If you have a static scene, and no animation loop, then you can use this pattern:

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    function render() {
        renderer.render( scene, camera );


Comments are closed.