geometry.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374
  1. /**
  2. * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
  3. */
  4. var twoPi = Math.PI * 2;
  5. function updateGroupGeometry( mesh, geometry ) {
  6. if ( geometry.isGeometry ) {
  7. geometry = new THREE.BufferGeometry().fromGeometry( geometry );
  8. console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );
  9. }
  10. mesh.children[ 0 ].geometry.dispose();
  11. mesh.children[ 1 ].geometry.dispose();
  12. mesh.children[ 0 ].geometry = new THREE.WireframeGeometry( geometry );
  13. mesh.children[ 1 ].geometry = geometry;
  14. // these do not update nicely together if shared
  15. }
  16. function CustomSinCurve( scale ) {
  17. THREE.Curve.call( this );
  18. this.scale = ( scale === undefined ) ? 1 : scale;
  19. }
  20. CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
  21. CustomSinCurve.prototype.constructor = CustomSinCurve;
  22. CustomSinCurve.prototype.getPoint = function ( t ) {
  23. var tx = t * 3 - 1.5;
  24. var ty = Math.sin( 2 * Math.PI * t );
  25. var tz = 0;
  26. return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
  27. };
  28. // heart shape
  29. var x = 0, y = 0;
  30. var heartShape = new THREE.Shape();
  31. heartShape.moveTo( x + 5, y + 5 );
  32. heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
  33. heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
  34. heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
  35. heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
  36. heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
  37. heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
  38. var guis = {
  39. BoxBufferGeometry: function ( mesh ) {
  40. var data = {
  41. width: 15,
  42. height: 15,
  43. depth: 15,
  44. widthSegments: 1,
  45. heightSegments: 1,
  46. depthSegments: 1
  47. };
  48. function generateGeometry() {
  49. updateGroupGeometry( mesh,
  50. new THREE.BoxBufferGeometry(
  51. data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
  52. )
  53. );
  54. }
  55. var folder = gui.addFolder( 'THREE.BoxBufferGeometry' );
  56. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  57. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  58. folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
  59. folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  60. folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  61. folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  62. generateGeometry();
  63. },
  64. BoxGeometry: function ( mesh ) {
  65. var data = {
  66. width: 15,
  67. height: 15,
  68. depth: 15,
  69. widthSegments: 1,
  70. heightSegments: 1,
  71. depthSegments: 1
  72. };
  73. function generateGeometry() {
  74. updateGroupGeometry( mesh,
  75. new THREE.BoxGeometry(
  76. data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
  77. )
  78. );
  79. }
  80. var folder = gui.addFolder( 'THREE.BoxGeometry' );
  81. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  82. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  83. folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
  84. folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  85. folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  86. folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
  87. generateGeometry();
  88. },
  89. CylinderBufferGeometry: function ( mesh ) {
  90. var data = {
  91. radiusTop: 5,
  92. radiusBottom: 5,
  93. height: 10,
  94. radialSegments: 8,
  95. heightSegments: 1,
  96. openEnded: false,
  97. thetaStart: 0,
  98. thetaLength: twoPi
  99. };
  100. function generateGeometry() {
  101. updateGroupGeometry( mesh,
  102. new THREE.CylinderBufferGeometry(
  103. data.radiusTop,
  104. data.radiusBottom,
  105. data.height,
  106. data.radialSegments,
  107. data.heightSegments,
  108. data.openEnded,
  109. data.thetaStart,
  110. data.thetaLength
  111. )
  112. );
  113. }
  114. var folder = gui.addFolder( 'THREE.CylinderBufferGeometry' );
  115. folder.add( data, 'radiusTop', 0, 30 ).onChange( generateGeometry );
  116. folder.add( data, 'radiusBottom', 0, 30 ).onChange( generateGeometry );
  117. folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  118. folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  119. folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  120. folder.add( data, 'openEnded' ).onChange( generateGeometry );
  121. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  122. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  123. generateGeometry();
  124. },
  125. CylinderGeometry: function ( mesh ) {
  126. var data = {
  127. radiusTop: 5,
  128. radiusBottom: 5,
  129. height: 10,
  130. radialSegments: 8,
  131. heightSegments: 1,
  132. openEnded: false,
  133. thetaStart: 0,
  134. thetaLength: twoPi
  135. };
  136. function generateGeometry() {
  137. updateGroupGeometry( mesh,
  138. new THREE.CylinderGeometry(
  139. data.radiusTop,
  140. data.radiusBottom,
  141. data.height,
  142. data.radialSegments,
  143. data.heightSegments,
  144. data.openEnded,
  145. data.thetaStart,
  146. data.thetaLength
  147. )
  148. );
  149. }
  150. var folder = gui.addFolder( 'THREE.CylinderGeometry' );
  151. folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
  152. folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
  153. folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  154. folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  155. folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  156. folder.add( data, 'openEnded' ).onChange( generateGeometry );
  157. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  158. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  159. generateGeometry();
  160. },
  161. ConeBufferGeometry: function ( mesh ) {
  162. var data = {
  163. radius: 5,
  164. height: 10,
  165. radialSegments: 8,
  166. heightSegments: 1,
  167. openEnded: false,
  168. thetaStart: 0,
  169. thetaLength: twoPi
  170. };
  171. function generateGeometry() {
  172. updateGroupGeometry( mesh,
  173. new THREE.ConeBufferGeometry(
  174. data.radius,
  175. data.height,
  176. data.radialSegments,
  177. data.heightSegments,
  178. data.openEnded,
  179. data.thetaStart,
  180. data.thetaLength
  181. )
  182. );
  183. }
  184. var folder = gui.addFolder( 'THREE.ConeBufferGeometry' );
  185. folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
  186. folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  187. folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  188. folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  189. folder.add( data, 'openEnded' ).onChange( generateGeometry );
  190. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  191. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  192. generateGeometry();
  193. },
  194. ConeGeometry: function ( mesh ) {
  195. var data = {
  196. radius: 5,
  197. height: 10,
  198. radialSegments: 8,
  199. heightSegments: 1,
  200. openEnded: false,
  201. thetaStart: 0,
  202. thetaLength: twoPi
  203. };
  204. function generateGeometry() {
  205. updateGroupGeometry( mesh,
  206. new THREE.ConeGeometry(
  207. data.radius,
  208. data.height,
  209. data.radialSegments,
  210. data.heightSegments,
  211. data.openEnded,
  212. data.thetaStart,
  213. data.thetaLength
  214. )
  215. );
  216. }
  217. var folder = gui.addFolder( 'THREE.ConeGeometry' );
  218. folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
  219. folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
  220. folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
  221. folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
  222. folder.add( data, 'openEnded' ).onChange( generateGeometry );
  223. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  224. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  225. generateGeometry();
  226. },
  227. CircleBufferGeometry: function ( mesh ) {
  228. var data = {
  229. radius: 10,
  230. segments: 32,
  231. thetaStart: 0,
  232. thetaLength: twoPi
  233. };
  234. function generateGeometry() {
  235. updateGroupGeometry( mesh,
  236. new THREE.CircleBufferGeometry(
  237. data.radius, data.segments, data.thetaStart, data.thetaLength
  238. )
  239. );
  240. }
  241. var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );
  242. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  243. folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  244. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  245. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  246. generateGeometry();
  247. },
  248. CircleGeometry: function ( mesh ) {
  249. var data = {
  250. radius: 10,
  251. segments: 32,
  252. thetaStart: 0,
  253. thetaLength: twoPi
  254. };
  255. function generateGeometry() {
  256. updateGroupGeometry( mesh,
  257. new THREE.CircleGeometry(
  258. data.radius, data.segments, data.thetaStart, data.thetaLength
  259. )
  260. );
  261. }
  262. var folder = gui.addFolder( 'THREE.CircleGeometry' );
  263. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  264. folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  265. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  266. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  267. generateGeometry();
  268. },
  269. DodecahedronGeometry: function ( mesh ) {
  270. var data = {
  271. radius: 10,
  272. detail: 0
  273. };
  274. function generateGeometry() {
  275. updateGroupGeometry( mesh,
  276. new THREE.DodecahedronGeometry(
  277. data.radius, data.detail
  278. )
  279. );
  280. }
  281. var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );
  282. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  283. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  284. generateGeometry();
  285. },
  286. DodecahedronBufferGeometry: function ( mesh ) {
  287. var data = {
  288. radius: 10,
  289. detail: 0
  290. };
  291. function generateGeometry() {
  292. updateGroupGeometry( mesh,
  293. new THREE.DodecahedronBufferGeometry(
  294. data.radius, data.detail
  295. )
  296. );
  297. }
  298. var folder = gui.addFolder( 'THREE.DodecahedronBufferGeometry' );
  299. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  300. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  301. generateGeometry();
  302. },
  303. IcosahedronGeometry: function ( mesh ) {
  304. var data = {
  305. radius: 10,
  306. detail: 0
  307. };
  308. function generateGeometry() {
  309. updateGroupGeometry( mesh,
  310. new THREE.IcosahedronGeometry(
  311. data.radius, data.detail
  312. )
  313. );
  314. }
  315. var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
  316. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  317. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  318. generateGeometry();
  319. },
  320. IcosahedronBufferGeometry: function ( mesh ) {
  321. var data = {
  322. radius: 10,
  323. detail: 0
  324. };
  325. function generateGeometry() {
  326. updateGroupGeometry( mesh,
  327. new THREE.IcosahedronBufferGeometry(
  328. data.radius, data.detail
  329. )
  330. );
  331. }
  332. var folder = gui.addFolder( 'THREE.IcosahedronBufferGeometry' );
  333. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  334. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  335. generateGeometry();
  336. },
  337. LatheBufferGeometry: function ( mesh ) {
  338. var points = [];
  339. for ( var i = 0; i < 10; i ++ ) {
  340. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  341. }
  342. var data = {
  343. segments: 12,
  344. phiStart: 0,
  345. phiLength: twoPi
  346. };
  347. function generateGeometry() {
  348. var geometry = new THREE.LatheBufferGeometry(
  349. points, data.segments, data.phiStart, data.phiLength
  350. );
  351. updateGroupGeometry( mesh, geometry );
  352. }
  353. var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );
  354. folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  355. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  356. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  357. generateGeometry();
  358. },
  359. LatheGeometry: function ( mesh ) {
  360. var points = [];
  361. for ( var i = 0; i < 10; i ++ ) {
  362. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  363. }
  364. var data = {
  365. segments: 12,
  366. phiStart: 0,
  367. phiLength: twoPi
  368. };
  369. function generateGeometry() {
  370. var geometry = new THREE.LatheGeometry(
  371. points, data.segments, data.phiStart, data.phiLength
  372. );
  373. updateGroupGeometry( mesh, geometry );
  374. }
  375. var folder = gui.addFolder( 'THREE.LatheGeometry' );
  376. folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  377. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  378. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  379. generateGeometry();
  380. },
  381. OctahedronGeometry: function ( mesh ) {
  382. var data = {
  383. radius: 10,
  384. detail: 0
  385. };
  386. function generateGeometry() {
  387. updateGroupGeometry( mesh,
  388. new THREE.OctahedronGeometry(
  389. data.radius, data.detail
  390. )
  391. );
  392. }
  393. var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
  394. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  395. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  396. generateGeometry();
  397. },
  398. OctahedronBufferGeometry: function ( mesh ) {
  399. var data = {
  400. radius: 10,
  401. detail: 0
  402. };
  403. function generateGeometry() {
  404. updateGroupGeometry( mesh,
  405. new THREE.OctahedronBufferGeometry(
  406. data.radius, data.detail
  407. )
  408. );
  409. }
  410. var folder = gui.addFolder( 'THREE.OctahedronBufferGeometry' );
  411. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  412. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  413. generateGeometry();
  414. },
  415. PlaneBufferGeometry: function ( mesh ) {
  416. var data = {
  417. width: 10,
  418. height: 10,
  419. widthSegments: 1,
  420. heightSegments: 1
  421. };
  422. function generateGeometry() {
  423. updateGroupGeometry( mesh,
  424. new THREE.PlaneBufferGeometry(
  425. data.width, data.height, data.widthSegments, data.heightSegments
  426. )
  427. );
  428. }
  429. var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
  430. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  431. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  432. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  433. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  434. generateGeometry();
  435. },
  436. PlaneGeometry: function ( mesh ) {
  437. var data = {
  438. width: 10,
  439. height: 10,
  440. widthSegments: 1,
  441. heightSegments: 1
  442. };
  443. function generateGeometry() {
  444. updateGroupGeometry( mesh,
  445. new THREE.PlaneGeometry(
  446. data.width, data.height, data.widthSegments, data.heightSegments
  447. )
  448. );
  449. }
  450. var folder = gui.addFolder( 'THREE.PlaneGeometry' );
  451. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  452. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  453. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  454. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  455. generateGeometry();
  456. },
  457. RingBufferGeometry: function ( mesh ) {
  458. var data = {
  459. innerRadius: 5,
  460. outerRadius: 10,
  461. thetaSegments: 8,
  462. phiSegments: 8,
  463. thetaStart: 0,
  464. thetaLength: twoPi
  465. };
  466. function generateGeometry() {
  467. updateGroupGeometry( mesh,
  468. new THREE.RingBufferGeometry(
  469. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  470. )
  471. );
  472. }
  473. var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
  474. folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
  475. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  476. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  477. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  478. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  479. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  480. generateGeometry();
  481. },
  482. RingGeometry: function ( mesh ) {
  483. var data = {
  484. innerRadius: 5,
  485. outerRadius: 10,
  486. thetaSegments: 8,
  487. phiSegments: 8,
  488. thetaStart: 0,
  489. thetaLength: twoPi
  490. };
  491. function generateGeometry() {
  492. updateGroupGeometry( mesh,
  493. new THREE.RingGeometry(
  494. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  495. )
  496. );
  497. }
  498. var folder = gui.addFolder( 'THREE.RingGeometry' );
  499. folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
  500. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  501. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  502. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  503. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  504. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  505. generateGeometry();
  506. },
  507. SphereBufferGeometry: function ( mesh ) {
  508. var data = {
  509. radius: 15,
  510. widthSegments: 8,
  511. heightSegments: 6,
  512. phiStart: 0,
  513. phiLength: twoPi,
  514. thetaStart: 0,
  515. thetaLength: Math.PI
  516. };
  517. function generateGeometry() {
  518. updateGroupGeometry( mesh,
  519. new THREE.SphereBufferGeometry(
  520. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  521. )
  522. );
  523. }
  524. var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
  525. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  526. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  527. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  528. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  529. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  530. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  531. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  532. generateGeometry();
  533. },
  534. SphereGeometry: function ( mesh ) {
  535. var data = {
  536. radius: 15,
  537. widthSegments: 8,
  538. heightSegments: 6,
  539. phiStart: 0,
  540. phiLength: twoPi,
  541. thetaStart: 0,
  542. thetaLength: Math.PI
  543. };
  544. function generateGeometry() {
  545. updateGroupGeometry( mesh,
  546. new THREE.SphereGeometry(
  547. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  548. )
  549. );
  550. }
  551. var folder = gui.addFolder( 'THREE.SphereGeometry' );
  552. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  553. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  554. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  555. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  556. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  557. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  558. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  559. generateGeometry();
  560. },
  561. TetrahedronGeometry: function ( mesh ) {
  562. var data = {
  563. radius: 10,
  564. detail: 0
  565. };
  566. function generateGeometry() {
  567. updateGroupGeometry( mesh,
  568. new THREE.TetrahedronGeometry(
  569. data.radius, data.detail
  570. )
  571. );
  572. }
  573. var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
  574. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  575. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  576. generateGeometry();
  577. },
  578. TetrahedronBufferGeometry: function ( mesh ) {
  579. var data = {
  580. radius: 10,
  581. detail: 0
  582. };
  583. function generateGeometry() {
  584. updateGroupGeometry( mesh,
  585. new THREE.TetrahedronBufferGeometry(
  586. data.radius, data.detail
  587. )
  588. );
  589. }
  590. var folder = gui.addFolder( 'THREE.TetrahedronBufferGeometry' );
  591. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  592. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  593. generateGeometry();
  594. },
  595. TextGeometry: function ( mesh ) {
  596. var data = {
  597. text: "TextGeometry",
  598. size: 5,
  599. height: 2,
  600. curveSegments: 12,
  601. font: "helvetiker",
  602. weight: "regular",
  603. bevelEnabled: false,
  604. bevelThickness: 1,
  605. bevelSize: 0.5,
  606. bevelSegments: 3
  607. };
  608. var fonts = [
  609. "helvetiker",
  610. "optimer",
  611. "gentilis",
  612. "droid/droid_serif"
  613. ];
  614. var weights = [
  615. "regular", "bold"
  616. ];
  617. function generateGeometry() {
  618. var loader = new THREE.FontLoader();
  619. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
  620. var geometry = new THREE.TextGeometry( data.text, {
  621. font: font,
  622. size: data.size,
  623. height: data.height,
  624. curveSegments: data.curveSegments,
  625. bevelEnabled: data.bevelEnabled,
  626. bevelThickness: data.bevelThickness,
  627. bevelSize: data.bevelSize,
  628. bevelSegments: data.bevelSegments
  629. } );
  630. geometry.center();
  631. updateGroupGeometry( mesh, geometry );
  632. } );
  633. }
  634. //Hide the wireframe
  635. mesh.children[ 0 ].visible = false;
  636. var folder = gui.addFolder( 'THREE.TextGeometry' );
  637. folder.add( data, 'text' ).onChange( generateGeometry );
  638. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  639. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  640. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  641. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  642. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  643. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  644. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  645. folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
  646. folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
  647. generateGeometry();
  648. },
  649. TextBufferGeometry: function ( mesh ) {
  650. var data = {
  651. text: "TextBufferGeometry",
  652. size: 5,
  653. height: 2,
  654. curveSegments: 12,
  655. font: "helvetiker",
  656. weight: "regular",
  657. bevelEnabled: false,
  658. bevelThickness: 1,
  659. bevelSize: 0.5,
  660. bevelSegments: 3
  661. };
  662. var fonts = [
  663. "helvetiker",
  664. "optimer",
  665. "gentilis",
  666. "droid/droid_serif"
  667. ];
  668. var weights = [
  669. "regular", "bold"
  670. ];
  671. function generateGeometry() {
  672. var loader = new THREE.FontLoader();
  673. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
  674. var geometry = new THREE.TextBufferGeometry( data.text, {
  675. font: font,
  676. size: data.size,
  677. height: data.height,
  678. curveSegments: data.curveSegments,
  679. bevelEnabled: data.bevelEnabled,
  680. bevelThickness: data.bevelThickness,
  681. bevelSize: data.bevelSize,
  682. bevelSegments: data.bevelSegments
  683. } );
  684. geometry.center();
  685. updateGroupGeometry( mesh, geometry );
  686. } );
  687. }
  688. //Hide the wireframe
  689. mesh.children[ 0 ].visible = false;
  690. var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
  691. folder.add( data, 'text' ).onChange( generateGeometry );
  692. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  693. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  694. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  695. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  696. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  697. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  698. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  699. folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
  700. folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
  701. generateGeometry();
  702. },
  703. TorusBufferGeometry: function ( mesh ) {
  704. var data = {
  705. radius: 10,
  706. tube: 3,
  707. radialSegments: 16,
  708. tubularSegments: 100,
  709. arc: twoPi
  710. };
  711. function generateGeometry() {
  712. updateGroupGeometry( mesh,
  713. new THREE.TorusBufferGeometry(
  714. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  715. )
  716. );
  717. }
  718. var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
  719. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  720. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  721. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  722. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  723. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  724. generateGeometry();
  725. },
  726. TorusGeometry: function ( mesh ) {
  727. var data = {
  728. radius: 10,
  729. tube: 3,
  730. radialSegments: 16,
  731. tubularSegments: 100,
  732. arc: twoPi
  733. };
  734. function generateGeometry() {
  735. updateGroupGeometry( mesh,
  736. new THREE.TorusGeometry(
  737. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  738. )
  739. );
  740. }
  741. var folder = gui.addFolder( 'THREE.TorusGeometry' );
  742. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  743. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  744. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  745. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  746. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  747. generateGeometry();
  748. },
  749. TorusKnotBufferGeometry: function ( mesh ) {
  750. var data = {
  751. radius: 10,
  752. tube: 3,
  753. tubularSegments: 64,
  754. radialSegments: 8,
  755. p: 2,
  756. q: 3
  757. };
  758. function generateGeometry() {
  759. updateGroupGeometry( mesh,
  760. new THREE.TorusKnotBufferGeometry(
  761. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  762. data.p, data.q
  763. )
  764. );
  765. }
  766. var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
  767. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  768. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  769. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  770. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  771. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  772. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  773. generateGeometry();
  774. },
  775. TorusKnotGeometry: function ( mesh ) {
  776. var data = {
  777. radius: 10,
  778. tube: 3,
  779. tubularSegments: 64,
  780. radialSegments: 8,
  781. p: 2,
  782. q: 3
  783. };
  784. function generateGeometry() {
  785. updateGroupGeometry( mesh,
  786. new THREE.TorusKnotGeometry(
  787. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  788. data.p, data.q
  789. )
  790. );
  791. }
  792. var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
  793. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  794. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  795. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  796. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  797. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  798. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  799. generateGeometry();
  800. },
  801. ParametricBufferGeometry: function ( mesh ) {
  802. var data = {
  803. slices: 25,
  804. stacks: 25
  805. };
  806. function generateGeometry() {
  807. updateGroupGeometry( mesh,
  808. new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
  809. );
  810. }
  811. var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
  812. folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
  813. folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
  814. generateGeometry();
  815. },
  816. ParametricGeometry: function ( mesh ) {
  817. var data = {
  818. slices: 25,
  819. stacks: 25
  820. };
  821. function generateGeometry() {
  822. updateGroupGeometry( mesh,
  823. new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
  824. );
  825. }
  826. var folder = gui.addFolder( 'THREE.ParametricGeometry' );
  827. folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
  828. folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
  829. generateGeometry();
  830. },
  831. TubeGeometry: function ( mesh ) {
  832. var data = {
  833. segments: 20,
  834. radius: 2,
  835. radialSegments: 8
  836. };
  837. var path = new CustomSinCurve( 10 );
  838. function generateGeometry() {
  839. updateGroupGeometry( mesh,
  840. new THREE.TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
  841. );
  842. }
  843. var folder = gui.addFolder( 'THREE.TubeGeometry' );
  844. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  845. folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
  846. folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  847. generateGeometry();
  848. },
  849. TubeBufferGeometry: function ( mesh ) {
  850. var data = {
  851. segments: 20,
  852. radius: 2,
  853. radialSegments: 8
  854. };
  855. var path = new CustomSinCurve( 10 );
  856. function generateGeometry() {
  857. updateGroupGeometry( mesh,
  858. new THREE.TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
  859. );
  860. }
  861. var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
  862. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  863. folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
  864. folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  865. generateGeometry();
  866. },
  867. ShapeGeometry: function ( mesh ) {
  868. var data = {
  869. segments: 12
  870. };
  871. function generateGeometry() {
  872. var geometry = new THREE.ShapeGeometry( heartShape, data.segments );
  873. geometry.center();
  874. updateGroupGeometry( mesh, geometry );
  875. }
  876. var folder = gui.addFolder( 'THREE.ShapeGeometry' );
  877. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  878. generateGeometry();
  879. },
  880. ShapeBufferGeometry: function ( mesh ) {
  881. var data = {
  882. segments: 12
  883. };
  884. function generateGeometry() {
  885. var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments );
  886. geometry.center();
  887. updateGroupGeometry( mesh, geometry );
  888. }
  889. var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
  890. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  891. generateGeometry();
  892. },
  893. ExtrudeGeometry: function ( mesh ) {
  894. var data = {
  895. steps: 2,
  896. depth: 16,
  897. bevelEnabled: true,
  898. bevelThickness: 1,
  899. bevelSize: 1,
  900. bevelSegments: 1
  901. };
  902. var length = 12, width = 8;
  903. var shape = new THREE.Shape();
  904. shape.moveTo( 0, 0 );
  905. shape.lineTo( 0, width );
  906. shape.lineTo( length, width );
  907. shape.lineTo( length, 0 );
  908. shape.lineTo( 0, 0 );
  909. function generateGeometry() {
  910. var geometry = new THREE.ExtrudeGeometry( shape, data );
  911. geometry.center();
  912. updateGroupGeometry( mesh, geometry );
  913. }
  914. var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
  915. folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
  916. folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
  917. folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
  918. folder.add( data, 'bevelSize', 1, 5 ).step( 1 ).onChange( generateGeometry );
  919. folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
  920. generateGeometry();
  921. },
  922. ExtrudeBufferGeometry: function ( mesh ) {
  923. var data = {
  924. steps: 2,
  925. depth: 16,
  926. bevelEnabled: true,
  927. bevelThickness: 1,
  928. bevelSize: 1,
  929. bevelSegments: 1
  930. };
  931. var length = 12, width = 8;
  932. var shape = new THREE.Shape();
  933. shape.moveTo( 0, 0 );
  934. shape.lineTo( 0, width );
  935. shape.lineTo( length, width );
  936. shape.lineTo( length, 0 );
  937. shape.lineTo( 0, 0 );
  938. function generateGeometry() {
  939. var geometry = new THREE.ExtrudeBufferGeometry( shape, data );
  940. geometry.center();
  941. updateGroupGeometry( mesh, geometry );
  942. }
  943. var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );
  944. folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
  945. folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
  946. folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
  947. folder.add( data, 'bevelSize', 1, 5 ).step( 1 ).onChange( generateGeometry );
  948. folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
  949. generateGeometry();
  950. }
  951. };
  952. function chooseFromHash( mesh ) {
  953. var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
  954. if ( guis[ selectedGeometry ] !== undefined ) {
  955. guis[ selectedGeometry ]( mesh );
  956. }
  957. if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
  958. return { fixed: true };
  959. }
  960. //No configuration options
  961. return {};
  962. }