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

Ответ 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();

}

Вот еще одно демо, и в этом я думаю, что он просто создает новый объект THREE.TrackballControls с камерой в качестве параметра, что, вероятно, лучший способ пойти.

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

Ответ 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 );

Ответ 3

Взгляните на THREE.PointerLockControls