RollerCoaster.js 15 KB

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