Where does TrackballControls come from?

Question

I am trying to control the camera in a three-dimensional scene.

I looked through this example and it seems to be fully processed with these 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; 

These lines use THREE.TrackballControls , which comes from js/controls/TrackballControls.js

My question is: what is TrackballControls.js ? I can not find it in the threejs download bundle. Is this an extension? Where can I find him? (Besides the fact that it takes directly from the sample file )

Answer 1

TrackballControls.js is located in the js/controls subdirectory of the examples directory.

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

This part of the examples is not a library. You must include it explicitly in your project. You can change it to your liking.

You can also consider OrbitControls , which is suitable if your scene has a natural upward direction.

three.js r.62

Answer 2

I noticed that the TrackballControls associated with @WestLangley is much slower than the old version used by this example .

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

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

I tested it with Firefox 41.0.2. No benchmarks, performance degradation is pretty obvious, because when you start spinning with the mouse, sometimes the image update lags. This also happens with the old version, but much less frequently. Not surprisingly, the performance in the Chrome browser 48.0.2564.82 looks exactly the same.

In addition, mouse sensitivity is much lower. You need to move a lot to significantly affect the image. This happens in both Firefox and Chrome.

The only problem I encountered with the old version is that the command center is always set in the center of the page. You can fix this using the new version code for the 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; };