Drehen Sie Three.js Szene auf Mausbewegung

Question

Ich habe eine Szene gut gereicht und muss es horizontal und/oder vertikal drehen, wie die Maus über das DOM bewegt. Ich konnte die horizontale Rotation tun, indem changind die Szene rotation.y Eigenschaft:

const step = 0.005; 

let halfWindowWidth = window.innerWidth/2; 
let target = (Math.PI/halfWindowWidth * mouseX/2) - 0.785398; 

if (target < y) { 
    if (y - (step * 2) > target) { 
     target = y - (step * 2); 
    } 
} else if (target > y) { 
    if (y + (step * 2) < target) { 
     target = y + (step * 2); 
    } 
} 

scene.rotation.y = target; 

Ich weiß, dass vielleicht muß ich auf der x- und z-Achse arbeiten, um es vertikal zu machen drehen, aber ich weiß nicht, was Berechnungen sollte ich tun.

Die Drehung muss stattfinden, wenn die Maus weiter von der Mitte des DOM ausgeht, von -90 ° auf 90 ° (180 ° insgesamt). Die step Konstante verwende ich, um die Rotation animiert zu haben und nicht einfach zu springen, wenn sich die Maus zu schnell bewegt.

Answer 1

einen Blick auf die folgenden Beispiele nehmen

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

es gibt auch andere Beispiele für verschiedene Maussteuerung, aber diese beiden lassen sich die Kamera um eine drehen zeigen und vergrößern und verkleinern mit dem Mausrad, der Hauptunterschied ist OrbitControls erzwingt die Kamera nach oben Richtung und TrackballControls ermöglicht die Kamera nach oben drehen Seite nach unten.

Alles, was Sie tun müssen, ist die Kontrollen in Ihrem HTML-Dokument

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