Where does TrackballControls come from?

Question

I am trying to have some camera control in a threejs scene.

I looked at this example and it seems that it is completely handled with those lines :

controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

Those lines use THREE.TrackballControls which comes from js/controls/TrackballControls.js

My question is : what exactly is TrackballControls.js? I cannot find it in the threejs download bundle. Is it an extension? Where can I find it? (Apart from taking it directly from the example's file)

Answer 1

TrackballControls.js is in the js/controls sub-directory of the examples directory.

https://github.com/mrdoob/three.js/tree/master/examples/js/controls

It is part of the examples -- not the library. You must include it explicitly in your project. You are free to modify it to your liking.

You may also want to consider OrbitControls, which is appropriate if your scene has a natural "up" direction.

three.js r.62

Answer 2

I noticed that the TrackballControls linked by @WestLangley is much more slow than an old version used by this example.

Fiddle with new code: https://jsfiddle.net/vt8n6dcs/1/

Fiddle with old code: https://jsfiddle.net/vt8n6dcs/

I tested it with Firefox 41.0.2. No benchmarks, the performance degradation is quite evident, since when you start the rotation using the mouse, sometimes the image update lags. It happens also with the old version, but a lot less frequently. Not surprisingly, performance seems quite the same in Chrome 48.0.2564.82.

Furthermore mouse sensitivity is much lower. You have to move it a lot to get an appreciable effect on the image. This happens on both Firefox and Chrome.

The only problem I found with the old version is that the center of the commands are always set at the center of the page. You can fix it by using the code of the newer version for handleResize() function:

this.handleResize = function () {

    if ( this.domElement === document ) {

        this.screen.offsetLeft = 0;
        this.screen.offsetTop = 0;
        this.screen.width = window.innerWidth;
        this.screen.height = window.innerHeight;

    } else {

        var box = this.domElement.getBoundingClientRect();
        // adjustments come from similar code in the jquery offset() function
        var d = this.domElement.ownerDocument.documentElement;
        this.screen.offsetLeft = box.left + window.pageXOffset - d.clientLeft;
        this.screen.offsetTop = box.top + window.pageYOffset - d.clientTop;
        this.screen.width = box.width;
        this.screen.height = box.height;

    }

    this.radius = ( this.screen.width + this.screen.height ) / 4;

};