Three.js - make controls for space or planetarium
When developing my project on the topic of space, I faced the fact that in three.js for some reason there is no ready-made and convenient camera control tool suitable for such tasks. Of course, I admit that I was just looking bad ... But, I didn’t give a pretty long search for the results.
OrbitControls is a traditional favorite of the three.js examples, it doesn’t know how to turn the camera upside down, and it’s not able to do many other things.
TrackballControls is remarkable in that the camera rotates around the object as you please, and upside down too, but it doesn’t know how to turn on the axis of view, can’t move back and forth without changing the scale, there is no convenient adjustment of the speed of movements and turns.
')
FlyControls - on the contrary, allows you to make a "barrel" and change the speed, but ... where did the rotation of the camera around the object in question go?
It was possible, of course, to get out with the help of all kinds of crutches, but somehow it was not comme il faut. Making sure that there is no ready-made solution for my purposes, I decided to create it myself. Who are interested, please under the cat.
I decided to take TrackballControls.js as a basis, having opened it, we see the authors:
Here is their work and will serve as a starting point. It is necessary to add a little, and if possible not to break the existing one. (However, something had to be cut out).
To begin with, what we have: the camera rotates around the object without restrictions, does not get stuck on the pole, during all turns it maintains a constant angular velocity. There is a zoom, there is a pan. This is good, but not enough.
Surprise was a strange position with buttons. In fact, this is unexpected:
Control the camera with just three buttons? Maybe this is a good idea, but in fact it does not work. In the keydown event handler in the source, we observe the following lines:
It looks somewhat mysterious, but ... does not work. Those. at all. The above buttons do not actually do anything, the camera is controlled only by the mouse or by that.
I commented on this piece of code as unnecessary, and replaced it with my own, about which the story will be a little further. Removing the callback to handle the button - obviously, it was necessary that the buttons work only once per click. But this is not the kind of behavior that is needed in space, therefore it is also a comment.
So what are we missing here? What I decided to add:
I hope the reader will forgive me for the fact that I’m not going to talk about the editing process in the order of these subtasks, but in the order of the source code from top to bottom. I will explain what and why I am doing.
Add several variables:
rotationZFactor is needed to control the rotation of the camera on the axis of view,
RVMovingFactor to control forward and backward movement along the same axis,
autoRotate, I believe, does not need comments,
allSpeedsFactor to control the speed of all, movements and turns.
Organized as follows:
Here, almost everything was as it was, the only thing I added was the tmpQuaternion variable for processing camera rotation along the Z axis.
Further, checking the need for any processing was pretty straightforward:
And it became like this:
What is there and why. First, if auto-rotation is active, then we add its speed to the rotation along the X axis. Second, we add scaling of all rotations (And auto-rotation too) to allSpeedsFactor. To control the speed of all conversions. And thirdly, we will take further actions not only in the case when the angle angle (Moving the camera relative to controls.target) is different from zero, but also in the case when the rotationZFactor responsible for rotating the camera along the Z axis is different from zero
Further, in the method code, after calculating the rotation quaternion, a small addition:
The quaternion of camera rotation around the object is multiplied by the separately calculated rotation quaternion along the Z axis. Now the camera can rotate along all three axes.
I will give his code in its entirety, it is small
All changes boil down to adding allSpeedsFactor in a number of places to control speed (movements, rotations) and zoom.
I will also give his code entirely, since he is not big:
But there is much more change. I will tell about all in order.
Added the variable rv - vector for processing the radial velocity of the camera, i.e. its velocity along the z axis.
The scaling of the mouseChange vector has been added to the same allSpeedsFactor, but again it’s here, I want to adjust all transformations to it with its help, therefore it will be added to the processing of all movements.
The verification of the need for processing now passes not only if the mouse is moved, but also when RVMovingFactor is different from zero — the variable responsible for camera movement along the line of sight.
Finally, in the code of the method, we add the pan and rv vectors to get the camera move completely along all three axes and apply it to the camera and controls.target.
To eliminate some undesirable effects, the following lines are added to the very end of the method:
Unwanted effects were associated with rotation and movement along the Z axis, as you can guess.
The source code, which I showed at the very beginning of the narration, is entirely commented on. And besides him, there was practically nothing in the body of the method, so one can say it was rewritten from scratch.
So, what has been done here:
Many buttons simulate changes made by mouse movement.
“A”, “D” - duplicates the rotation of the camera left and right.
“Z”, “X” - duplicates the rotation of the camera up and down.
"+", "-" - duplicate the zoom using the mouse wheel.
The arrow buttons duplicate the movement of the camera up-down and left-right, without changing the zoom and the angle of rotation.
As well as added features for which the buttons of a standard mouse would no longer be enough:
“W”, “S” - movement along the line of sight without changing the zoom.
“Q”, “E” - rotation of the camera around the Z axis around the line of sight.
“R”, “Shift” - decrease in the speed of all movements, turns, transformations, 3 times and 20 times, respectively.
In this case, you can see that there was a failure to use the keys array. For my purposes, this was not required, and to be honest, it was too lazy to fasten what I personally did not need.
I will give it entirely:
As it is easy to guess, all that is being done here is returning the values ​​of the variables RVMovingFactor, rotationZFactor, allSpeedsFactor, to their default values.
In addition, the installation of the keystroke handler was commented on because its removal was removed in the keydown method.
Finally, in order not to confuse the modified library with the standard one, we change the name.
Constructor rename:
Instead of TrackballControls, now AstroControls.
And at the end of the file we write:
All new controls are ready to use.
Save the full code to a file, name it AstroControls.js, add it to your project.
Create controls like this:
, controls.target controls.autoRotate . ( , three.js , OrbitControls . AstroControls ) , , , touch-events.
, - .
OrbitControls is a traditional favorite of the three.js examples, it doesn’t know how to turn the camera upside down, and it’s not able to do many other things.
TrackballControls is remarkable in that the camera rotates around the object as you please, and upside down too, but it doesn’t know how to turn on the axis of view, can’t move back and forth without changing the scale, there is no convenient adjustment of the speed of movements and turns.
')
FlyControls - on the contrary, allows you to make a "barrel" and change the speed, but ... where did the rotation of the camera around the object in question go?
It was possible, of course, to get out with the help of all kinds of crutches, but somehow it was not comme il faut. Making sure that there is no ready-made solution for my purposes, I decided to create it myself. Who are interested, please under the cat.
I decided to take TrackballControls.js as a basis, having opened it, we see the authors:
/** * @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 */ Here is their work and will serve as a starting point. It is necessary to add a little, and if possible not to break the existing one. (However, something had to be cut out).
To begin with, what we have: the camera rotates around the object without restrictions, does not get stuck on the pole, during all turns it maintains a constant angular velocity. There is a zoom, there is a pan. This is good, but not enough.
Surprise was a strange position with buttons. In fact, this is unexpected:
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ]; Control the camera with just three buttons? Maybe this is a good idea, but in fact it does not work. In the keydown event handler in the source, we observe the following lines:
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; } It looks somewhat mysterious, but ... does not work. Those. at all. The above buttons do not actually do anything, the camera is controlled only by the mouse or by that.
I commented on this piece of code as unnecessary, and replaced it with my own, about which the story will be a little further. Removing the callback to handle the button - obviously, it was necessary that the buttons work only once per click. But this is not the kind of behavior that is needed in space, therefore it is also a comment.
So what are we missing here? What I decided to add:
- Moving back and forth along the line of sight.
- Rotation of the camera, the axis of which is the line of sight
- Autorotation.
- The ability to change the speed of all movements and turns with one button.
- Full control from the keyboard.
I hope the reader will forgive me for the fact that I’m not going to talk about the editing process in the order of these subtasks, but in the order of the source code from top to bottom. I will explain what and why I am doing.
Constructor
Add several variables:
this.rotationZFactor = 0.0; this.RVMovingFactor = 0.0; this.autoRotate = false; this.autoRotateSpeed = 0.001; this.allSpeedsFactor = 1; rotationZFactor is needed to control the rotation of the camera on the axis of view,
RVMovingFactor to control forward and backward movement along the same axis,
autoRotate, I believe, does not need comments,
allSpeedsFactor to control the speed of all, movements and turns.
RotateCamera Method
Organized as follows:
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() { ... Here, almost everything was as it was, the only thing I added was the tmpQuaternion variable for processing camera rotation along the Z axis.
Further, checking the need for any processing was pretty straightforward:
moveDirection.set( _moveCurr.x - _movePrev.x, _moveCurr.y - _movePrev.y, 0 ); angle = moveDirection.length(); if ( angle ) { And it became like this:
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) { What is there and why. First, if auto-rotation is active, then we add its speed to the rotation along the X axis. Second, we add scaling of all rotations (And auto-rotation too) to allSpeedsFactor. To control the speed of all conversions. And thirdly, we will take further actions not only in the case when the angle angle (Moving the camera relative to controls.target) is different from zero, but also in the case when the rotationZFactor responsible for rotating the camera along the Z axis is different from zero
Further, in the method code, after calculating the rotation quaternion, a small addition:
quaternion.setFromAxisAngle( axis, angle ); // , // , . // added for z-axis rotation tmpQuaternion.setFromAxisAngle( eyeDirection, _this.rotationZFactor ); quaternion.multiply( tmpQuaternion ); // end add The quaternion of camera rotation around the object is multiplied by the separately calculated rotation quaternion along the Z axis. Now the camera can rotate along all three axes.
ZoomCamera method
I will give his code in its entirety, it is small
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; } } }; All changes boil down to adding allSpeedsFactor in a number of places to control speed (movements, rotations) and zoom.
PanCamera method
I will also give his code entirely, since he is not big:
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 ) ); } } }; }() ); But there is much more change. I will tell about all in order.
Added the variable rv - vector for processing the radial velocity of the camera, i.e. its velocity along the z axis.
The scaling of the mouseChange vector has been added to the same allSpeedsFactor, but again it’s here, I want to adjust all transformations to it with its help, therefore it will be added to the processing of all movements.
The verification of the need for processing now passes not only if the mouse is moved, but also when RVMovingFactor is different from zero — the variable responsible for camera movement along the line of sight.
Finally, in the code of the method, we add the pan and rv vectors to get the camera move completely along all three axes and apply it to the camera and controls.target.
Update method
To eliminate some undesirable effects, the following lines are added to the very end of the method:
_this.RVMovingFactor = 0.0; _this.rotationZFactor = 0.0; Unwanted effects were associated with rotation and movement along the Z axis, as you can guess.
Keydown method
The source code, which I showed at the very beginning of the narration, is entirely commented on. And besides him, there was practically nothing in the body of the method, so one can say it was rewritten from scratch.
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; } } So, what has been done here:
Many buttons simulate changes made by mouse movement.
“A”, “D” - duplicates the rotation of the camera left and right.
“Z”, “X” - duplicates the rotation of the camera up and down.
"+", "-" - duplicate the zoom using the mouse wheel.
The arrow buttons duplicate the movement of the camera up-down and left-right, without changing the zoom and the angle of rotation.
As well as added features for which the buttons of a standard mouse would no longer be enough:
“W”, “S” - movement along the line of sight without changing the zoom.
“Q”, “E” - rotation of the camera around the Z axis around the line of sight.
“R”, “Shift” - decrease in the speed of all movements, turns, transformations, 3 times and 20 times, respectively.
In this case, you can see that there was a failure to use the keys array. For my purposes, this was not required, and to be honest, it was too lazy to fasten what I personally did not need.
Keyup method
I will give it entirely:
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 ); } As it is easy to guess, all that is being done here is returning the values ​​of the variables RVMovingFactor, rotationZFactor, allSpeedsFactor, to their default values.
In addition, the installation of the keystroke handler was commented on because its removal was removed in the keydown method.
Finally, in order not to confuse the modified library with the standard one, we change the name.
Constructor rename:
THREE.AstroControls = function ( object, domElement ) { Instead of TrackballControls, now AstroControls.
And at the end of the file we write:
THREE.AstroControls.prototype = Object.create( THREE.EventDispatcher.prototype ); THREE.AstroControls.prototype.constructor = THREE.AstroControls; All new controls are ready to use.
Completely all his code under the 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; Application
Save the full code to a file, name it AstroControls.js, add it to your project.
Create controls like this:
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; , controls.target controls.autoRotate . ( , three.js , OrbitControls . AstroControls ) , , , touch-events.
, - .
Source: https://habr.com/ru/post/435974/
All Articles