Where does TrackballControls come from?
Solution 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
Solution 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;
};
Related videos on Youtube
Arnaud Denoyelle
Updated on September 15, 2022Comments
-
Arnaud Denoyelle over 1 year
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 fromjs/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) -
Arnaud Denoyelle over 10 yearsSo TrackballControls is not an "official" extension rather than a specific implementation for this example?
-
WestLangley over 10 yearsThere is only one version for a given release of the library. All examples share that version.
-
Arnaud Denoyelle over 10 yearsOk, thank you for the explanation. And indeed, my scene has a natural "up" direction. That makes
OrbitControls
a good candidate for my need ;) -
WestLangley about 8 yearsIf you feel there has been a performance degradation, can you try to track it down, or if not, file a bug report on the three.js site with a live example to demonstrate the issue?
-
Marco Sulla about 8 yearsJust done: github.com/mrdoob/three.js/issues/8113 Sorry, no time for example :)