Car.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. * @author Lewy Blue https://github.com/looeee
  4. *
  5. * The model is expected to follow real world car proportions. You can try unusual car types
  6. * but your results may be unexpected. Scaled models are also not supported.
  7. *
  8. * Defaults are rough estimates for a real world scale car model
  9. *
  10. */
  11. THREE.Car = ( function ( ) {
  12. // private variables
  13. var steeringWheelSpeed = 1.5;
  14. var maxSteeringRotation = 0.6;
  15. var acceleration = 0;
  16. var maxSpeedReverse, accelerationReverse, deceleration;
  17. var controlKeys = { LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, BRAKE: 32 };
  18. var wheelOrientation = 0;
  19. var carOrientation = 0;
  20. var root = null;
  21. var frontLeftWheelRoot = null;
  22. var frontRightWheelRoot = null;
  23. var frontLeftWheel = new THREE.Group();
  24. var frontRightWheel = new THREE.Group();
  25. var backLeftWheel = null;
  26. var backRightWheel = null;
  27. var steeringWheel = null;
  28. var wheelDiameter = 1;
  29. var length = 1;
  30. var loaded = false;
  31. var controls = {
  32. brake: false,
  33. moveForward: false,
  34. moveBackward: false,
  35. moveLeft: false,
  36. moveRight: false
  37. };
  38. function Car( maxSpeed, acceleration, brakePower, turningRadius, keys ) {
  39. this.enabled = true;
  40. this.elemNames = {
  41. flWheel: 'wheel_fl',
  42. frWheel: 'wheel_fr',
  43. rlWheel: 'wheel_rl',
  44. rrWheel: 'wheel_rr',
  45. steeringWheel: 'steering_wheel', // set to null to disable
  46. };
  47. // km/hr
  48. this.maxSpeed = maxSpeed || 180;
  49. maxSpeedReverse = - this.maxSpeed * 0.25;
  50. // m/s
  51. this.acceleration = acceleration || 10;
  52. accelerationReverse = this.acceleration * 0.5;
  53. // metres
  54. this.turningRadius = turningRadius || 6;
  55. // m/s
  56. deceleration = this.acceleration * 2;
  57. // multiplied with deceleration, so breaking deceleration = ( acceleration * 2 * brakePower ) m/s
  58. this.brakePower = brakePower || 10;
  59. // exposed so that a user can use this for various effect, e.g blur
  60. this.speed = 0;
  61. // keys used to control car - by default the arrow keys and space to brake
  62. controlKeys = keys || controlKeys;
  63. // local axes of rotation - these are likely to vary between models
  64. this.wheelRotationAxis = 'x';
  65. this.wheelTurnAxis = 'z';
  66. this.steeringWheelTurnAxis = 'y';
  67. document.addEventListener( 'keydown', this.onKeyDown, false );
  68. document.addEventListener( 'keyup', this.onKeyUp, false );
  69. }
  70. Car.prototype = {
  71. constructor: Car,
  72. onKeyDown: function ( event ) {
  73. switch ( event.keyCode ) {
  74. case controlKeys.BRAKE:
  75. controls.brake = true;
  76. controls.moveForward = false;
  77. controls.moveBackward = false;
  78. break;
  79. case controlKeys.UP: controls.moveForward = true; break;
  80. case controlKeys.DOWN: controls.moveBackward = true; break;
  81. case controlKeys.LEFT: controls.moveLeft = true; break;
  82. case controlKeys.RIGHT: controls.moveRight = true; break;
  83. }
  84. },
  85. onKeyUp: function ( event ) {
  86. switch ( event.keyCode ) {
  87. case controlKeys.BRAKE: controls.brake = false; break;
  88. case controlKeys.UP: controls.moveForward = false; break;
  89. case controlKeys.DOWN: controls.moveBackward = false; break;
  90. case controlKeys.LEFT: controls.moveLeft = false; break;
  91. case controlKeys.RIGHT: controls.moveRight = false; break;
  92. }
  93. },
  94. dispose: function () {
  95. document.removeEventListener( 'keydown', this.onKeyDown, false );
  96. document.removeEventListener( 'keyup', this.onKeyUp, false );
  97. },
  98. update: function ( delta ) {
  99. if ( ! loaded || ! this.enabled ) return;
  100. var brakingDeceleration = 1;
  101. if ( controls.brake ) brakingDeceleration = this.brakePower;
  102. if ( controls.moveForward ) {
  103. this.speed = THREE.Math.clamp( this.speed + delta * this.acceleration, maxSpeedReverse, this.maxSpeed );
  104. acceleration = THREE.Math.clamp( acceleration + delta, - 1, 1 );
  105. }
  106. if ( controls.moveBackward ) {
  107. this.speed = THREE.Math.clamp( this.speed - delta * accelerationReverse, maxSpeedReverse, this.maxSpeed );
  108. acceleration = THREE.Math.clamp( acceleration - delta, - 1, 1 );
  109. }
  110. if ( controls.moveLeft ) {
  111. wheelOrientation = THREE.Math.clamp( wheelOrientation + delta * steeringWheelSpeed, - maxSteeringRotation, maxSteeringRotation );
  112. }
  113. if ( controls.moveRight ) {
  114. wheelOrientation = THREE.Math.clamp( wheelOrientation - delta * steeringWheelSpeed, - maxSteeringRotation, maxSteeringRotation );
  115. }
  116. // this.speed decay
  117. if ( ! ( controls.moveForward || controls.moveBackward ) ) {
  118. if ( this.speed > 0 ) {
  119. var k = exponentialEaseOut( this.speed / this.maxSpeed );
  120. this.speed = THREE.Math.clamp( this.speed - k * delta * deceleration * brakingDeceleration, 0, this.maxSpeed );
  121. acceleration = THREE.Math.clamp( acceleration - k * delta, 0, 1 );
  122. } else {
  123. var k = exponentialEaseOut( this.speed / maxSpeedReverse );
  124. this.speed = THREE.Math.clamp( this.speed + k * delta * accelerationReverse * brakingDeceleration, maxSpeedReverse, 0 );
  125. acceleration = THREE.Math.clamp( acceleration + k * delta, - 1, 0 );
  126. }
  127. }
  128. // steering decay
  129. if ( ! ( controls.moveLeft || controls.moveRight ) ) {
  130. if ( wheelOrientation > 0 ) {
  131. wheelOrientation = THREE.Math.clamp( wheelOrientation - delta * steeringWheelSpeed, 0, maxSteeringRotation );
  132. } else {
  133. wheelOrientation = THREE.Math.clamp( wheelOrientation + delta * steeringWheelSpeed, - maxSteeringRotation, 0 );
  134. }
  135. }
  136. var forwardDelta = - this.speed * delta;
  137. carOrientation -= ( forwardDelta * this.turningRadius * 0.02 ) * wheelOrientation;
  138. // movement of car
  139. root.position.x += Math.sin( carOrientation ) * forwardDelta * length;
  140. root.position.z += Math.cos( carOrientation ) * forwardDelta * length;
  141. // angle of car
  142. root.rotation.y = carOrientation;
  143. // wheels rolling
  144. var angularSpeedRatio = - 2 / wheelDiameter;
  145. var wheelDelta = forwardDelta * angularSpeedRatio * length;
  146. frontLeftWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
  147. frontRightWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
  148. backLeftWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
  149. backRightWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
  150. // rotation while steering
  151. frontLeftWheelRoot.rotation[ this.wheelTurnAxis ] = wheelOrientation;
  152. frontRightWheelRoot.rotation[ this.wheelTurnAxis ] = wheelOrientation;
  153. steeringWheel.rotation[ this.steeringWheelTurnAxis ] = -wheelOrientation * 6;
  154. },
  155. setModel: function ( model, elemNames ) {
  156. if ( elemNames ) this.elemNames = elemNames;
  157. root = model;
  158. this.setupWheels();
  159. this.computeDimensions();
  160. loaded = true;
  161. },
  162. setupWheels: function () {
  163. frontLeftWheelRoot = root.getObjectByName( this.elemNames.flWheel );
  164. frontRightWheelRoot = root.getObjectByName( this.elemNames.frWheel );
  165. backLeftWheel = root.getObjectByName( this.elemNames.rlWheel );
  166. backRightWheel = root.getObjectByName( this.elemNames.rrWheel );
  167. if ( this.elemNames.steeringWheel !== null ) steeringWheel = root.getObjectByName( this.elemNames.steeringWheel );
  168. while ( frontLeftWheelRoot.children.length > 0 ) frontLeftWheel.add( frontLeftWheelRoot.children[ 0 ] );
  169. while ( frontRightWheelRoot.children.length > 0 ) frontRightWheel.add( frontRightWheelRoot.children[ 0 ] );
  170. frontLeftWheelRoot.add( frontLeftWheel );
  171. frontRightWheelRoot.add( frontRightWheel );
  172. },
  173. computeDimensions: function () {
  174. var bb = new THREE.Box3().setFromObject( frontLeftWheelRoot );
  175. var size = new THREE.Vector3();
  176. bb.getSize( size );
  177. wheelDiameter = Math.max( size.x, size.y, size.z );
  178. bb.setFromObject( root );
  179. size = bb.getSize( size );
  180. length = Math.max( size.x, size.y, size.z );
  181. }
  182. };
  183. function exponentialEaseOut( k ) {
  184. return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
  185. }
  186. return Car;
  187. } )();