我正试图在threejs场景中进行一些相机控制。
我看了this example,似乎用这些线完全处理了它:
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;
这些行使用来自THREE.TrackballControls
js/controls/TrackballControls.js
我的问题是:TrackballControls.js
究竟是什么?我在threejs下载包中找不到它。这是一个扩展吗?我在哪里可以找到它? (除了直接从the example's file)
答案 0 :(得分:12)
TrackballControls.js
位于js/controls
目录的examples
子目录中。
https://github.com/mrdoob/three.js/tree/master/examples/js/controls
这是示例的一部分 - 而不是库。您必须在项目中明确包含它。您可以根据自己的喜好自由修改。
您可能还需要考虑OrbitControls
,如果您的场景有一个自然的“向上”方向,这是合适的。
three.js r.62
答案 1 :(得分:2)
我注意到@WestLangley链接的TrackballControls
比an old version使用的this example慢得多。
摆弄新代码:https://jsfiddle.net/vt8n6dcs/1/
摆弄旧代码:https://jsfiddle.net/vt8n6dcs/
我使用Firefox 41.0.2进行了测试。没有基准测试,性能下降非常明显,因为当您使用鼠标开始旋转时,有时图像更新滞后。它也适用于旧版本,但频率较低。毫不奇怪,Chrome 48.0.2564.82中的性能似乎完全相同。
此外,鼠标灵敏度要低得多。你必须移动很多才能对图像产生明显的影响。这种情况发生在Firefox和Chrome上。
我发现旧版本的唯一问题是命令的中心始终设置在页面的中心。您可以使用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;
};
答案 2 :(得分:-1)
您可以直接从示例中导入它。将以下行插入 HTML 文件的 <head>
:
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
Here 是一个演示。