轨迹球控件从何而来？答案

【问题标题】：Where does TrackballControls come from?轨迹球控件从何而来？
【发布时间】：2013-11-24 12:28:42
【问题描述】：

我正在尝试在 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;

这些行使用来自js/controls/TrackballControls.js的THREE.TrackballControls

我的问题是：TrackballControls.js 到底是什么？我在threejs 下载包中找不到它。是扩展吗？我在哪里可以找到它？（除了直接取自the example's file）

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

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

它是示例的一部分——而不是库。您必须将其明确包含在您的项目中。您可以根据自己的喜好随意修改。

您可能还想考虑OrbitControls，如果您的场景有一个自然的“向上”方向，这是合适的。

three.js r.62

【讨论】：

那么 TrackballControls 不是“官方”扩展，而是本示例的具体实现？
库的给定版本只有一个版本。所有示例都共享该版本。
好的，谢谢你的解释。事实上，我的场景有一个自然的“向上”方向。这使得OrbitControls 成为满足我需求的好人选；）

【解决方案2】：

我注意到@WestLangley 链接的TrackballControls 比this example 使用的an old version 慢得多。

修改新代码：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 网站上提交错误报告并附上一个实时示例来演示该问题？
刚刚完成：github.com/mrdoob/three.js/issues/8113 抱歉，没时间举例：)

【解决方案3】：

您可以直接从示例中导入它。将以下行插入 HTML 文件的 <head>:

<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>

Here 是一个演示。

【讨论】：