用鼠标在 Three js 中旋转相机

在我的场景中有相当多的物体，所以旋转它们都可能是一件痛苦的事情。那么，什么是最容易的方法来移动相机周围的原点鼠标点击和拖动？这样所有的灯光，场景中的物体都在同一个位置，所以唯一改变的就是相机。Js 并没有提供一种让摄像机围绕一个点旋转的方法，不是吗？

谢谢你

142294 次浏览
小开
最佳答案

这是一个带有旋转摄像头的项目。透过光源看，它似乎只是移动摄像机的位置在一个圆圈。

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


}

这是另一个 demo ，在这个例子中，我认为它只是创建了一个新的 THREE.TrackballControls对象，摄像头作为参数，这可能是更好的方法。

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

看看三个 PointerLockControls

小开

看看下面的例子

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 );
小开

这可能是用鼠标/轨迹板移动/旋转/缩放相机的一个很好的起点:

class CameraControl {
zoomMode: boolean = false
press: boolean = false
sensitivity: number = 0.02


constructor(renderer: Three.Renderer, public camera: Three.PerspectiveCamera, updateCallback:() => void){
renderer.domElement.addEventListener('mousemove', event => {
if(!this.press){ return }


if(event.button == 0){
camera.position.y -= event.movementY * this.sensitivity
camera.position.x -= event.movementX * this.sensitivity
} else if(event.button == 2){
camera.quaternion.y -= event.movementX * this.sensitivity/10
camera.quaternion.x -= event.movementY * this.sensitivity/10
}


updateCallback()
})


renderer.domElement.addEventListener('mousedown', () => { this.press = true })
renderer.domElement.addEventListener('mouseup', () => { this.press = false })
renderer.domElement.addEventListener('mouseleave', () => { this.press = false })


document.addEventListener('keydown', event => {
if(event.key == 'Shift'){
this.zoomMode = true
}
})


document.addEventListener('keyup', event => {
if(event.key == 'Shift'){
this.zoomMode = false
}
})


renderer.domElement.addEventListener('mousewheel', event => {
if(this.zoomMode){
camera.fov += event.wheelDelta * this.sensitivity
camera.updateProjectionMatrix()
} else {
camera.position.z += event.wheelDelta * this.sensitivity
}


updateCallback()
})
}
}

就像这样:

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();
小开

使用来自三个 js 的指针联锁控件
Https://threejs.org/docs/#examples/en/controls/pointerlockcontrols

小开

看看最简单的 文件中的例子。 需要使用 THREE.OrbitControls


提交答案