geometry.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  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', 1, 30 ).onChange( generateGeometry );
  139. folder.add( data, 'radiusBottom', 1, 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. CircleBufferGeometry : function( mesh ) {
  185. var data = {
  186. radius : 10,
  187. segments : 32,
  188. thetaStart : 0,
  189. thetaLength : twoPi,
  190. };
  191. function generateGeometry() {
  192. updateGroupGeometry( mesh,
  193. new THREE.CircleBufferGeometry(
  194. data.radius, data.segments, data.thetaStart, data.thetaLength
  195. )
  196. );
  197. }
  198. var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );
  199. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  200. folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  201. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  202. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  203. generateGeometry();
  204. },
  205. CircleGeometry : function( mesh ) {
  206. var data = {
  207. radius : 10,
  208. segments : 32,
  209. thetaStart : 0,
  210. thetaLength : twoPi,
  211. };
  212. function generateGeometry() {
  213. updateGroupGeometry( mesh,
  214. new THREE.CircleGeometry(
  215. data.radius, data.segments, data.thetaStart, data.thetaLength
  216. )
  217. );
  218. }
  219. var folder = gui.addFolder( 'THREE.CircleGeometry' );
  220. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  221. folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
  222. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  223. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  224. generateGeometry();
  225. },
  226. DodecahedronGeometry : function() {
  227. var data = {
  228. radius : 10,
  229. detail : 0,
  230. };
  231. function generateGeometry() {
  232. updateGroupGeometry( mesh,
  233. new THREE.DodecahedronGeometry(
  234. data.radius, data.detail
  235. )
  236. );
  237. }
  238. var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );
  239. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  240. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  241. generateGeometry();
  242. },
  243. IcosahedronGeometry : function() {
  244. var data = {
  245. radius : 10,
  246. detail : 0,
  247. };
  248. function generateGeometry() {
  249. updateGroupGeometry( mesh,
  250. new THREE.IcosahedronGeometry(
  251. data.radius, data.detail
  252. )
  253. );
  254. }
  255. var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
  256. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  257. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  258. generateGeometry();
  259. },
  260. OctahedronGeometry : function() {
  261. var data = {
  262. radius : 10,
  263. detail : 0,
  264. };
  265. function generateGeometry() {
  266. updateGroupGeometry( mesh,
  267. new THREE.OctahedronGeometry(
  268. data.radius, data.detail
  269. )
  270. );
  271. }
  272. var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
  273. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  274. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  275. generateGeometry();
  276. },
  277. PlaneBufferGeometry : function( mesh ) {
  278. var data = {
  279. width : 10,
  280. height : 10,
  281. widthSegments : 1,
  282. heightSegments : 1
  283. };
  284. function generateGeometry() {
  285. updateGroupGeometry( mesh,
  286. new THREE.PlaneBufferGeometry(
  287. data.width, data.height, data.widthSegments, data.heightSegments
  288. )
  289. );
  290. }
  291. var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
  292. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  293. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  294. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  295. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  296. generateGeometry();
  297. },
  298. PlaneGeometry : function( mesh ) {
  299. var data = {
  300. width : 10,
  301. height : 10,
  302. widthSegments : 1,
  303. heightSegments : 1
  304. };
  305. function generateGeometry() {
  306. updateGroupGeometry( mesh,
  307. new THREE.PlaneGeometry(
  308. data.width, data.height, data.widthSegments, data.heightSegments
  309. )
  310. );
  311. }
  312. var folder = gui.addFolder( 'THREE.PlaneGeometry' );
  313. folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
  314. folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
  315. folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  316. folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  317. generateGeometry();
  318. },
  319. RingBufferGeometry : function( mesh ) {
  320. var data = {
  321. innerRadius : 5,
  322. outerRadius : 10,
  323. thetaSegments : 8,
  324. phiSegments : 8,
  325. thetaStart : 0,
  326. thetaLength : twoPi,
  327. };
  328. function generateGeometry() {
  329. updateGroupGeometry( mesh,
  330. new THREE.RingBufferGeometry(
  331. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  332. )
  333. );
  334. }
  335. var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
  336. folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
  337. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  338. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  339. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  340. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  341. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  342. generateGeometry();
  343. },
  344. RingGeometry : function( mesh ) {
  345. var data = {
  346. innerRadius : 5,
  347. outerRadius : 10,
  348. thetaSegments : 8,
  349. phiSegments : 8,
  350. thetaStart : 0,
  351. thetaLength : twoPi,
  352. };
  353. function generateGeometry() {
  354. updateGroupGeometry( mesh,
  355. new THREE.RingGeometry(
  356. data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
  357. )
  358. );
  359. }
  360. var folder = gui.addFolder( 'THREE.RingGeometry' );
  361. folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
  362. folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
  363. folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  364. folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
  365. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  366. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  367. generateGeometry();
  368. },
  369. SphereBufferGeometry : function( mesh ) {
  370. var data = {
  371. radius : 15,
  372. widthSegments : 8,
  373. heightSegments : 6,
  374. phiStart : 0,
  375. phiLength : twoPi,
  376. thetaStart : 0,
  377. thetaLength : Math.PI,
  378. };
  379. function generateGeometry() {
  380. updateGroupGeometry( mesh,
  381. new THREE.SphereBufferGeometry(
  382. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  383. )
  384. );
  385. }
  386. var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
  387. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  388. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  389. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  390. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  391. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  392. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  393. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  394. generateGeometry();
  395. },
  396. SphereGeometry : function( mesh ) {
  397. var data = {
  398. radius : 15,
  399. widthSegments : 8,
  400. heightSegments : 6,
  401. phiStart : 0,
  402. phiLength : twoPi,
  403. thetaStart : 0,
  404. thetaLength : Math.PI,
  405. };
  406. function generateGeometry() {
  407. updateGroupGeometry( mesh,
  408. new THREE.SphereGeometry(
  409. data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
  410. )
  411. );
  412. }
  413. var folder = gui.addFolder( 'THREE.SphereGeometry' );
  414. folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
  415. folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
  416. folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
  417. folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
  418. folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
  419. folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
  420. folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
  421. generateGeometry();
  422. },
  423. TetrahedronGeometry : function() {
  424. var data = {
  425. radius : 10,
  426. detail : 0,
  427. };
  428. function generateGeometry() {
  429. updateGroupGeometry( mesh,
  430. new THREE.TetrahedronGeometry(
  431. data.radius, data.detail
  432. )
  433. );
  434. }
  435. var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
  436. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  437. folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
  438. generateGeometry();
  439. },
  440. TextGeometry : function( mesh ) {
  441. var data = {
  442. text : "TextGeometry",
  443. size : 5,
  444. height : 2,
  445. curveSegments : 12,
  446. font : "helvetiker",
  447. weight : "regular",
  448. bevelEnabled : false,
  449. bevelThickness : 1,
  450. bevelSize : 0.5
  451. };
  452. var fonts = [
  453. "helvetiker",
  454. "optimer",
  455. "gentilis",
  456. "droid/droid_serif"
  457. ];
  458. var weights = [
  459. "regular", "bold"
  460. ];
  461. function generateGeometry() {
  462. var loader = new THREE.FontLoader();
  463. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.js', function ( font ) {
  464. var geometry = new THREE.TextGeometry( data.text, {
  465. font: font,
  466. size: data.size,
  467. height: data.height,
  468. curveSegments: data.curveSegments,
  469. bevelEnabled: data.bevelEnabled,
  470. bevelThickness: data.bevelThickness,
  471. bevelSize: data.bevelSize
  472. } );
  473. geometry.center();
  474. updateGroupGeometry( mesh, geometry );
  475. } );
  476. }
  477. //Hide the wireframe
  478. mesh.children[ 0 ].visible = false;
  479. var folder = gui.addFolder( 'THREE.TextGeometry' );
  480. folder.add( data, 'text' ).onChange( generateGeometry );
  481. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  482. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  483. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  484. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  485. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  486. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  487. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  488. folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );
  489. generateGeometry();
  490. },
  491. TorusBufferGeometry : function( mesh ) {
  492. var data = {
  493. radius : 10,
  494. tube : 3,
  495. radialSegments : 16,
  496. tubularSegments : 100,
  497. arc : twoPi
  498. };
  499. function generateGeometry() {
  500. updateGroupGeometry( mesh,
  501. new THREE.TorusBufferGeometry(
  502. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  503. )
  504. );
  505. }
  506. var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
  507. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  508. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  509. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  510. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  511. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  512. generateGeometry();
  513. },
  514. TorusGeometry : function( mesh ) {
  515. var data = {
  516. radius : 10,
  517. tube : 3,
  518. radialSegments : 16,
  519. tubularSegments : 100,
  520. arc : twoPi
  521. };
  522. function generateGeometry() {
  523. updateGroupGeometry( mesh,
  524. new THREE.TorusGeometry(
  525. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  526. )
  527. );
  528. }
  529. var folder = gui.addFolder( 'THREE.TorusGeometry' );
  530. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  531. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  532. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  533. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  534. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  535. generateGeometry();
  536. },
  537. TorusKnotGeometry : function( mesh ) {
  538. var data = {
  539. radius : 10,
  540. tube : 3,
  541. radialSegments : 64,
  542. tubularSegments : 8,
  543. p : 2,
  544. q : 3,
  545. heightScale : 1
  546. };
  547. function generateGeometry() {
  548. updateGroupGeometry( mesh,
  549. new THREE.TorusKnotGeometry(
  550. data.radius, data.tube, data.radialSegments, data.tubularSegments,
  551. data.p, data.q, data.heightScale
  552. )
  553. );
  554. }
  555. var folder = gui.addFolder( 'THREE.TorusGeometry' );
  556. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  557. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  558. folder.add( data, 'radialSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  559. folder.add( data, 'tubularSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  560. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  561. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  562. folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry );
  563. generateGeometry();
  564. }
  565. };
  566. function chooseFromHash ( mesh ) {
  567. var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
  568. if ( guis[ selectedGeometry ] !== undefined ) {
  569. guis[ selectedGeometry ]( mesh );
  570. }
  571. if ( selectedGeometry === 'TextGeometry' ) {
  572. return { fixed : true };
  573. }
  574. //No configuration options
  575. return {};
  576. }