RollerCoaster.js 15 KB

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