RollerCoaster.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. import {
  2. BufferAttribute,
  3. BufferGeometry,
  4. Color,
  5. Quaternion,
  6. Raycaster,
  7. SRGBColorSpace,
  8. Vector3
  9. } from 'three';
  10. class RollerCoasterGeometry extends BufferGeometry {
  11. constructor( curve, divisions ) {
  12. super();
  13. const vertices = [];
  14. const normals = [];
  15. const colors = [];
  16. const color1 = [ 1, 1, 1 ];
  17. const color2 = [ 1, 1, 0 ];
  18. const up = new Vector3( 0, 1, 0 );
  19. const forward = new Vector3();
  20. const right = new Vector3();
  21. const quaternion = new Quaternion();
  22. const prevQuaternion = new Quaternion();
  23. prevQuaternion.setFromAxisAngle( up, Math.PI / 2 );
  24. const point = new Vector3();
  25. const prevPoint = new Vector3();
  26. prevPoint.copy( curve.getPointAt( 0 ) );
  27. // shapes
  28. const step = [
  29. new Vector3( - 0.225, 0, 0 ),
  30. new Vector3( 0, - 0.050, 0 ),
  31. new Vector3( 0, - 0.175, 0 ),
  32. new Vector3( 0, - 0.050, 0 ),
  33. new Vector3( 0.225, 0, 0 ),
  34. new Vector3( 0, - 0.175, 0 )
  35. ];
  36. const PI2 = Math.PI * 2;
  37. let sides = 5;
  38. const tube1 = [];
  39. for ( let i = 0; i < sides; i ++ ) {
  40. const angle = ( i / sides ) * PI2;
  41. tube1.push( new Vector3( Math.sin( angle ) * 0.06, Math.cos( angle ) * 0.06, 0 ) );
  42. }
  43. sides = 6;
  44. const tube2 = [];
  45. for ( let i = 0; i < sides; i ++ ) {
  46. const angle = ( i / sides ) * PI2;
  47. tube2.push( new Vector3( Math.sin( angle ) * 0.025, Math.cos( angle ) * 0.025, 0 ) );
  48. }
  49. const vector = new Vector3();
  50. const normal = new Vector3();
  51. function drawShape( shape, color ) {
  52. normal.set( 0, 0, - 1 ).applyQuaternion( quaternion );
  53. for ( let j = 0; j < shape.length; j ++ ) {
  54. vector.copy( shape[ j ] );
  55. vector.applyQuaternion( quaternion );
  56. vector.add( point );
  57. vertices.push( vector.x, vector.y, vector.z );
  58. normals.push( normal.x, normal.y, normal.z );
  59. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  60. }
  61. normal.set( 0, 0, 1 ).applyQuaternion( quaternion );
  62. for ( let j = shape.length - 1; j >= 0; j -- ) {
  63. vector.copy( shape[ j ] );
  64. vector.applyQuaternion( quaternion );
  65. vector.add( point );
  66. vertices.push( vector.x, vector.y, vector.z );
  67. normals.push( normal.x, normal.y, normal.z );
  68. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  69. }
  70. }
  71. const vector1 = new Vector3();
  72. const vector2 = new Vector3();
  73. const vector3 = new Vector3();
  74. const vector4 = new Vector3();
  75. const normal1 = new Vector3();
  76. const normal2 = new Vector3();
  77. const normal3 = new Vector3();
  78. const normal4 = new Vector3();
  79. function extrudeShape( shape, offset, color ) {
  80. for ( let j = 0, jl = shape.length; j < jl; j ++ ) {
  81. const point1 = shape[ j ];
  82. const point2 = shape[ ( j + 1 ) % jl ];
  83. vector1.copy( point1 ).add( offset );
  84. vector1.applyQuaternion( quaternion );
  85. vector1.add( point );
  86. vector2.copy( point2 ).add( offset );
  87. vector2.applyQuaternion( quaternion );
  88. vector2.add( point );
  89. vector3.copy( point2 ).add( offset );
  90. vector3.applyQuaternion( prevQuaternion );
  91. vector3.add( prevPoint );
  92. vector4.copy( point1 ).add( offset );
  93. vector4.applyQuaternion( prevQuaternion );
  94. vector4.add( prevPoint );
  95. vertices.push( vector1.x, vector1.y, vector1.z );
  96. vertices.push( vector2.x, vector2.y, vector2.z );
  97. vertices.push( vector4.x, vector4.y, vector4.z );
  98. vertices.push( vector2.x, vector2.y, vector2.z );
  99. vertices.push( vector3.x, vector3.y, vector3.z );
  100. vertices.push( vector4.x, vector4.y, vector4.z );
  101. //
  102. normal1.copy( point1 );
  103. normal1.applyQuaternion( quaternion );
  104. normal1.normalize();
  105. normal2.copy( point2 );
  106. normal2.applyQuaternion( quaternion );
  107. normal2.normalize();
  108. normal3.copy( point2 );
  109. normal3.applyQuaternion( prevQuaternion );
  110. normal3.normalize();
  111. normal4.copy( point1 );
  112. normal4.applyQuaternion( prevQuaternion );
  113. normal4.normalize();
  114. normals.push( normal1.x, normal1.y, normal1.z );
  115. normals.push( normal2.x, normal2.y, normal2.z );
  116. normals.push( normal4.x, normal4.y, normal4.z );
  117. normals.push( normal2.x, normal2.y, normal2.z );
  118. normals.push( normal3.x, normal3.y, normal3.z );
  119. normals.push( normal4.x, normal4.y, normal4.z );
  120. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  121. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  122. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  123. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  124. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  125. colors.push( color[ 0 ], color[ 1 ], color[ 2 ] );
  126. }
  127. }
  128. const offset = new Vector3();
  129. for ( let i = 1; i <= divisions; i ++ ) {
  130. point.copy( curve.getPointAt( i / divisions ) );
  131. up.set( 0, 1, 0 );
  132. forward.subVectors( point, prevPoint ).normalize();
  133. right.crossVectors( up, forward ).normalize();
  134. up.crossVectors( forward, right );
  135. const angle = Math.atan2( forward.x, forward.z );
  136. quaternion.setFromAxisAngle( up, angle );
  137. if ( i % 2 === 0 ) {
  138. drawShape( step, color2 );
  139. }
  140. extrudeShape( tube1, offset.set( 0, - 0.125, 0 ), color2 );
  141. extrudeShape( tube2, offset.set( 0.2, 0, 0 ), color1 );
  142. extrudeShape( tube2, offset.set( - 0.2, 0, 0 ), color1 );
  143. prevPoint.copy( point );
  144. prevQuaternion.copy( quaternion );
  145. }
  146. // console.log( vertices.length );
  147. this.setAttribute( 'position', new BufferAttribute( new Float32Array( vertices ), 3 ) );
  148. this.setAttribute( 'normal', new BufferAttribute( new Float32Array( normals ), 3 ) );
  149. this.setAttribute( 'color', new BufferAttribute( new Float32Array( colors ), 3 ) );
  150. }
  151. }
  152. class RollerCoasterLiftersGeometry extends BufferGeometry {
  153. constructor( curve, divisions ) {
  154. super();
  155. const vertices = [];
  156. const normals = [];
  157. const quaternion = new Quaternion();
  158. const up = new Vector3( 0, 1, 0 );
  159. const point = new Vector3();
  160. const tangent = new Vector3();
  161. // shapes
  162. const tube1 = [
  163. new Vector3( 0, 0.05, - 0.05 ),
  164. new Vector3( 0, 0.05, 0.05 ),
  165. new Vector3( 0, - 0.05, 0 )
  166. ];
  167. const tube2 = [
  168. new Vector3( - 0.05, 0, 0.05 ),
  169. new Vector3( - 0.05, 0, - 0.05 ),
  170. new Vector3( 0.05, 0, 0 )
  171. ];
  172. const tube3 = [
  173. new Vector3( 0.05, 0, - 0.05 ),
  174. new Vector3( 0.05, 0, 0.05 ),
  175. new Vector3( - 0.05, 0, 0 )
  176. ];
  177. const vector1 = new Vector3();
  178. const vector2 = new Vector3();
  179. const vector3 = new Vector3();
  180. const vector4 = new Vector3();
  181. const normal1 = new Vector3();
  182. const normal2 = new Vector3();
  183. const normal3 = new Vector3();
  184. const normal4 = new Vector3();
  185. function extrudeShape( shape, fromPoint, toPoint ) {
  186. for ( let j = 0, jl = shape.length; j < jl; j ++ ) {
  187. const point1 = shape[ j ];
  188. const point2 = shape[ ( j + 1 ) % jl ];
  189. vector1.copy( point1 );
  190. vector1.applyQuaternion( quaternion );
  191. vector1.add( fromPoint );
  192. vector2.copy( point2 );
  193. vector2.applyQuaternion( quaternion );
  194. vector2.add( fromPoint );
  195. vector3.copy( point2 );
  196. vector3.applyQuaternion( quaternion );
  197. vector3.add( toPoint );
  198. vector4.copy( point1 );
  199. vector4.applyQuaternion( quaternion );
  200. vector4.add( toPoint );
  201. vertices.push( vector1.x, vector1.y, vector1.z );
  202. vertices.push( vector2.x, vector2.y, vector2.z );
  203. vertices.push( vector4.x, vector4.y, vector4.z );
  204. vertices.push( vector2.x, vector2.y, vector2.z );
  205. vertices.push( vector3.x, vector3.y, vector3.z );
  206. vertices.push( vector4.x, vector4.y, vector4.z );
  207. //
  208. normal1.copy( point1 );
  209. normal1.applyQuaternion( quaternion );
  210. normal1.normalize();
  211. normal2.copy( point2 );
  212. normal2.applyQuaternion( quaternion );
  213. normal2.normalize();
  214. normal3.copy( point2 );
  215. normal3.applyQuaternion( quaternion );
  216. normal3.normalize();
  217. normal4.copy( point1 );
  218. normal4.applyQuaternion( quaternion );
  219. normal4.normalize();
  220. normals.push( normal1.x, normal1.y, normal1.z );
  221. normals.push( normal2.x, normal2.y, normal2.z );
  222. normals.push( normal4.x, normal4.y, normal4.z );
  223. normals.push( normal2.x, normal2.y, normal2.z );
  224. normals.push( normal3.x, normal3.y, normal3.z );
  225. normals.push( normal4.x, normal4.y, normal4.z );
  226. }
  227. }
  228. const fromPoint = new Vector3();
  229. const toPoint = new Vector3();
  230. for ( let i = 1; i <= divisions; i ++ ) {
  231. point.copy( curve.getPointAt( i / divisions ) );
  232. tangent.copy( curve.getTangentAt( i / divisions ) );
  233. const angle = Math.atan2( tangent.x, tangent.z );
  234. quaternion.setFromAxisAngle( up, angle );
  235. //
  236. if ( point.y > 10 ) {
  237. fromPoint.set( - 0.75, - 0.35, 0 );
  238. fromPoint.applyQuaternion( quaternion );
  239. fromPoint.add( point );
  240. toPoint.set( 0.75, - 0.35, 0 );
  241. toPoint.applyQuaternion( quaternion );
  242. toPoint.add( point );
  243. extrudeShape( tube1, fromPoint, toPoint );
  244. fromPoint.set( - 0.7, - 0.3, 0 );
  245. fromPoint.applyQuaternion( quaternion );
  246. fromPoint.add( point );
  247. toPoint.set( - 0.7, - point.y, 0 );
  248. toPoint.applyQuaternion( quaternion );
  249. toPoint.add( point );
  250. extrudeShape( tube2, fromPoint, toPoint );
  251. fromPoint.set( 0.7, - 0.3, 0 );
  252. fromPoint.applyQuaternion( quaternion );
  253. fromPoint.add( point );
  254. toPoint.set( 0.7, - point.y, 0 );
  255. toPoint.applyQuaternion( quaternion );
  256. toPoint.add( point );
  257. extrudeShape( tube3, fromPoint, toPoint );
  258. } else {
  259. fromPoint.set( 0, - 0.2, 0 );
  260. fromPoint.applyQuaternion( quaternion );
  261. fromPoint.add( point );
  262. toPoint.set( 0, - point.y, 0 );
  263. toPoint.applyQuaternion( quaternion );
  264. toPoint.add( point );
  265. extrudeShape( tube3, fromPoint, toPoint );
  266. }
  267. }
  268. this.setAttribute( 'position', new BufferAttribute( new Float32Array( vertices ), 3 ) );
  269. this.setAttribute( 'normal', new BufferAttribute( new Float32Array( normals ), 3 ) );
  270. }
  271. }
  272. class RollerCoasterShadowGeometry extends BufferGeometry {
  273. constructor( curve, divisions ) {
  274. super();
  275. const vertices = [];
  276. const up = new Vector3( 0, 1, 0 );
  277. const forward = new Vector3();
  278. const quaternion = new Quaternion();
  279. const prevQuaternion = new Quaternion();
  280. prevQuaternion.setFromAxisAngle( up, Math.PI / 2 );
  281. const point = new Vector3();
  282. const prevPoint = new Vector3();
  283. prevPoint.copy( curve.getPointAt( 0 ) );
  284. prevPoint.y = 0;
  285. const vector1 = new Vector3();
  286. const vector2 = new Vector3();
  287. const vector3 = new Vector3();
  288. const vector4 = new Vector3();
  289. for ( let i = 1; i <= divisions; i ++ ) {
  290. point.copy( curve.getPointAt( i / divisions ) );
  291. point.y = 0;
  292. forward.subVectors( point, prevPoint );
  293. const angle = Math.atan2( forward.x, forward.z );
  294. quaternion.setFromAxisAngle( up, angle );
  295. vector1.set( - 0.3, 0, 0 );
  296. vector1.applyQuaternion( quaternion );
  297. vector1.add( point );
  298. vector2.set( 0.3, 0, 0 );
  299. vector2.applyQuaternion( quaternion );
  300. vector2.add( point );
  301. vector3.set( 0.3, 0, 0 );
  302. vector3.applyQuaternion( prevQuaternion );
  303. vector3.add( prevPoint );
  304. vector4.set( - 0.3, 0, 0 );
  305. vector4.applyQuaternion( prevQuaternion );
  306. vector4.add( prevPoint );
  307. vertices.push( vector1.x, vector1.y, vector1.z );
  308. vertices.push( vector2.x, vector2.y, vector2.z );
  309. vertices.push( vector4.x, vector4.y, vector4.z );
  310. vertices.push( vector2.x, vector2.y, vector2.z );
  311. vertices.push( vector3.x, vector3.y, vector3.z );
  312. vertices.push( vector4.x, vector4.y, vector4.z );
  313. prevPoint.copy( point );
  314. prevQuaternion.copy( quaternion );
  315. }
  316. this.setAttribute( 'position', new BufferAttribute( new Float32Array( vertices ), 3 ) );
  317. }
  318. }
  319. class SkyGeometry extends BufferGeometry {
  320. constructor() {
  321. super();
  322. const vertices = [];
  323. for ( let i = 0; i < 100; i ++ ) {
  324. const x = Math.random() * 800 - 400;
  325. const y = Math.random() * 50 + 50;
  326. const z = Math.random() * 800 - 400;
  327. const size = Math.random() * 40 + 20;
  328. vertices.push( x - size, y, z - size );
  329. vertices.push( x + size, y, z - size );
  330. vertices.push( x - size, y, z + size );
  331. vertices.push( x + size, y, z - size );
  332. vertices.push( x + size, y, z + size );
  333. vertices.push( x - size, y, z + size );
  334. }
  335. this.setAttribute( 'position', new BufferAttribute( new Float32Array( vertices ), 3 ) );
  336. }
  337. }
  338. class TreesGeometry extends BufferGeometry {
  339. constructor( landscape ) {
  340. super();
  341. const vertices = [];
  342. const colors = [];
  343. const raycaster = new Raycaster();
  344. raycaster.ray.direction.set( 0, - 1, 0 );
  345. const _color = new Color();
  346. for ( let i = 0; i < 2000; i ++ ) {
  347. const x = Math.random() * 500 - 250;
  348. const z = Math.random() * 500 - 250;
  349. raycaster.ray.origin.set( x, 50, z );
  350. const intersections = raycaster.intersectObject( landscape );
  351. if ( intersections.length === 0 ) continue;
  352. const y = intersections[ 0 ].point.y;
  353. const height = Math.random() * 5 + 0.5;
  354. let angle = Math.random() * Math.PI * 2;
  355. vertices.push( x + Math.sin( angle ), y, z + Math.cos( angle ) );
  356. vertices.push( x, y + height, z );
  357. vertices.push( x + Math.sin( angle + Math.PI ), y, z + Math.cos( angle + Math.PI ) );
  358. angle += Math.PI / 2;
  359. vertices.push( x + Math.sin( angle ), y, z + Math.cos( angle ) );
  360. vertices.push( x, y + height, z );
  361. vertices.push( x + Math.sin( angle + Math.PI ), y, z + Math.cos( angle + Math.PI ) );
  362. const random = Math.random() * 0.1;
  363. for ( let j = 0; j < 6; j ++ ) {
  364. _color.setRGB( 0.2 + random, 0.4 + random, 0, SRGBColorSpace );
  365. colors.push( _color.r, _color.g, _color.b );
  366. }
  367. }
  368. this.setAttribute( 'position', new BufferAttribute( new Float32Array( vertices ), 3 ) );
  369. this.setAttribute( 'color', new BufferAttribute( new Float32Array( colors ), 3 ) );
  370. }
  371. }
  372. export { RollerCoasterGeometry, RollerCoasterLiftersGeometry, RollerCoasterShadowGeometry, SkyGeometry, TreesGeometry };