/** * @author mikael emtinger / http://gomo.se/ * @author alteredq / http://alteredqualia.com/ * * Eye is fixed in position, camera's up is fixed to +Y, direction is constantly * updated, with direction of mouse on screen compared to screen's center determining * the direction of drift. */ THREE.RollControls = function ( object, domElement ) { this.object = object; this.domElement = ( domElement !== undefined ) ? domElement : document; // API this.mouseLook = true; this.autoForward = false; this.lookSpeed = 1; this.movementSpeed = 1; this.rollSpeed = 1; this.constrainVertical = [ -0.9, 0.9 ]; // disable default target object behavior this.object.matrixAutoUpdate = false; // internals this.forward = new THREE.Vector3( 0, 0, 1 ); this.roll = 0; var xTemp = new THREE.Vector3(); var yTemp = new THREE.Vector3(); var zTemp = new THREE.Vector3(); var rollMatrix = new THREE.Matrix4(); var doRoll = false, rollDirection = 1, forwardSpeed = 0, sideSpeed = 0, upSpeed = 0; var mouseX = 0, mouseY = 0; var windowHalfX = 0; var windowHalfY = 0; // this.handleResize = function () { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; }; // custom update this.update = function ( delta ) { if ( this.mouseLook ) { var actualLookSpeed = delta * this.lookSpeed; this.rotateHorizontally( actualLookSpeed * mouseX ); this.rotateVertically( actualLookSpeed * mouseY ); } var actualSpeed = delta * this.movementSpeed; var forwardOrAuto = ( forwardSpeed > 0 || ( this.autoForward && ! ( forwardSpeed < 0 ) ) ) ? 1 : forwardSpeed; this.object.translateZ( -actualSpeed * forwardOrAuto ); this.object.translateX( actualSpeed * sideSpeed ); this.object.translateY( actualSpeed * upSpeed ); if( doRoll ) { this.roll += this.rollSpeed * delta * rollDirection; } // cap forward up / down if( this.forward.y > this.constrainVertical[ 1 ] ) { this.forward.y = this.constrainVertical[ 1 ]; this.forward.normalize(); } else if( this.forward.y < this.constrainVertical[ 0 ] ) { this.forward.y = this.constrainVertical[ 0 ]; this.forward.normalize(); } // construct unrolled camera matrix zTemp.copy( this.forward ); yTemp.set( 0, 1, 0 ); xTemp.crossVectors( yTemp, zTemp ).normalize(); yTemp.crossVectors( zTemp, xTemp ).normalize(); this.object.matrix.elements[0] = xTemp.x; this.object.matrix.elements[4] = yTemp.x; this.object.matrix.elements[8] = zTemp.x; this.object.matrix.elements[1] = xTemp.y; this.object.matrix.elements[5] = yTemp.y; this.object.matrix.elements[9] = zTemp.y; this.object.matrix.elements[2] = xTemp.z; this.object.matrix.elements[6] = yTemp.z; this.object.matrix.elements[10] = zTemp.z; // calculate roll matrix rollMatrix.identity(); rollMatrix.elements[0] = Math.cos( this.roll ); rollMatrix.elements[4] = -Math.sin( this.roll ); rollMatrix.elements[1] = Math.sin( this.roll ); rollMatrix.elements[5] = Math.cos( this.roll ); // multiply camera with roll this.object.matrix.multiply( rollMatrix ); this.object.matrixWorldNeedsUpdate = true; // set position this.object.matrix.elements[12] = this.object.position.x; this.object.matrix.elements[13] = this.object.position.y; this.object.matrix.elements[14] = this.object.position.z; }; this.translateX = function ( distance ) { this.object.position.x += this.object.matrix.elements[0] * distance; this.object.position.y += this.object.matrix.elements[1] * distance; this.object.position.z += this.object.matrix.elements[2] * distance; }; this.translateY = function ( distance ) { this.object.position.x += this.object.matrix.elements[4] * distance; this.object.position.y += this.object.matrix.elements[5] * distance; this.object.position.z += this.object.matrix.elements[6] * distance; }; this.translateZ = function ( distance ) { this.object.position.x -= this.object.matrix.elements[8] * distance; this.object.position.y -= this.object.matrix.elements[9] * distance; this.object.position.z -= this.object.matrix.elements[10] * distance; }; this.rotateHorizontally = function ( amount ) { // please note that the amount is NOT degrees, but a scale value xTemp.set( this.object.matrix.elements[0], this.object.matrix.elements[1], this.object.matrix.elements[2] ); xTemp.multiplyScalar( amount ); this.forward.sub( xTemp ); this.forward.normalize(); }; this.rotateVertically = function ( amount ) { // please note that the amount is NOT degrees, but a scale value yTemp.set( this.object.matrix.elements[4], this.object.matrix.elements[5], this.object.matrix.elements[6] ); yTemp.multiplyScalar( amount ); this.forward.add( yTemp ); this.forward.normalize(); }; function onKeyDown( event ) { //event.preventDefault(); switch ( event.keyCode ) { case 38: /*up*/ case 87: /*W*/ forwardSpeed = 1; break; case 37: /*left*/ case 65: /*A*/ sideSpeed = -1; break; case 40: /*down*/ case 83: /*S*/ forwardSpeed = -1; break; case 39: /*right*/ case 68: /*D*/ sideSpeed = 1; break; case 81: /*Q*/ doRoll = true; rollDirection = 1; break; case 69: /*E*/ doRoll = true; rollDirection = -1; break; case 82: /*R*/ upSpeed = 1; break; case 70: /*F*/ upSpeed = -1; break; } }; function onKeyUp( event ) { switch( event.keyCode ) { case 38: /*up*/ case 87: /*W*/ forwardSpeed = 0; break; case 37: /*left*/ case 65: /*A*/ sideSpeed = 0; break; case 40: /*down*/ case 83: /*S*/ forwardSpeed = 0; break; case 39: /*right*/ case 68: /*D*/ sideSpeed = 0; break; case 81: /*Q*/ doRoll = false; break; case 69: /*E*/ doRoll = false; break; case 82: /*R*/ upSpeed = 0; break; case 70: /*F*/ upSpeed = 0; break; } }; function onMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) / window.innerWidth; mouseY = ( event.clientY - windowHalfY ) / window.innerHeight; }; function onMouseDown ( event ) { event.preventDefault(); event.stopPropagation(); switch ( event.button ) { case 0: forwardSpeed = 1; break; case 2: forwardSpeed = -1; break; } }; function onMouseUp ( event ) { event.preventDefault(); event.stopPropagation(); switch ( event.button ) { case 0: forwardSpeed = 0; break; case 2: forwardSpeed = 0; break; } }; this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false ); this.domElement.addEventListener( 'mousemove', onMouseMove, false ); this.domElement.addEventListener( 'mousedown', onMouseDown, false ); this.domElement.addEventListener( 'mouseup', onMouseUp, false ); this.domElement.addEventListener( 'keydown', onKeyDown, false ); this.domElement.addEventListener( 'keyup', onKeyUp, false ); this.handleResize(); };