如何在 ThreeJS 中仅旋转相机在场景中拖动鼠标？答案

【问题标题】：How to rotate only the camera in ThreeJS dragging the mouse in the scene?如何在 ThreeJS 中仅旋转相机在场景中拖动鼠标？
【发布时间】：2018-08-17 22:46:35
【问题描述】：

我正在做一个 ThreeJS 项目，我想用鼠标旋转相机。我已经看到使用OrbitControls，我可以围绕一个点或一个对象旋转我的相机，但我不能像第一人称射击游戏一样旋转我的相机。 TrackballsControls 与轨道控制有同样的问题，我可以围绕 3d 空间中的特定点旋转和移动我的相机，但我不能旋转相机本身..

PointerLockControls 可能是一个解决方案，但它会在我为场景移动鼠标时旋转相机，我想单击并拖动以旋转相机。

我想复制这个项目的相机：http://showroom.littleworkshop.fr/，我认为它们与 OrbitControls 一起使用，启用和禁用相机的这个属性。

请帮忙。提前致谢。

【问题讨论】：

你试过FirstPersonControls.js吗？
感谢 @TheJim01 我正在使用 PointerLockControls.js，它是 FirstPersonControls 的“下一个”高级版本。我在其他网站上看过。
@fjavier10 查看“视频”和“立方体”示例是如何实现的here。
@WestLangley 这只有在我们有相机的统计位置时才有用！
你最后找到解决办法了吗？因为我也有同样的问题。

标签： javascript html three.js camera virtual-reality

【解决方案1】：

您可以使用 enabled 属性启用/禁用 PointerLockControls：

controls = new PointerLockControls( camera );

controls.enabled = true; // Turns on camera rotating with mouse
controls.enabled = false; // Turns it off

【讨论】：

我正在尝试使用 PointerLockControls，它运行良好，但是当我将鼠标移到场景上时，我不想旋转相机。我想在我的场景中“单击”，然后向左或向右“拖动” 鼠标，以另一种方式旋转相机。感谢您的帮助，我会继续努力尝试其他事情。

【解决方案2】：

（我将渲染器附加到我创建的名为 interactiveViewPort (interactiveViewPort.appendChild) 的 div 中，而不是默认的 document.body.appendChild）

制作一个变量来存储 mouseup 或 mousedown 状态

let mouseDown = false;

在包含渲染器的元素上添加 mousedown 事件侦听器；
此事件侦听器还会启动我们的相机移动；

interactiveViewPort.addEventListener('mousedown',()=>{
    mouseDown = true
    controls.lock();

})

在文档上添加一个mouseup事件监听器；检测鼠标按钮是否不再被按下

    document.addEventListener('mouseup',()=>{
    if(mouseDown){
        mouseDown = false
        controls.unlock()
    }
})

所以当代码检测到鼠标在整个文档上时，相机移动将停止

【讨论】：