Javascript Three.js-在滚动条上沿X轴平移相机（平滑）

问题

我想实现一个平移动画，就像使用鼠标滚轮滚动时看到的那样，即将相机的平移限制在X轴上，并使平移在滚动时工作。我还希望它像链接示例中那样平滑/动画化

想法

我的第一个想法是使用这三个.js控件，因为它们已经存在 包含平移功能。我本以为我会改变 从鼠标右键到鼠标中键平移的控件 按钮，然后限制平移工作所在的平面（X 轴）

我发现以下代码（来自 轨道控制）：

并尝试在我的脚本文件中将其更改为以下内容

controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: 
THREE.MOUSE.RIGHT, PAN: THREE.MOUSE.MIDDLE };

但这并不奏效

我的第二个想法是使用JQuery检测滚动事件，然后 然后，当用户滚动时，沿X轴移动实际相机。 我还没有尝试过这个，因为我觉得使用OrbitControls是最好的选择 正确的方法来达到我想要的效果，因为我知道这个例子 我提供的站点已启用轨道控制。我很可能是 但我错了

我在寻找什么

• 决定正确的方法来达到我所期望的效果

• 如何实现此效果的示例代码

---

谢谢大家!

仅供参考。

3。水平平移

已添加到dev分支中的

OrbitControls

。three.js r.91dev.Temporary live link可在此PR中找到：@WestLangley谢谢，很高兴它正在实施！任何关于我链接到的站点是如何做到这一点的见解？他们不需要

轨道

/

轨迹球控件

，所以他们制作了自己的滚动事件处理程序。在

鼠标滚轮

事件中，它向移动相机的功能发送滚动事件。轻松搞定。@jim01，那么实际的摄像机是在

鼠标滚轮上移动的

事件？i、 e.

camera.position.x+=1
controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: 
THREE.MOUSE.RIGHT, PAN: THREE.MOUSE.MIDDLE };