geometry.js 22 KB

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