Car.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. */
  4. THREE.Car = function () {
  5. var scope = this;
  6. // car geometry manual parameters
  7. this.modelScale = 1;
  8. this.backWheelOffset = 2;
  9. this.autoWheelGeometry = true;
  10. // car geometry parameters automatically set from wheel mesh
  11. // - assumes wheel mesh is front left wheel in proper global
  12. // position with respect to body mesh
  13. // - other wheels are mirrored against car root
  14. // - if necessary back wheels can be offset manually
  15. this.wheelOffset = new THREE.Vector3();
  16. this.wheelDiameter = 1;
  17. // car "feel" parameters
  18. this.MAX_SPEED = 2200;
  19. this.MAX_REVERSE_SPEED = - 1500;
  20. this.MAX_WHEEL_ROTATION = 0.6;
  21. this.FRONT_ACCELERATION = 1250;
  22. this.BACK_ACCELERATION = 1500;
  23. this.WHEEL_ANGULAR_ACCELERATION = 1.5;
  24. this.FRONT_DECCELERATION = 750;
  25. this.WHEEL_ANGULAR_DECCELERATION = 1.0;
  26. this.STEERING_RADIUS_RATIO = 0.0023;
  27. this.MAX_TILT_SIDES = 0.05;
  28. this.MAX_TILT_FRONTBACK = 0.015;
  29. // internal control variables
  30. this.speed = 0;
  31. this.acceleration = 0;
  32. this.wheelOrientation = 0;
  33. this.carOrientation = 0;
  34. // car rigging
  35. this.root = new THREE.Object3D();
  36. this.frontLeftWheelRoot = new THREE.Object3D();
  37. this.frontRightWheelRoot = new THREE.Object3D();
  38. this.bodyMesh = null;
  39. this.frontLeftWheelMesh = null;
  40. this.frontRightWheelMesh = null;
  41. this.backLeftWheelMesh = null;
  42. this.backRightWheelMesh = null;
  43. this.bodyGeometry = null;
  44. this.wheelGeometry = null;
  45. this.bodyMaterials = null;
  46. this.wheelMaterials = null;
  47. // internal helper variables
  48. this.loaded = false;
  49. this.meshes = [];
  50. // API
  51. this.enableShadows = function ( enable ) {
  52. for ( var i = 0; i < this.meshes.length; i ++ ) {
  53. this.meshes[ i ].castShadow = enable;
  54. this.meshes[ i ].receiveShadow = enable;
  55. }
  56. };
  57. this.setVisible = function ( enable ) {
  58. for ( var i = 0; i < this.meshes.length; i ++ ) {
  59. this.meshes[ i ].visible = enable;
  60. this.meshes[ i ].visible = enable;
  61. }
  62. };
  63. this.loadPartsJSON = function ( bodyURL, wheelURL ) {
  64. var loader = new THREE.JSONLoader();
  65. loader.load( bodyURL, function( geometry, materials ) {
  66. createBody( geometry, materials )
  67. } );
  68. loader.load( wheelURL, function( geometry, materials ) {
  69. createWheels( geometry, materials )
  70. } );
  71. };
  72. this.loadPartsBinary = function ( bodyURL, wheelURL ) {
  73. var loader = new THREE.BinaryLoader();
  74. loader.load( bodyURL, function( geometry, materials ) {
  75. createBody( geometry, materials )
  76. } );
  77. loader.load( wheelURL, function( geometry, materials ) {
  78. createWheels( geometry, materials )
  79. } );
  80. };
  81. this.updateCarModel = function ( delta, controls ) {
  82. // speed and wheels based on controls
  83. if ( controls.moveForward ) {
  84. this.speed = THREE.Math.clamp( this.speed + delta * this.FRONT_ACCELERATION, this.MAX_REVERSE_SPEED, this.MAX_SPEED );
  85. this.acceleration = THREE.Math.clamp( this.acceleration + delta, - 1, 1 );
  86. }
  87. if ( controls.moveBackward ) {
  88. this.speed = THREE.Math.clamp( this.speed - delta * this.BACK_ACCELERATION, this.MAX_REVERSE_SPEED, this.MAX_SPEED );
  89. this.acceleration = THREE.Math.clamp( this.acceleration - delta, - 1, 1 );
  90. }
  91. if ( controls.moveLeft ) {
  92. this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation + delta * this.WHEEL_ANGULAR_ACCELERATION, - this.MAX_WHEEL_ROTATION, this.MAX_WHEEL_ROTATION );
  93. }
  94. if ( controls.moveRight ) {
  95. this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation - delta * this.WHEEL_ANGULAR_ACCELERATION, - this.MAX_WHEEL_ROTATION, this.MAX_WHEEL_ROTATION );
  96. }
  97. // speed decay
  98. if ( ! ( controls.moveForward || controls.moveBackward ) ) {
  99. if ( this.speed > 0 ) {
  100. var k = exponentialEaseOut( this.speed / this.MAX_SPEED );
  101. this.speed = THREE.Math.clamp( this.speed - k * delta * this.FRONT_DECCELERATION, 0, this.MAX_SPEED );
  102. this.acceleration = THREE.Math.clamp( this.acceleration - k * delta, 0, 1 );
  103. } else {
  104. var k = exponentialEaseOut( this.speed / this.MAX_REVERSE_SPEED );
  105. this.speed = THREE.Math.clamp( this.speed + k * delta * this.BACK_ACCELERATION, this.MAX_REVERSE_SPEED, 0 );
  106. this.acceleration = THREE.Math.clamp( this.acceleration + k * delta, - 1, 0 );
  107. }
  108. }
  109. // steering decay
  110. if ( ! ( controls.moveLeft || controls.moveRight ) ) {
  111. if ( this.wheelOrientation > 0 ) {
  112. this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation - delta * this.WHEEL_ANGULAR_DECCELERATION, 0, this.MAX_WHEEL_ROTATION );
  113. } else {
  114. this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation + delta * this.WHEEL_ANGULAR_DECCELERATION, - this.MAX_WHEEL_ROTATION, 0 );
  115. }
  116. }
  117. // car update
  118. var forwardDelta = this.speed * delta;
  119. this.carOrientation += ( forwardDelta * this.STEERING_RADIUS_RATIO ) * this.wheelOrientation;
  120. // displacement
  121. this.root.position.x += Math.sin( this.carOrientation ) * forwardDelta;
  122. this.root.position.z += Math.cos( this.carOrientation ) * forwardDelta;
  123. // steering
  124. this.root.rotation.y = this.carOrientation;
  125. // tilt
  126. if ( this.loaded ) {
  127. this.bodyMesh.rotation.z = this.MAX_TILT_SIDES * this.wheelOrientation * ( this.speed / this.MAX_SPEED );
  128. this.bodyMesh.rotation.x = - this.MAX_TILT_FRONTBACK * this.acceleration;
  129. }
  130. // wheels rolling
  131. var angularSpeedRatio = 1 / ( this.modelScale * ( this.wheelDiameter / 2 ) );
  132. var wheelDelta = forwardDelta * angularSpeedRatio;
  133. if ( this.loaded ) {
  134. this.frontLeftWheelMesh.rotation.x += wheelDelta;
  135. this.frontRightWheelMesh.rotation.x += wheelDelta;
  136. this.backLeftWheelMesh.rotation.x += wheelDelta;
  137. this.backRightWheelMesh.rotation.x += wheelDelta;
  138. }
  139. // front wheels steering
  140. this.frontLeftWheelRoot.rotation.y = this.wheelOrientation;
  141. this.frontRightWheelRoot.rotation.y = this.wheelOrientation;
  142. };
  143. // internal helper methods
  144. function createBody ( geometry, materials ) {
  145. scope.bodyGeometry = geometry;
  146. scope.bodyMaterials = materials;
  147. createCar();
  148. }
  149. function createWheels ( geometry, materials ) {
  150. scope.wheelGeometry = geometry;
  151. scope.wheelMaterials = materials;
  152. createCar();
  153. }
  154. function createCar () {
  155. if ( scope.bodyGeometry && scope.wheelGeometry ) {
  156. // compute wheel geometry parameters
  157. if ( scope.autoWheelGeometry ) {
  158. scope.wheelGeometry.computeBoundingBox();
  159. var bb = scope.wheelGeometry.boundingBox;
  160. scope.wheelOffset.addVectors( bb.min, bb.max );
  161. scope.wheelOffset.multiplyScalar( 0.5 );
  162. scope.wheelDiameter = bb.max.y - bb.min.y;
  163. scope.wheelGeometry.center();
  164. }
  165. // rig the car
  166. var s = scope.modelScale,
  167. delta = new THREE.Vector3();
  168. var bodyFaceMaterial = new THREE.MultiMaterial( scope.bodyMaterials );
  169. var wheelFaceMaterial = new THREE.MultiMaterial( scope.wheelMaterials );
  170. // body
  171. scope.bodyMesh = new THREE.Mesh( scope.bodyGeometry, bodyFaceMaterial );
  172. scope.bodyMesh.scale.set( s, s, s );
  173. scope.root.add( scope.bodyMesh );
  174. // front left wheel
  175. delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( s, s, s ) );
  176. scope.frontLeftWheelRoot.position.add( delta );
  177. scope.frontLeftWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
  178. scope.frontLeftWheelMesh.scale.set( s, s, s );
  179. scope.frontLeftWheelRoot.add( scope.frontLeftWheelMesh );
  180. scope.root.add( scope.frontLeftWheelRoot );
  181. // front right wheel
  182. delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( - s, s, s ) );
  183. scope.frontRightWheelRoot.position.add( delta );
  184. scope.frontRightWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
  185. scope.frontRightWheelMesh.scale.set( s, s, s );
  186. scope.frontRightWheelMesh.rotation.z = Math.PI;
  187. scope.frontRightWheelRoot.add( scope.frontRightWheelMesh );
  188. scope.root.add( scope.frontRightWheelRoot );
  189. // back left wheel
  190. delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( s, s, - s ) );
  191. delta.z -= scope.backWheelOffset;
  192. scope.backLeftWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
  193. scope.backLeftWheelMesh.position.add( delta );
  194. scope.backLeftWheelMesh.scale.set( s, s, s );
  195. scope.root.add( scope.backLeftWheelMesh );
  196. // back right wheel
  197. delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( - s, s, - s ) );
  198. delta.z -= scope.backWheelOffset;
  199. scope.backRightWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
  200. scope.backRightWheelMesh.position.add( delta );
  201. scope.backRightWheelMesh.scale.set( s, s, s );
  202. scope.backRightWheelMesh.rotation.z = Math.PI;
  203. scope.root.add( scope.backRightWheelMesh );
  204. // cache meshes
  205. scope.meshes = [ scope.bodyMesh, scope.frontLeftWheelMesh, scope.frontRightWheelMesh, scope.backLeftWheelMesh, scope.backRightWheelMesh ];
  206. // callback
  207. scope.loaded = true;
  208. if ( scope.callback ) {
  209. scope.callback( scope );
  210. }
  211. }
  212. }
  213. function quadraticEaseOut( k ) {
  214. return - k * ( k - 2 );
  215. }
  216. function cubicEaseOut( k ) {
  217. return -- k * k * k + 1;
  218. }
  219. function circularEaseOut( k ) {
  220. return Math.sqrt( 1 - -- k * k );
  221. }
  222. function sinusoidalEaseOut( k ) {
  223. return Math.sin( k * Math.PI / 2 );
  224. }
  225. function exponentialEaseOut( k ) {
  226. return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
  227. }
  228. };