Three.js 轨道控制还是轨迹球控制

我读了很多关于这两个控件的书，现在我正在使用轨迹球控件

我需要沿所有三个轴旋转一个对象（两个控件都已经这样做了），但是有时我还需要手动设置一个新的相机位置/旋转。这真的不管用

我的解决办法是 禁用轨迹球控件， 获取新位置的四元数对象， 将这些应用于camera.up 然后启用相机

但如前所述，这并不能真正稳定地工作

我读到OrbitControls对于这样的任务可能是一个更好的解决方案。但OrbitControls对对象的垂直旋转有“限制”，我需要无限制地旋转对象

因此，我的问题是：

1.哪个控制系统更适合我的任务

2.如果是轨迹球-您将如何手动设置新的摄像机位置和旋转？如果是轨道-有没有办法禁用垂直旋转限制

非常感谢

---

关于-Misa

首先，

轨迹球控制

和

轨道控制

旋转摄像机，而不是物体

其次，

OrbitControls

强制相机向上方向旋转，而

轨迹球控件

允许相机倒置旋转

trackball controls

具有一种

reset（）

方法，该方法可将

目标

（旋转中心）、摄像头

位置

和摄像头

向上

矢量恢复为其原始设置

controls.reset();

上述代码将恢复原始的

位置

、

目标

和

向上

矢量。如果需要，您也可以在调用

controls.reset（）之前更改它们

阅读
reset（）

编辑：
OrbitControls
现在也有了一个
reset（）
方法。检查源代码

three.js r.82
要强制轨迹球控件仅水平旋转，请找到函数的实现
GetMouseProjectionBall
，并添加一行：

var getMouseProjectionOnBall = (function() {
    var vector = new THREE.Vector3();
    var objectUp = new THREE.Vector3();
    var mouseOnBall = new THREE.Vector3();

    return function(pageX, pageY) {
      mouseOnBall.set(
        (pageX - _this.screen.width * 0.5 - _this.screen.left) / (_this.screen.width * 0.5),
        (_this.screen.height * 0.5 + _this.screen.top - pageY) / (_this.screen.height * 0.5),
        0.0);

      mouseOnBall.setY(0); // add this

      var length = mouseOnBall.length();

我仍在努力将角度限制在一个范围内，而不是将其禁用…
亲爱的WstLangley-非常感谢您的回答。有没有办法将相机设置为新位置的动画？这个职位看起来很不错。但是如果我想换相机怎么办？这似乎不起作用，因为reset（）函数不会重置camera.rotation。有没有一种方法可以将其重置？我想给你一个声誉点，但我仍然没有足够的声誉这样做。谢谢-MisaStrange行为：旋转相机后，我执行以下操作：var q=new THREE.Quaternion（）；q、 从旋转矩阵（camera.matrix）设置；控件.up0.applyQuaternion（q）；controls.position0=camera.position.clone（）；控件。重置（）；这只是第一次工作-因此在重置（）后，相机将保持在手动旋转的位置。当我再次尝试这样做时，它不起作用，因此在使用reset（）函数后，相机会跳转到另一个角度。1。如果要直接操纵旋转或四元数，则必须重新编写代码以执行此操作。这些控件不是为此而设计的。2.你在问一个关于动画的新问题。如果你有不同的问题，你需要写一篇新文章。3.我无法为您调试代码，我只能回答有关three.js的问题。如果您想询问代码的问题，可以发表一篇新文章。4.您可以通过单击复选标记“接受”答案。你有足够的声誉去做那件事。请这样做。我确实回答了你原来的问题。谢谢。嘿，韦斯特兰利-非常感谢。关于第1点到第4点，你完全正确。事实上，我已经成功地重写了代码并实现了旋转。我将发布一个关于动画的新问题再次感谢
var getMouseProjectionOnBall = (function() {
    var vector = new THREE.Vector3();
    var objectUp = new THREE.Vector3();
    var mouseOnBall = new THREE.Vector3();

    return function(pageX, pageY) {
      mouseOnBall.set(
        (pageX - _this.screen.width * 0.5 - _this.screen.left) / (_this.screen.width * 0.5),
        (_this.screen.height * 0.5 + _this.screen.top - pageY) / (_this.screen.height * 0.5),
        0.0);

      mouseOnBall.setY(0); // add this

      var length = mouseOnBall.length();