Javascript 使用鼠标在Three.js中旋转摄影机

我的场景中有很多物体，所以旋转它们可能会很痛苦。那么，在鼠标点击并拖动的情况下，最简单的方法是什么？这样，场景中的所有灯光和对象都位于同一位置，因此唯一改变的是摄影机。Three.js不提供围绕某个点旋转摄影机的方法，或者是这样吗

谢谢你。通过光源看，它似乎只是在一个圆圈中移动相机的位置

function onDocumentMouseMove( event ) {

    event.preventDefault();

    if ( isMouseDown ) {

        theta = - ( ( event.clientX - onMouseDownPosition.x ) * 0.5 )
                + onMouseDownTheta;
        phi = ( ( event.clientY - onMouseDownPosition.y ) * 0.5 )
              + onMouseDownPhi;

        phi = Math.min( 180, Math.max( 0, phi ) );

        camera.position.x = radious * Math.sin( theta * Math.PI / 360 )
                            * Math.cos( phi * Math.PI / 360 );
        camera.position.y = radious * Math.sin( phi * Math.PI / 360 );
        camera.position.z = radious * Math.cos( theta * Math.PI / 360 )
                            * Math.cos( phi * Math.PI / 360 );
        camera.updateMatrix();

    }

    mouse3D = projector.unprojectVector(
        new THREE.Vector3(
            ( event.clientX / renderer.domElement.width ) * 2 - 1,
            - ( event.clientY / renderer.domElement.height ) * 2 + 1,
            0.5
        ),
        camera
    );
    ray.direction = mouse3D.subSelf( camera.position ).normalize();

    interact();
    render();

}

在这个例子中，我认为它只是创建了一个新的

3。trackball以摄像机为参数控制
对象，这可能是更好的方法

controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 )

请看三个PointerLock控件
请看以下示例



对于不同的鼠标控件还有其他示例，但这两种控件都允许相机围绕一个点旋转，并使用鼠标滚轮进行放大和缩小，主要区别在于轨道控件强制相机向上旋转，轨迹球控件允许相机倒置旋转

您所要做的就是在html文档中包含这些控件

<script src="js/OrbitControls.js"></script>

这可能是使用鼠标/触摸板（在typescript中）移动/旋转/缩放相机的良好起点：

把它放进去，就像：

this.cameraControl = new CameraControl(renderer, camera, () => {
    // you might want to rerender on camera update if you are not rerendering all the time
    window.requestAnimationFrame(() => renderer.render(scene, camera))
})

控制：


移动时[在触摸板上按住鼠标左键/单指]在x/y平面上移动相机
移动[鼠标滚轮/触控板上的两个手指]沿z方向上下移动
按住shift+[鼠标滚轮/触控板上的两个手指]可通过增大/减小视野进行放大/缩小
按住[鼠标右键/触控板上的两个手指]移动以旋转相机（四元数）


此外：

如果你想通过改变“距离”（沿yz）而不是改变视野来进行变焦，你可以在保持位置y和z的比例不变的情况下上下移动相机的位置y和z，如：

// in mousewheel event listener in zoom mode
const ratio = camera.position.y / camera.position.z
camera.position.y += (event.wheelDelta * this.sensitivity * ratio)
camera.position.z += (event.wheelDelta * this.sensitivity)

OrbitControls和TrackballControls似乎很适合这个用途

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;

渲染中的更新

controls.update();

确保添加了事件侦听器。在源代码中，它们如下所示：document.addEventListener（'mousemove'，onDocumentMouseMove，false）；它在执行与正交轨迹球控件相同的操作时失败。请帮助我使用正交摄影机使用正交轨迹球控件执行此操作。您提到了源代码，但我似乎找不到它。当我查看你在Chrome开发工具中链接到的应用程序请求的JS文件时，我没有看到你上面发布的代码。你能链接到来源或解释你是如何找到它的吗？我对isMouseDown和projector变量在何处/如何定义代码段引用非常好奇。谢谢参考：一行
控件=新的三个.OrbitControls（camera，renderer.DoElement）
无法使其工作。您应该添加更改事件的处理程序，并在处理程序中调用
渲染器。渲染（场景、摄影机）
，或者添加动画循环并在
动画（）中调用
控件。update（）
。我只需导入OrbitControls模块并实例化它，就可以使其工作。不需要处理程序或更新调用。（它引用renderer-DOM元素来附加处理程序本身，引用renderer-DOM元素来调用render本身。）看起来很有趣！你有现场演示要看吗？我没有，但这是个好主意，希望这些天能用它更新答案
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;

controls.update();