Girar la cámara en Three.js con el mouse

Question

Tengo bastantes objetos en mi escena, por lo que rotarlos podría ser un problema. Entonces, ¿cuál es la manera más fácil de mover la cámara alrededor del origen con un clic del mouse y arrastrar? De esta forma, todas las luces, los objetos en la escena están en el mismo lugar, por lo que lo único que cambia es la cámara. Three.js no proporciona una manera de rotar una cámara alrededor de un punto, ¿o sí?

Gracias

Answer 1

Here's a project with a rotating camera. Al mirar a través de la fuente, parece mover la posición de la cámara en un círculo.

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

} 

Here's another demo y en éste creo que sólo crea un nuevo THREE.TrackballControls objeto con la cámara como un parámetro, que es probablemente el mejor camino a seguir.

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

Answer 2

Tome un vistazo a THREE.PointerLockControls

Answer 3

echar un vistazo a los siguientes ejemplos

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

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

hay otros ejemplos de diferentes controles del ratón, pero ambos de estos permiten que la cámara gire alrededor de un punto y se acerque y aleje con la rueda del mouse, La diferencia es que OrbitControls refuerza la dirección de la cámara y TrackballControls permite que la cámara gire al revés.

Todo lo que tiene que hacer es incluir los controles en el documento html

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

e incluir esta línea en su fuente

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

Answer 4

Esto podría servir como un buen punto de partida para mover/girando/acercamiento de una cámara con mouse/trackpad (en mecanografía):

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

soltarlo en como:

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

Controles:

• movimiento mientras [sostiene el ratón hacia la izquierda/dedo sencillo en el trackpad] para mover la cámara en plano x/y
• movimiento [ rueda del mouse/dos dedos en el trackpad] para moverse hacia arriba/abajo en la dirección z
• mantener el shift + [la rueda del mouse/dos fi dedos sobre trackpad] para zoom in/out vía el aumento/disminución de campo de visión
• movimiento mientras sosteniendo [/ derecho del ratón dos dedos en trackpad] para girar la cámara (cuaternión)

Además :

Si desea acercar un poco cambiando la "distancia" (a lo largo de yz) en lugar de cambiar el campo de visión, puede subir/bajar la posición de la cámara yy manteniendo la relación de y y z de posición sin cambios como:

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