javascript TrackballControls 来自哪里?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19927787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where does TrackballControls come from?
提问by Arnaud Denoyelle
I am trying to have some camera control in a threejs scene.
我正在尝试在 Threejs 场景中进行一些相机控制。
I looked at this exampleand 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
那些行使用THREE.TrackballControls
来自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)
我的问题是:究竟是TrackballControls.js
什么?我在 Threejs 下载包中找不到它。它是一个扩展吗?我在哪里可以找到它?(除了直接从示例文件中获取)
回答by WestLangley
TrackballControls.js
is in the js/controls
sub-directory of the examples
directory.
TrackballControls.js
位于js/controls
目录的examples
子目录中。
https://github.com/mrdoob/three.js/tree/master/examples/js/controls
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.
您可能还需要考虑OrbitControls
,如果您的场景具有自然的“向上”方向,这很合适。
three.js r.62
三.js r.62
回答by Marco Sulla
I noticed that the TrackballControls
linked by @WestLangley is much more slow than an old versionused by this example.
我注意到TrackballControls
@WestLangley 链接的速度比本示例使用的旧版本慢得多。
Fiddle with new code: https://jsfiddle.net/vt8n6dcs/1/
摆弄新代码:https: //jsfiddle.net/vt8n6dcs/1/
Fiddle with old code: https://jsfiddle.net/vt8n6dcs/
摆弄旧代码: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.
我用 Firefox 41.0.2 对其进行了测试。没有基准测试,性能下降非常明显,因为当您使用鼠标开始旋转时,有时图像更新会滞后。旧版本也会发生这种情况,但频率要低得多。毫不奇怪,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.
此外,鼠标灵敏度要低得多。你必须移动它很多才能在图像上获得明显的效果。这发生在 Firefox 和 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:
我发现旧版本的唯一问题是命令的中心始终设置在页面的中心。您可以使用较新版本的handleResize()
函数代码来修复它:
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;
};