geometry.js 29 KB

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