TrackballControls 是从哪里来的?

14

我试图在threejs场景中进行一些相机控制。

我查看了这个例子,并且似乎完全可以使用以下代码实现:

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;
那些代码行使用了来自js/controls/TrackballControls.jsTHREE.TrackballControls
我的问题是:什么是TrackballControls.js? 我在threejs下载包中找不到它。 它是一个扩展程序吗? 在哪里可以找到它?(除了直接从示例文件中获取)
3个回答

13

TrackballControls.js位于examples目录的jsm/controls子目录中。

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

它是示例的一部分,而不是库的一部分。您必须在项目中显式地包含它。您可以自由地根据自己的喜好进行修改。

您还可以考虑使用OrbitControls,如果您的场景具有自然的“上”方向,则此控件非常适合。

three.js r.147


所以TrackballControls不是一个“官方”的扩展,而只是针对这个示例的特定实现? - Arnaud Denoyelle
给定库的每个发布版本只有一个版本。所有示例都共享该版本。 - WestLangley
好的,谢谢您的解释。确实,我的场景有一个自然的“上”方向。这使得OrbitControls成为我需要的良好选择 ;) - Arnaud Denoyelle

2
我注意到由@WestLangley链接的TrackballControls旧版本(由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;

};

如果您感觉性能有所下降,可以尝试追踪问题所在,或者如果无法解决,请在three.js网站上提交错误报告,并提供一个实时示例以演示问题。 - WestLangley
刚刚完成:https://github.com/mrdoob/three.js/issues/8113 抱歉,没有时间提供示例 :) - Marco Sulla

-2
你可以直接从示例中导入它。将以下行插入到你的HTML文件的标签中:
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>

这里有一个演示。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接