geometry.js 32 KB

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