🔽 👌🏿 👨🏿‍⚖️ Three.js - Steuerelemente für Weltraum oder Planetarium 🐯 💆🏽 👰🏼

Bei der Entwicklung meines Projekts zum Thema Weltraum bin ich auf die Tatsache gestoßen, dass three.js aus irgendeinem Grund kein fertiges und praktisches Kamerasteuerungswerkzeug hat, das für solche Aufgaben geeignet ist. Natürlich gebe ich zu, dass ich nur schlecht ausgesehen habe ... Aber eine ziemlich lange Suche nach den Ergebnissen hat nicht ergeben.

OrbitControls ist ein traditioneller Favorit unter den Beispielen von three.js. Es weiß nicht, wie die Kamera auf den Kopf gestellt werden soll, und es weiß nicht, wie viele andere Dinge es benötigt.

TrackballControls ist insofern bemerkenswert, als sich die Kamera nach Belieben um das Objekt dreht und auch auf dem Kopf steht. Sie weiß jedoch nicht, wie sie sich um die Sichtachse drehen soll. Sie kann sich nicht hin und her bewegen, ohne die Skala zu ändern. Es gibt keine bequeme Einstellung der Geschwindigkeit von Bewegungen und Drehungen.

FlyControls - im Gegenteil, Sie können einen „Lauf“ erstellen und die Geschwindigkeit ändern, aber ... wohin ging die Drehung der Kamera um das betreffende Objekt?

Es war natürlich möglich, mit Hilfe aller Arten von Krücken auszusteigen, aber irgendwie ist das nicht comme il faut. Nachdem ich sichergestellt hatte, dass es keine fertige Lösung für meine Zwecke gibt, habe ich beschlossen, sie selbst zu erstellen. Wer interessiert sich bitte unter Katze.

Ich habe mich für TrackballControls.js entschieden. Nachdem wir es geöffnet haben, sehen wir die Autoren:

/** * @author Eberhard Graether / http://egraether.com/ * @author Mark Lundin / http://mark-lundin.com * @author Simone Manini / http://daron1337.imtqy.com * @author Luca Antiga / http://lantiga.imtqy.com */

Dies ist ihre Arbeit und wird als Ausgangspunkt dienen. Es ist notwendig, ein wenig hinzuzufügen und wenn möglich das bestehende nicht zu brechen. (Allerdings musste etwas herausgeschnitten werden).

Zunächst einmal, was wir haben: Die Kamera dreht sich uneingeschränkt um das Objekt, bleibt nicht an der Stange hängen, behält bei allen Drehungen eine konstante Winkelgeschwindigkeit bei. Es gibt einen Zoom, es gibt eine Pfanne. Das ist gut, aber nicht genug.

Die Überraschung war die seltsame Position mit den Knöpfen. In der Tat ist dies unerwartet:

 this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

Kamerasteuerung mit nur drei Tasten? Vielleicht ist das eine gute Idee, aber tatsächlich funktioniert es nicht. Im Keydown-Ereignishandler in der Quelle beachten wir die folgenden Zeilen:

 window.removeEventListener( 'keydown', keydown ); _prevState = _state; if ( _state !== STATE.NONE ) { return; } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) { _state = STATE.ROTATE; } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) { _state = STATE.ZOOM; } else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) { _state = STATE.PAN; }

Es sieht ein wenig mysteriös aus, aber ... funktioniert nicht. Das heißt, im Allgemeinen. Die oben genannten Tasten bewirken nichts, die Kamera wird nur mit der Maus oder durch Berühren gesteuert.

Ich habe diesen Code als unnötig kommentiert und durch meinen ersetzt, worüber die Geschichte etwas weiter gehen wird. Entfernen des Rückrufs für die Tastenverarbeitung - offensichtlich war es erforderlich, dass die Tasten bei jedem Drücken nur einmal funktionieren. Dies ist jedoch nicht das Verhalten, das im Weltraum benötigt wird, daher wird es auch kommentiert.

Was fehlt uns hier? Was ich hinzugefügt habe:

Bewegung hin und her entlang der Sichtlinie.
Die Drehung der Kamera, deren Achse die Sichtlinie ist.
Autorotation.
Die Möglichkeit, die Geschwindigkeit aller Bewegungen und Drehungen mit einer Taste zu ändern.
Volle Tastatursteuerung.

Ich hoffe, der Leser wird mir verzeihen, dass ich über den Bearbeitungsprozess nicht in der Reihenfolge des Abschlusses dieser Unteraufgaben, sondern in der Reihenfolge des Verfolgens des Quellcodes von oben nach unten sprechen werde. Ich werde erklären, was und warum ich tue.

Konstruktor

Fügen Sie einige Variablen hinzu:

  this.rotationZFactor = 0.0; this.RVMovingFactor = 0.0; this.autoRotate = false; this.autoRotateSpeed = 0.001; this.allSpeedsFactor = 1;

RotationZFactor wird benötigt, um die Rotation der Kamera auf der Sichtachse zu steuern.
RVMovingFactor zur Steuerung von Vorwärts- und Rückwärtsfahrt entlang derselben Achse,
autoRotate Ich nehme an, es werden keine Kommentare benötigt.
allSpeedsFactor zur Steuerung der Geschwindigkeit aller kombinierten Bewegungen und Kurven.

RotateCamera-Methode

Auf diese Weise organisiert:

  this.rotateCamera = ( function () { var axis = new THREE.Vector3(), quaternion = new THREE.Quaternion(), eyeDirection = new THREE.Vector3(), objectUpDirection = new THREE.Vector3(), objectSidewaysDirection = new THREE.Vector3(), moveDirection = new THREE.Vector3(), tmpQuaternion = new THREE.Quaternion(), angle; return function rotateCamera() { ...

Hier war fast alles so, das einzige, was ich hinzugefügt habe, war die Variable tmpQuaternion, um die Drehung der Kamera entlang der Z-Achse zu handhaben.

Außerdem war es ziemlich einfach zu überprüfen, ob eine Verarbeitung erforderlich war:

 moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); angle = moveDirection.length(); if ( angle ) {

Und es wurde so:

 if (_this.autoRotate) _moveCurr.x += _this.autoRotateSpeed; moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); moveDirection.setLength(moveDirection.length() * _this.allSpeedsFactor); angle = moveDirection.length(); if ( angle || _this.rotationZFactor) {

Was ist hier und warum? Erstens, wenn die automatische Drehung aktiv ist, fügen wir ihre Geschwindigkeit der Drehung entlang der X-Achse hinzu. Zweitens haben wir allSpeedsFactor um die Skalierung aller Drehungen (und auch der automatischen Drehungen) erweitert. Zum Steuern der Geschwindigkeit aller Conversions. Und drittens werden wir weitere Aktionen nicht nur ausführen, wenn der Winkelwinkel (Kamerabewegung relativ zu Steuerelementen) ungleich Null ist, sondern auch, wenn RotationZFactor, der für die Drehung der Kamera entlang der Z-Achse verantwortlich ist, ungleich Null ist.

Weiter im Methodencode, nach Berechnung der Quaternion der Rotation, eine kleine Addition:

 quaternion.setFromAxisAngle( axis, angle ); //    , //   ,         . // added for z-axis rotation tmpQuaternion.setFromAxisAngle( eyeDirection, _this.rotationZFactor ); quaternion.multiply( tmpQuaternion ); // end add

Die Quaternion der Rotation der Kamera um das Objekt multiplizieren wir mit der separat berechneten Quaternion der Rotation entlang der Z-Achse. Jetzt kann sich die Kamera entlang aller drei Achsen drehen.

ZoomCamera-Methode

Ich gebe Ihnen den gesamten Code, er ist klein:

 this.zoomCamera = function () { var factor; if ( _state === STATE.TOUCH_ZOOM_PAN ) { //  allSpeedsFactor : factor = _this.allSpeedsFactor * _touchZoomDistanceStart / _touchZoomDistanceEnd; _touchZoomDistanceStart = _touchZoomDistanceEnd; _eye.multiplyScalar( factor ); } else { //  allSpeedsFactor : factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed * _this.allSpeedsFactor; if ( factor !== 1.0 && factor > 0.0 ) { _eye.multiplyScalar( factor ); } if ( _this.staticMoving ) { _zoomStart.copy( _zoomEnd ); } else { //  allSpeedsFactor : _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor * _this.allSpeedsFactor; } } };

Bei allen Änderungen wird allSpeedsFactor an mehreren Stellen hinzugefügt, um die Geschwindigkeit (Bewegungen, Rotationen) und den Zoom zu steuern.

PanCamera-Methode

Ich werde auch seinen gesamten Code als geben es ist klein:

 this.panCamera = ( function () { var mouseChange = new THREE.Vector2(), objectUp = new THREE.Vector3(), rv = new THREE.Vector3() pan = new THREE.Vector3(); return function panCamera() { mouseChange.copy( _panEnd ).sub( _panStart ); mouseChange.setLength(mouseChange.length() * _this.allSpeedsFactor); if ( mouseChange.lengthSq() || _this.RVMovingFactor ) { mouseChange.multiplyScalar( _eye.length() * _this.panSpeed ); pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x ); pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) ); pan.add( rv.copy( _eye ).setLength(_this.RVMovingFactor * _eye.length()) ); _this.object.position.add( pan ); _this.target.add( pan ); if ( _this.staticMoving ) { _panStart.copy( _panEnd ); } else { _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor * _this.allSpeedsFactor ) ); } } }; }() );

Aber es gibt noch viel mehr Änderungen. Ich werde Ihnen alles in der richtigen Reihenfolge erzählen.

Die Variable rv wird hinzugefügt - ein Vektor zum Verarbeiten der Radialgeschwindigkeit der Kamera, d.h. seine Geschwindigkeit entlang der z-Achse.

Skalierung des mouseChange-Vektors zu demselben allSpeedsFactor hinzugefügt, aber auch hier möchte ich alle Transformationen mithilfe dieser Skalierung auf eine einzige anpassen, sodass sie hinzugefügt wird, um alle Bewegungen zu verarbeiten.

Die Überprüfung des Verarbeitungsbedarfs besteht nun nicht nur, wenn die Maus bewegt wird, sondern auch, wenn RVMovingFactor ungleich Null ist - eine Variable, die für die Bewegung der Kamera entlang der Sichtlinie verantwortlich ist.

Fügen Sie schließlich im Methodencode die Schwenk- und RV-Vektoren hinzu, um die volle Bewegung der Kamera entlang aller drei Achsen zu erhalten, und wenden Sie sie auf die Kamera und auf controls.target an.

Aktualisierungsmethode

Um einige unerwünschte Effekte zu vermeiden, werden am Ende der Methode die folgenden Zeilen hinzugefügt:

  _this.RVMovingFactor = 0.0; _this.rotationZFactor = 0.0;

Wie Sie sich vorstellen können, waren unerwünschte Effekte mit Rotation und Bewegung entlang der Z-Achse verbunden.

Keydown-Methode

Der Quellcode, den ich ganz am Anfang der Geschichte gezeigt habe, ist vollständig kommentiert. Und außer ihm gab es praktisch nichts im Körper der Methode, also können wir sagen, dass sie von Grund auf neu geschrieben wurde.

 function keydown( event ) { if ( _this.enabled === false ) return; switch (event.keyCode) { // 81:Q; 87:W; 69:E; 82:R; // 65:A; 83:S; 68:D; 70:F; // 90:Z; 88:X; 67:C; 86:V; // 107:+; 109:-; 16:Shift; 17:Ctrl; 18:Alt; 9:Tab; // 38:Up; 37:Left; 40:Down; 39:Right; case 87: _this.RVMovingFactor = -0.002 * _this.allSpeedsFactor;//W break; case 83: _this.RVMovingFactor = 0.002 * _this.allSpeedsFactor;//S break; case 65: _movePrev.copy( _moveCurr ); _moveCurr.x -= 0.01 * _this.allSpeedsFactor; //A break; case 68: _movePrev.copy( _moveCurr ); _moveCurr.x += 0.01 * _this.allSpeedsFactor; //D break; case 90: _movePrev.copy( _moveCurr ); _moveCurr.y -= 0.01 * _this.allSpeedsFactor; //Z break; case 88: _movePrev.copy( _moveCurr ); _moveCurr.y += 0.01 * _this.allSpeedsFactor; //X break; case 81: _this.rotationZFactor = -0.01 * _this.allSpeedsFactor;//Q break; case 69: _this.rotationZFactor = 0.01 * _this.allSpeedsFactor;//E break; case 107: _zoomStart.y += 0.02 * _this.allSpeedsFactor; // + break; case 109: _zoomStart.y -= 0.02 * _this.allSpeedsFactor; // - break; case 38: // up _panEnd.y -= 0.01 * _this.allSpeedsFactor; break; case 40: // down _panEnd.y += 0.01 * _this.allSpeedsFactor; break; case 37: // left _panEnd.x -= 0.01 * _this.allSpeedsFactor; break; case 39: // right _panEnd.x += 0.01 * _this.allSpeedsFactor; break; case 82: // R _this.allSpeedsFactor = 0.33; break; case 16: // Shift _this.allSpeedsFactor = 0.05; break; } }

Also, was wurde hier gemacht:

Viele Schaltflächen simulieren Änderungen, die durch Mausbewegungen vorgenommen wurden.
"A", "D" - dupliziert die Kameradrehung nach links und rechts.
"Z", "X" - dupliziert die Kamera, die sich auf und ab dreht.
"+", "-" - Duplizieren Sie den Zoom mit dem Mausrad.

Die Pfeiltasten duplizieren die Bewegung der Kamera nach oben und unten sowie nach links und rechts, ohne den Zoom und den Drehwinkel zu ändern.

Außerdem wurden Funktionen hinzugefügt, bei denen die Tasten der Standardmaus nicht ausreichen würden:
"W", "S" - Bewegung entlang der Sichtlinie ohne Änderung des Zooms.
"Q", "E" - Kameradrehung um die Z-Achse, d.h. um die Sichtlinie.
"R", "Shift" - Verringern Sie die Geschwindigkeit aller Bewegungen, Drehungen, Transformationen um das 3-fache bzw. 20-fache.

In diesem Fall können Sie feststellen, dass die Verwendung des Schlüsselarrays abgelehnt wurde. Für meine Zwecke war dies nicht erforderlich, und um ehrlich zu sein, um das zu vermasseln, was ich persönlich nicht brauche, war ich zu faul.

Keyup-Methode

Ich werde es in seiner Gesamtheit zitieren:

  function keyup( event ) { if ( _this.enabled === false ) return; switch (event.keyCode) { // 81:Q; 87:W; 69:E; 82:R; // 65:A; 83:S; 68:D; 70:F; // 90:Z; 88:X; 67:C; 86:V; // 107:+; 109:-; 16:Shift; 17:Ctrl; 18:Alt; 9:Tab; // 38:Up; 37:Left; 40:Down; 39:Right; case 87: // W _this.RVMovingFactor = 0.0; break; case 83: // S _this.RVMovingFactor = 0.0; break; case 81: // Q _this.rotationZFactor = 0.0; break; case 69: // E _this.rotationZFactor = 0.0; break; case 82: // R _this.allSpeedsFactor = 1.0; break; case 16: // Shift _this.allSpeedsFactor = 1.0; break; } _state = _prevState; //window.addEventListener( 'keydown', keydown, false ); }

Wie Sie vielleicht erraten haben, müssen lediglich die Werte der Variablen RVMovingFactor, RotationZFactor, allSpeedsFactor auf ihre Standardwerte zurückgesetzt werden.

Außerdem wurde die Installation des Keystroke-Handlers kommentiert, da dessen Entfernung bei der Keydown-Methode entfernt wurde.

Um die geänderte Bibliothek nicht mit der Standardbibliothek zu verwechseln, ändern wir den Namen.

Benennen Sie den Konstruktor um:

 THREE.AstroControls = function ( object, domElement ) {

Anstelle von TrackballControls jetzt AstroControls.

Und am Ende der Datei schreiben wir:

 THREE.AstroControls.prototype = Object.create( THREE.EventDispatcher.prototype ); THREE.AstroControls.prototype.constructor = THREE.AstroControls;

Alles, neue Bedienelemente sind einsatzbereit.

Sein gesamter Code befindet sich unter dem Spoiler

 /** * @author Eberhard Graether / http://egraether.com/ * @author Mark Lundin / http://mark-lundin.com * @author Simone Manini / http://daron1337.imtqy.com * @author Luca Antiga / http://lantiga.imtqy.com * modified by Zander. */ THREE.AstroControls = function ( object, domElement ) { var _this = this; var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 }; this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; this.rotationZFactor = 0.0;//1; this.RVMovingFactor = 0.0; this.autoRotate = false; this.autoRotateSpeed = 0.001; this.allSpeedsFactor = 1; // API this.enabled = true; this.screen = { left: 0, top: 0, width: 0, height: 0 }; this.rotateSpeed = 1.0; this.zoomSpeed = 1.2; this.panSpeed = 0.3; this.noRotate = false; this.noZoom = false; this.noPan = false; this.staticMoving = false; this.dynamicDampingFactor = 0.2; this.minDistance = 0; this.maxDistance = Infinity; this.keys = [null, null, null]; // [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ]; // internals this.target = new THREE.Vector3(); var EPS = 0.000001; var lastPosition = new THREE.Vector3(); var _state = STATE.NONE, _prevState = STATE.NONE, _eye = new THREE.Vector3(), _movePrev = new THREE.Vector2(), _moveCurr = new THREE.Vector2(), _lastAxis = new THREE.Vector3(), _lastAngle = 0, _zoomStart = new THREE.Vector2(), _zoomEnd = new THREE.Vector2(), _touchZoomDistanceStart = 0, _touchZoomDistanceEnd = 0, _panStart = new THREE.Vector2(), _panEnd = new THREE.Vector2(); // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.up0 = this.object.up.clone(); // events var changeEvent = { type: 'change' }; var startEvent = { type: 'start' }; var endEvent = { type: 'end' }; // methods this.handleResize = function () { if ( this.domElement === document ) { this.screen.left = 0; this.screen.top = 0; this.screen.width = window.innerWidth; this.screen.height = window.innerHeight; } else { var box = this.domElement.getBoundingClientRect(); // adjustments come from similar code in the jquery offset() function var d = this.domElement.ownerDocument.documentElement; this.screen.left = box.left + window.pageXOffset - d.clientLeft; this.screen.top = box.top + window.pageYOffset - d.clientTop; this.screen.width = box.width; this.screen.height = box.height; } }; var getMouseOnScreen = ( function () { var vector = new THREE.Vector2(); return function getMouseOnScreen( pageX, pageY ) { vector.set( ( pageX - _this.screen.left ) / _this.screen.width, ( pageY - _this.screen.top ) / _this.screen.height ); return vector; }; }() ); var getMouseOnCircle = ( function () { var vector = new THREE.Vector2(); return function getMouseOnCircle( pageX, pageY ) { vector.set( ( ( pageX - _this.screen.width * 0.5 - _this.screen.left ) / ( _this.screen.width * 0.5 ) ), ( ( _this.screen.height + 2 * ( _this.screen.top - pageY ) ) / _this.screen.width ) // screen.width intentional ); return vector; }; }() ); this.rotateCamera = ( function () { var axis = new THREE.Vector3(), quaternion = new THREE.Quaternion(), eyeDirection = new THREE.Vector3(), objectUpDirection = new THREE.Vector3(), objectSidewaysDirection = new THREE.Vector3(), moveDirection = new THREE.Vector3(), tmpQuaternion = new THREE.Quaternion(), angle; return function rotateCamera() { if (_this.autoRotate) _moveCurr.x += _this.autoRotateSpeed; moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); moveDirection.setLength(moveDirection.length() * _this.allSpeedsFactor); angle = moveDirection.length(); if ( angle || _this.rotationZFactor) { _eye.copy( _this.object.position ).sub( _this.target ); eyeDirection.copy( _eye ).normalize(); objectUpDirection.copy( _this.object.up ).normalize(); objectSidewaysDirection.crossVectors( objectUpDirection, eyeDirection ).normalize(); objectUpDirection.setLength( _moveCurr.y - _movePrev.y ); objectSidewaysDirection.setLength( _moveCurr.x - _movePrev.x ); moveDirection.copy( objectUpDirection.add( objectSidewaysDirection ) ); axis.crossVectors( moveDirection, _eye ).normalize(); angle *= _this.rotateSpeed; quaternion.setFromAxisAngle( axis, angle ); // added for z-axis rotation tmpQuaternion.setFromAxisAngle( eyeDirection, _this.rotationZFactor ); quaternion.multiply( tmpQuaternion ); // end add _eye.applyQuaternion( quaternion ); _this.object.up.applyQuaternion( quaternion ); _lastAxis.copy( axis ); _lastAngle = angle; } else if ( ! _this.staticMoving && _lastAngle ) { _lastAngle *= Math.sqrt( 1.0 - _this.dynamicDampingFactor * _this.allSpeedsFactor ); _eye.copy( _this.object.position ).sub( _this.target ); quaternion.setFromAxisAngle( _lastAxis, _lastAngle ); _eye.applyQuaternion( quaternion ); _this.object.up.applyQuaternion( quaternion ); } _movePrev.copy( _moveCurr ); }; }() ); this.zoomCamera = function () { var factor; if ( _state === STATE.TOUCH_ZOOM_PAN ) { factor = _this.allSpeedsFactor * _touchZoomDistanceStart / _touchZoomDistanceEnd; _touchZoomDistanceStart = _touchZoomDistanceEnd; _eye.multiplyScalar( factor ); } else { factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed * _this.allSpeedsFactor; if ( factor !== 1.0 && factor > 0.0 ) { _eye.multiplyScalar( factor ); } if ( _this.staticMoving ) { _zoomStart.copy( _zoomEnd ); } else { _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor * _this.allSpeedsFactor; } } }; this.panCamera = ( function () { var mouseChange = new THREE.Vector2(), objectUp = new THREE.Vector3(), rv = new THREE.Vector3() pan = new THREE.Vector3(); return function panCamera() { mouseChange.copy( _panEnd ).sub( _panStart ); mouseChange.setLength(mouseChange.length() * _this.allSpeedsFactor); if ( mouseChange.lengthSq() || _this.RVMovingFactor ) { mouseChange.multiplyScalar( _eye.length() * _this.panSpeed ); pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x ); pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) ); pan.add( rv.copy( _eye ).setLength(_this.RVMovingFactor * _eye.length()) ); _this.object.position.add( pan ); _this.target.add( pan ); if ( _this.staticMoving ) { _panStart.copy( _panEnd ); } else { _panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor * _this.allSpeedsFactor ) ); } } }; }() ); this.checkDistances = function () { if ( ! _this.noZoom || ! _this.noPan ) { if ( _eye.lengthSq() > _this.maxDistance * _this.maxDistance ) { _this.object.position.addVectors( _this.target, _eye.setLength( _this.maxDistance ) ); _zoomStart.copy( _zoomEnd ); } if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) { _this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) ); _zoomStart.copy( _zoomEnd ); } } }; this.update = function () { _eye.subVectors( _this.object.position, _this.target ); if ( ! _this.noRotate ) { _this.rotateCamera(); } if ( ! _this.noZoom ) { _this.zoomCamera(); } if ( ! _this.noPan ) { _this.panCamera(); } _this.object.position.addVectors( _this.target, _eye ); _this.checkDistances(); _this.object.lookAt( _this.target ); if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) { _this.dispatchEvent( changeEvent ); lastPosition.copy( _this.object.position ); } _this.RVMovingFactor = 0.0; _this.rotationZFactor = 0.0; }; this.reset = function () { _state = STATE.NONE; _prevState = STATE.NONE; _this.target.copy( _this.target0 ); _this.object.position.copy( _this.position0 ); _this.object.up.copy( _this.up0 ); _eye.subVectors( _this.object.position, _this.target ); _this.object.lookAt( _this.target ); _this.dispatchEvent( changeEvent ); lastPosition.copy( _this.object.position ); }; // listeners function keydown( event ) { if ( _this.enabled === false ) return; //window.removeEventListener( 'keydown', keydown ); _prevState = _state; /** if ( _state !== STATE.NONE ) { return; } else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) { _state = STATE.ROTATE; } else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) { _state = STATE.ZOOM; } else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) { _state = STATE.PAN; } **/ switch (event.keyCode) { // 81:Q; 87:W; 69:E; 82:R; // 65:A; 83:S; 68:D; 70:F; // 90:Z; 88:X; 67:C; 86:V; // 107:+; 109:-; 16:Shift; 17:Ctrl; 18:Alt; 9:Tab; // 38:Up; 37:Left; 40:Down; 39:Right; case 87: _this.RVMovingFactor = -0.002 * _this.allSpeedsFactor;//W break; case 83: _this.RVMovingFactor = 0.002 * _this.allSpeedsFactor;//S break; case 65: _movePrev.copy( _moveCurr ); _moveCurr.x -= 0.01 * _this.allSpeedsFactor; //A break; case 68: _movePrev.copy( _moveCurr ); _moveCurr.x += 0.01 * _this.allSpeedsFactor; //D break; case 90: _movePrev.copy( _moveCurr ); _moveCurr.y -= 0.01 * _this.allSpeedsFactor; //Z break; case 88: _movePrev.copy( _moveCurr ); _moveCurr.y += 0.01 * _this.allSpeedsFactor; //X break; case 81: _this.rotationZFactor = -0.01 * _this.allSpeedsFactor;//Q break; case 69: _this.rotationZFactor = 0.01 * _this.allSpeedsFactor;//E break; case 107: _zoomStart.y += 0.02 * _this.allSpeedsFactor; // + break; case 109: _zoomStart.y -= 0.02 * _this.allSpeedsFactor; // - break; case 38: // up _panEnd.y -= 0.01 * _this.allSpeedsFactor; break; case 40: // down _panEnd.y += 0.01 * _this.allSpeedsFactor; break; case 37: // left _panEnd.x -= 0.01 * _this.allSpeedsFactor; break; case 39: // right _panEnd.x += 0.01 * _this.allSpeedsFactor; break; case 82: // R _this.allSpeedsFactor = 0.33; break; case 16: // Shift _this.allSpeedsFactor = 0.05; break; } } function keyup( event ) { if ( _this.enabled === false ) return; switch (event.keyCode) { // 81:Q; 87:W; 69:E; 82:R; // 65:A; 83:S; 68:D; 70:F; // 90:Z; 88:X; 67:C; 86:V; // 107:+; 109:-; 16:Shift; 17:Ctrl; 18:Alt; 9:Tab; // 38:Up; 37:Left; 40:Down; 39:Right; case 87: // W _this.RVMovingFactor = 0.0; break; case 83: // S _this.RVMovingFactor = 0.0; break; case 81: // Q _this.rotationZFactor = 0.0; break; case 69: // E _this.rotationZFactor = 0.0; break; case 82: // R _this.allSpeedsFactor = 1.0; break; case 16: // Shift _this.allSpeedsFactor = 1.0; break; } _state = _prevState; //window.addEventListener( 'keydown', keydown, false ); } function mousedown( event ) { if ( _this.enabled === false ) return; event.preventDefault(); event.stopPropagation(); if ( _state === STATE.NONE ) { _state = event.button; } if ( _state === STATE.ROTATE && ! _this.noRotate ) { _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); _movePrev.copy( _moveCurr ); } else if ( _state === STATE.ZOOM && ! _this.noZoom ) { _zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); _zoomEnd.copy( _zoomStart ); } else if ( _state === STATE.PAN && ! _this.noPan ) { _panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) ); _panEnd.copy( _panStart ); } document.addEventListener( 'mousemove', mousemove, false ); document.addEventListener( 'mouseup', mouseup, false ); _this.dispatchEvent( startEvent ); } function mousemove( event ) { if ( _this.enabled === false ) return; event.preventDefault(); event.stopPropagation(); if ( _state === STATE.ROTATE && ! _this.noRotate ) { _movePrev.copy( _moveCurr ); _moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) ); } else if ( _state === STATE.ZOOM && ! _this.noZoom ) { _zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); } else if ( _state === STATE.PAN && ! _this.noPan ) { _panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) ); } } function mouseup( event ) { if ( _this.enabled === false ) return; event.preventDefault(); event.stopPropagation(); _state = STATE.NONE; document.removeEventListener( 'mousemove', mousemove ); document.removeEventListener( 'mouseup', mouseup ); _this.dispatchEvent( endEvent ); } function mousewheel( event ) { if ( _this.enabled === false ) return; if ( _this.noZoom === true ) return; event.preventDefault(); event.stopPropagation(); switch ( event.deltaMode ) { case 2: // Zoom in pages _zoomStart.y -= event.deltaY * 0.025 * _this.allSpeedsFactor; break; case 1: // Zoom in lines _zoomStart.y -= event.deltaY * 0.01 * _this.allSpeedsFactor; break; default: // undefined, 0, assume pixels _zoomStart.y -= event.deltaY * 0.00025 * _this.allSpeedsFactor; break; } _this.dispatchEvent( startEvent ); _this.dispatchEvent( endEvent ); } function touchstart( event ) { if ( _this.enabled === false ) return; switch ( event.touches.length ) { case 1: _state = STATE.TOUCH_ROTATE; _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); _movePrev.copy( _moveCurr ); break; default: // 2 or more _state = STATE.TOUCH_ZOOM_PAN; var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy ); var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2; var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2; _panStart.copy( getMouseOnScreen( x, y ) ); _panEnd.copy( _panStart ); break; } _this.dispatchEvent( startEvent ); } function touchmove( event ) { if ( _this.enabled === false ) return; event.preventDefault(); event.stopPropagation(); switch ( event.touches.length ) { case 1: _movePrev.copy( _moveCurr ); _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); break; default: // 2 or more var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX; var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY; _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy ); var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2; var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2; _panEnd.copy( getMouseOnScreen( x, y ) ); break; } } function touchend( event ) { if ( _this.enabled === false ) return; switch ( event.touches.length ) { case 0: _state = STATE.NONE; break; case 1: _state = STATE.TOUCH_ROTATE; _moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) ); _movePrev.copy( _moveCurr ); break; } _this.dispatchEvent( endEvent ); } function contextmenu( event ) { if ( _this.enabled === false ) return; event.preventDefault(); } this.dispose = function () { this.domElement.removeEventListener( 'contextmenu', contextmenu, false ); this.domElement.removeEventListener( 'mousedown', mousedown, false ); this.domElement.removeEventListener( 'wheel', mousewheel, false ); this.domElement.removeEventListener( 'touchstart', touchstart, false ); this.domElement.removeEventListener( 'touchend', touchend, false ); this.domElement.removeEventListener( 'touchmove', touchmove, false ); document.removeEventListener( 'mousemove', mousemove, false ); document.removeEventListener( 'mouseup', mouseup, false ); window.removeEventListener( 'keydown', keydown, false ); window.removeEventListener( 'keyup', keyup, false ); }; this.domElement.addEventListener( 'contextmenu', contextmenu, false ); this.domElement.addEventListener( 'mousedown', mousedown, false ); this.domElement.addEventListener( 'wheel', mousewheel, false ); this.domElement.addEventListener( 'touchstart', touchstart, false ); this.domElement.addEventListener( 'touchend', touchend, false ); this.domElement.addEventListener( 'touchmove', touchmove, false ); window.addEventListener( 'keydown', keydown, false ); window.addEventListener( 'keyup', keyup, false ); this.handleResize(); // force an update at start this.update(); }; THREE.AstroControls.prototype = Object.create( THREE.EventDispatcher.prototype ); THREE.AstroControls.prototype.constructor = THREE.AstroControls;

Anwendung

Speichern Sie den vollständigen Code in einer Datei, nennen Sie ihn AstroControls.js und fügen Sie ihn Ihrem Projekt hinzu.

Erstellen Sie Steuerelemente wie folgt:

 var controls; ... //      , ,  : controls = new THREE.AstroControls( camera, renderer.domElement ); //  controls //       ,     . // controls      . 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;

In Zukunft ist alles Standard, setzen Sie controls.target und controls.autoRotate wie gewohnt. ( , three.js , OrbitControls . AstroControls ) , , , touch-events.

, - .

Three.js - Steuerelemente für Weltraum oder Planetarium