geometry.js 27 KB

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