Поверните камеру в три.js с помощью мыши

взгляните на следующие примеры

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

взгляните на три.PointerLockControls

Это может служить хорошей отправной точкой движения/поворот/масштабирование камеры с помощью мыши / трекпада (в typescript):

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