geometry.js 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000
  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. IcosahedronGeometry : function() {
  310. var data = {
  311. radius : 10,
  312. detail : 0,
  313. };
  314. function generateGeometry() {
  315. updateGroupGeometry( mesh,
  316. new THREE.IcosahedronGeometry(
  317. data.radius, data.detail
  318. )
  319. );
  320. }
  321. var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
  322. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  323. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  324. generateGeometry();
  325. },
  326. LatheBufferGeometry : function() {
  327. var points = [];
  328. for ( var i = 0; i < 10; i ++ ) {
  329. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  330. }
  331. var data = {
  332. segments : 12,
  333. phiStart : 0,
  334. phiLength : twoPi,
  335. };
  336. function generateGeometry() {
  337. var geometry = new THREE.LatheBufferGeometry(
  338. points, data.segments, data.phiStart, data.phiLength
  339. );
  340. updateGroupGeometry( mesh, geometry );
  341. }
  342. var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );
  343. folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  344. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  345. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  346. generateGeometry();
  347. },
  348. LatheGeometry : function() {
  349. var points = [];
  350. for ( var i = 0; i < 10; i ++ ) {
  351. points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
  352. }
  353. var data = {
  354. segments : 12,
  355. phiStart : 0,
  356. phiLength : twoPi,
  357. };
  358. function generateGeometry() {
  359. var geometry = new THREE.LatheGeometry(
  360. points, data.segments, data.phiStart, data.phiLength
  361. );
  362. updateGroupGeometry( mesh, geometry );
  363. }
  364. var folder = gui.addFolder( 'THREE.LatheGeometry' );
  365. folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  366. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  367. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  368. generateGeometry();
  369. },
  370. OctahedronGeometry : function() {
  371. var data = {
  372. radius : 10,
  373. detail : 0,
  374. };
  375. function generateGeometry() {
  376. updateGroupGeometry( mesh,
  377. new THREE.OctahedronGeometry(
  378. data.radius, data.detail
  379. )
  380. );
  381. }
  382. var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
  383. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  384. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  385. generateGeometry();
  386. },
  387. PlaneBufferGeometry : function( mesh ) {
  388. var data = {
  389. width : 10,
  390. height : 10,
  391. widthSegments : 1,
  392. heightSegments : 1
  393. };
  394. function generateGeometry() {
  395. updateGroupGeometry( mesh,
  396. new THREE.PlaneBufferGeometry(
  397. data.width, data.height, data.widthSegments, data.heightSegments
  398. )
  399. );
  400. }
  401. var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
  402. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  403. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  404. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  405. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  406. generateGeometry();
  407. },
  408. PlaneGeometry : function( mesh ) {
  409. var data = {
  410. width : 10,
  411. height : 10,
  412. widthSegments : 1,
  413. heightSegments : 1
  414. };
  415. function generateGeometry() {
  416. updateGroupGeometry( mesh,
  417. new THREE.PlaneGeometry(
  418. data.width, data.height, data.widthSegments, data.heightSegments
  419. )
  420. );
  421. }
  422. var folder = gui.addFolder( 'THREE.PlaneGeometry' );
  423. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  424. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  425. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  426. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  427. generateGeometry();
  428. },
  429. RingBufferGeometry : function( mesh ) {
  430. var data = {
  431. innerRadius : 5,
  432. outerRadius : 10,
  433. thetaSegments : 8,
  434. phiSegments : 8,
  435. thetaStart : 0,
  436. thetaLength : twoPi,
  437. };
  438. function generateGeometry() {
  439. updateGroupGeometry( mesh,
  440. new THREE.RingBufferGeometry(
  441. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  442. )
  443. );
  444. }
  445. var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
  446. folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
  447. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  448. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  449. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  450. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  451. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  452. generateGeometry();
  453. },
  454. RingGeometry : function( mesh ) {
  455. var data = {
  456. innerRadius : 5,
  457. outerRadius : 10,
  458. thetaSegments : 8,
  459. phiSegments : 8,
  460. thetaStart : 0,
  461. thetaLength : twoPi,
  462. };
  463. function generateGeometry() {
  464. updateGroupGeometry( mesh,
  465. new THREE.RingGeometry(
  466. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  467. )
  468. );
  469. }
  470. var folder = gui.addFolder( 'THREE.RingGeometry' );
  471. folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
  472. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  473. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  474. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  475. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  476. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  477. generateGeometry();
  478. },
  479. SphereBufferGeometry : function( mesh ) {
  480. var data = {
  481. radius : 15,
  482. widthSegments : 8,
  483. heightSegments : 6,
  484. phiStart : 0,
  485. phiLength : twoPi,
  486. thetaStart : 0,
  487. thetaLength : Math.PI,
  488. };
  489. function generateGeometry() {
  490. updateGroupGeometry( mesh,
  491. new THREE.SphereBufferGeometry(
  492. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  493. )
  494. );
  495. }
  496. var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
  497. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  498. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  499. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  500. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  501. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  502. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  503. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  504. generateGeometry();
  505. },
  506. SphereGeometry : function( mesh ) {
  507. var data = {
  508. radius : 15,
  509. widthSegments : 8,
  510. heightSegments : 6,
  511. phiStart : 0,
  512. phiLength : twoPi,
  513. thetaStart : 0,
  514. thetaLength : Math.PI,
  515. };
  516. function generateGeometry() {
  517. updateGroupGeometry( mesh,
  518. new THREE.SphereGeometry(
  519. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  520. )
  521. );
  522. }
  523. var folder = gui.addFolder( 'THREE.SphereGeometry' );
  524. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  525. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  526. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  527. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  528. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  529. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  530. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  531. generateGeometry();
  532. },
  533. TetrahedronGeometry : function() {
  534. var data = {
  535. radius : 10,
  536. detail : 0,
  537. };
  538. function generateGeometry() {
  539. updateGroupGeometry( mesh,
  540. new THREE.TetrahedronGeometry(
  541. data.radius, data.detail
  542. )
  543. );
  544. }
  545. var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
  546. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  547. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  548. generateGeometry();
  549. },
  550. TextGeometry : function( mesh ) {
  551. var data = {
  552. text : "TextGeometry",
  553. size : 5,
  554. height : 2,
  555. curveSegments : 12,
  556. font : "helvetiker",
  557. weight : "regular",
  558. bevelEnabled : false,
  559. bevelThickness : 1,
  560. bevelSize : 0.5
  561. };
  562. var fonts = [
  563. "helvetiker",
  564. "optimer",
  565. "gentilis",
  566. "droid/droid_serif"
  567. ];
  568. var weights = [
  569. "regular", "bold"
  570. ];
  571. function generateGeometry() {
  572. var loader = new THREE.FontLoader();
  573. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.js', function ( font ) {
  574. var geometry = new THREE.TextGeometry( data.text, {
  575. font: font,
  576. size: data.size,
  577. height: data.height,
  578. curveSegments: data.curveSegments,
  579. bevelEnabled: data.bevelEnabled,
  580. bevelThickness: data.bevelThickness,
  581. bevelSize: data.bevelSize
  582. } );
  583. geometry.center();
  584. updateGroupGeometry( mesh, geometry );
  585. } );
  586. }
  587. //Hide the wireframe
  588. mesh.children[ 0 ].visible = false;
  589. var folder = gui.addFolder( 'THREE.TextGeometry' );
  590. folder.add( data, 'text' ).onChange( generateGeometry );
  591. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  592. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  593. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  594. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  595. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  596. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  597. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  598. folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
  599. generateGeometry();
  600. },
  601. TorusBufferGeometry : function( mesh ) {
  602. var data = {
  603. radius : 10,
  604. tube : 3,
  605. radialSegments : 16,
  606. tubularSegments : 100,
  607. arc : twoPi
  608. };
  609. function generateGeometry() {
  610. updateGroupGeometry( mesh,
  611. new THREE.TorusBufferGeometry(
  612. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  613. )
  614. );
  615. }
  616. var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
  617. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  618. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  619. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  620. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  621. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  622. generateGeometry();
  623. },
  624. TorusGeometry : function( mesh ) {
  625. var data = {
  626. radius : 10,
  627. tube : 3,
  628. radialSegments : 16,
  629. tubularSegments : 100,
  630. arc : twoPi
  631. };
  632. function generateGeometry() {
  633. updateGroupGeometry( mesh,
  634. new THREE.TorusGeometry(
  635. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  636. )
  637. );
  638. }
  639. var folder = gui.addFolder( 'THREE.TorusGeometry' );
  640. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  641. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  642. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  643. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  644. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  645. generateGeometry();
  646. },
  647. TorusKnotBufferGeometry : function( mesh ) {
  648. var data = {
  649. radius : 10,
  650. tube : 3,
  651. tubularSegments : 64,
  652. radialSegments : 8,
  653. p : 2,
  654. q : 3
  655. };
  656. function generateGeometry() {
  657. updateGroupGeometry( mesh,
  658. new THREE.TorusKnotBufferGeometry(
  659. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  660. data.p, data.q
  661. )
  662. );
  663. }
  664. var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
  665. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  666. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  667. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  668. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  669. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  670. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  671. generateGeometry();
  672. },
  673. TorusKnotGeometry : function( mesh ) {
  674. var data = {
  675. radius : 10,
  676. tube : 3,
  677. tubularSegments : 64,
  678. radialSegments : 8,
  679. p : 2,
  680. q : 3
  681. };
  682. function generateGeometry() {
  683. updateGroupGeometry( mesh,
  684. new THREE.TorusKnotGeometry(
  685. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  686. data.p, data.q
  687. )
  688. );
  689. }
  690. var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
  691. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  692. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  693. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  694. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  695. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  696. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  697. generateGeometry();
  698. }
  699. };
  700. function chooseFromHash ( mesh ) {
  701. var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
  702. if ( guis[ selectedGeometry ] !== undefined ) {
  703. guis[ selectedGeometry ]( mesh );
  704. }
  705. if ( selectedGeometry === 'TextGeometry' ) {
  706. return { fixed : true };
  707. }
  708. //No configuration options
  709. return {};
  710. }