Three.js & OrbitControls.js - pan Kamera parallel zur Bodenebene (wie Google Earth)

Arbeite ich an einer einfachen Three.js demo verwendet OrbitControls.js.

Möchte ich das Verhalten ändern, schwenken in OrbitControls. Derzeit, wenn Sie die Kamera schwenken, bewegt sich die Kamera in einer Ebene, die senkrecht auf der Blickrichtung. Ich möchte es ändern, so, dass die Kamera bleibt an einem Konstanten Abstand von der Bodenebene und bewegt sich parallel zu Ihr. Google Earth nutzt eine ähnliche Steuerung.

Edit: ich sollte erwähnt haben, dieses detail in den ersten Platz, aber ich möchte auch den Punkt, wo Sie klicken Sie auf und beginnen Sie, zu bleiben, direkt unter dem cursor über den gesamten ziehen. Es muss sein, dass die Feste Verbindung zwischen der Bewegung der Maus, was der Benutzer erwartet, dass geschehen auf dem Bildschirm. Ansonsten, es fühlt sich an als ob ich bin 'rutschen', wenn ich versuche zu bewegen, um die Szene.

Kann mir jemand eine high-level-Beschreibung, wie das getan werden könnte (mit oder ohne OrbitControls.js)?

  • Ihr "ground plane" eigentlich eine Ebene (z.B. Wohnung, oder hat es eine variable Höhe)?
  • Es ist eigentlich flach. Es ist nur eine unendliche Ebene, die sich an (0,0,0) mit einem Vektor (0,1,0).
  • Ach so, Sie wollen einfach nur, um die Pfanne nur in der Welt der X/Z-Richtung, die Erhaltung der Kamera an einer festen Y-position?
  • Richtig. Die Y-position kann sich nur ändern, wenn ich drehen Sie die Kamera um den Zielpunkt, oder wenn ich dolly-die Kamera auf den Zielpunkt.
  • Hm. Also, wenn der Benutzer dreht die Kamera in Richtung Himmel und bespritzen sich nach oben, und dann die Pfannen---ist die Kamera immer noch nur erlaubt die Bewegung in der X/Z-Ebene?
  • Richtig. Aber ich bin mir nicht sicher, ob wir dieselbe definition von " drehen Sie die Kamera.' Wenn Sie drehen, die Kamera kreist um den Zielpunkt (das ist in der Regel auf der Ebene) und dreht sich immer zu sehen, dass Ziel-Punkt.
  • Hast du eine Lösung für das @Justin?
  • Ja, ich gepostet, und akzeptiert die Antwort hier: stackoverflow.com/questions/26185074/...

InformationsquelleAutor Justin | 2014-10-03
  1. 9

    EDIT: OrbitControls jetzt unterstützt schwenken, die parallel zu der "ground plane", und es ist der Standard.

    Schwenken parallel zu screen-space (das legacy-Verhalten), set:

    controls.screenSpacePanning = true;

    Ebenfalls erhältlich ist MapControls, die eine API ähnlich der von Google Earth.

    three.js r.94

    • Ich versuchte dieses heraus. Es ist eng, aber es scheint, als ob die panUp ist Rückschritt. Ich sollte auch erwähnt haben, aber ich wollte den Punkt, wo Sie klicken und ziehen, um weiterhin unter den cursor während der gesamten ziehen. Es macht für einen natürlichen, taktile Erfahrung für den Benutzer. Ich kam eigentlich mit einer funktionierenden Lösung nach, die ich gepostet diese Frage. Sollte ich hinzufügen, dass auf meine Antwort?
    • 1. Die so genannte "rückwärts" panning kann behoben werden, mit einem Schild flip, aber Sie brauchen, um zu überprüfen, das Verhalten unter einer Vielzahl von Betriebssystemen-vor allem OSX. 2. Dieser Ansatz hält den Punkt, etwa unter dem cursor, wenn der Blick ist gerade nach unten von oben. Wenn der Blickwinkel ist die akute, die Anpassung der pan-Distanz um einen Faktor von cos( Blickwinkel ) kann das Ergebnis das Sie wollen.
    • Stellen Sie eine Frage in oder auf discourse.threejs.org, wenn Sie Hilfe benötigen.
    • Okay danke @WestLangley.
    • Ich habe es funktioniert @WestLangley. Mein schlechtes. Wenn nichts anderes kommt, werde ich sicherlich eine Frage stellen. Danke.
    InformationsquelleAutor WestLangley
  2. 4

    Vor einiger Zeit arbeitete ich auf genau dieses Problem, d.h. Anpassung des OrbitControls.js zum anzeigen der navigation.

    • Dies hat mir sehr geholfen, vielen Dank.
    • das sieht perfekt aus, aber funktioniert nicht mehr mit version 75. Die Projektion Zeug ist veraltet und verursacht einen Fehler.
    InformationsquelleAutor grey-eminence
  3. 3

    Habe ich es herausgefunden. Hier die übersicht:

    1. Speichern Sie das mousedown-Ereignis irgendwo.
    2. Wenn die Maus bewegt wird, bekommen die neuen mousedown-Ereignis.
    3. Für jeden dieser Punkte, finden die Punkte auf der Ebene, wo diejenigen, die Klicks befinden (Sie müssen um die Punkte, die in die Kamera Platz, verwandeln Sie sich in Welt-Raum, dann Feuer ein Strahl von der Kamera durch jeden Punkt zu finden, deren Schnittpunkte mit der Ebene. Auf dieser Seite erklärt die ray-plane intersection test).
    4. Subtrahieren der Welt-Raum-starten Sie den Schnittpunkt aus der Welt-Raum-end-Schnittpunkt zu bekommen, die Einpresstiefe.
    5. Subtrahieren, die versetzt von der Kamera-Zielpunkt und fertig!

    In der Falle OrbitControl.js die Kamera schaut immer auf das Ziel zeigen, und seine position relativ zu diesem Punkt. Also, wenn Sie das Ziel ändern, die Kamera bewegt sich mit ihm. Da das Ziel liegt immer auf der Ebene, die Kamera bewegt sich parallel zu dieser Ebene (wie lange, wie Sie sind-panning).

    InformationsquelleAutor Justin
  4. 0

    Sollten Sie stellen Sie Ihre Kamera 'bis' z-axe:

    camera.up.set(0,0,1)

    Und dann das Hauptproblem mit OrbitControl ist seine panUp () - Funktion. Es sollte behoben werden.

    Mein pull-request : https://github.com/mrdoob/three.js/pull/12727

    y-axe ist relativ zum Kamera-Achsen und sollten relativ zu einem festen plan in der Welt. Definieren Sie die erwarteten y-axe, machen Sie eine 90° - Drehung der Kamera x-axe, basierend auf Welt z-Achse.

    v.setFromMatrixColumn( objectMatrix, 0 ); //get X column of objectMatrix
v.applyAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI /2 );
v.multiplyScalar( distance );
panOffset.add( v )

    Genießen!

    InformationsquelleAutor pizaninja
Schreibe einen Kommentar