用鼠标在Three.js中旋转相机

在我的场景中，我有很多的东西，所以旋转它们都可能是一种痛苦。 那么在鼠标点击和拖拽的情况下移动相机的最简单方法是什么？ 这样，场景中的所有灯光，物体都在同一个位置，所以唯一改变的就是相机。 Three.js没有提供围绕某个点旋转摄像机的方法，或者是这样吗？

谢谢

Answer 1

这是一个旋转相机的项目 。 从源头上看，似乎只是将相机的位置移动一圈。

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(); } 

这里是另一个演示 ，在这一个我认为它只是创build一个新的THREE.TrackballControls对象与相机作为参数，这可能是更好的方式去。

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

Answer 2

看看下面的例子

http://threejs.org/examples/#misc_controls_orbit

http://threejs.org/examples/#misc_controls_trackball

有不同的鼠标控制的其他例子，但这两个这些允许相机围绕一个点旋转，并与鼠标滚轮放大和缩小，主要的区别是OrbitControls强制摄像头向上的方向，和TrackballControls允许摄像头向上旋转-下。

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

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

并在您的源代码中包含此行

 controls = new THREE.OrbitControls( camera, renderer.domElement ); 

Answer 3

看看THREE.PointerLockControls