geometry.js 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376
  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. bevelOffset: 0.0,
  603. bevelSegments: 3
  604. };
  605. var fonts = [
  606. "helvetiker",
  607. "optimer",
  608. "gentilis",
  609. "droid/droid_serif"
  610. ];
  611. var weights = [
  612. "regular", "bold"
  613. ];
  614. function generateGeometry() {
  615. var loader = new THREE.FontLoader();
  616. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
  617. var geometry = new THREE.TextGeometry( data.text, {
  618. font: font,
  619. size: data.size,
  620. height: data.height,
  621. curveSegments: data.curveSegments,
  622. bevelEnabled: data.bevelEnabled,
  623. bevelThickness: data.bevelThickness,
  624. bevelSize: data.bevelSize,
  625. bevelOffset: data.bevelOffset,
  626. bevelSegments: data.bevelSegments
  627. } );
  628. geometry.center();
  629. updateGroupGeometry( mesh, geometry );
  630. } );
  631. }
  632. //Hide the wireframe
  633. mesh.children[ 0 ].visible = false;
  634. var folder = gui.addFolder( 'THREE.TextGeometry' );
  635. folder.add( data, 'text' ).onChange( generateGeometry );
  636. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  637. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  638. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  639. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  640. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  641. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  642. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  643. folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
  644. folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
  645. folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
  646. generateGeometry();
  647. },
  648. TextBufferGeometry: function ( mesh ) {
  649. var data = {
  650. text: "TextBufferGeometry",
  651. size: 5,
  652. height: 2,
  653. curveSegments: 12,
  654. font: "helvetiker",
  655. weight: "regular",
  656. bevelEnabled: false,
  657. bevelThickness: 1,
  658. bevelSize: 0.5,
  659. bevelOffset: 0.0,
  660. bevelSegments: 3
  661. };
  662. var fonts = [
  663. "helvetiker",
  664. "optimer",
  665. "gentilis",
  666. "droid/droid_serif"
  667. ];
  668. var weights = [
  669. "regular", "bold"
  670. ];
  671. function generateGeometry() {
  672. var loader = new THREE.FontLoader();
  673. loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
  674. var geometry = new THREE.TextBufferGeometry( data.text, {
  675. font: font,
  676. size: data.size,
  677. height: data.height,
  678. curveSegments: data.curveSegments,
  679. bevelEnabled: data.bevelEnabled,
  680. bevelThickness: data.bevelThickness,
  681. bevelSize: data.bevelSize,
  682. bevelOffset: data.bevelOffset,
  683. bevelSegments: data.bevelSegments
  684. } );
  685. geometry.center();
  686. updateGroupGeometry( mesh, geometry );
  687. } );
  688. }
  689. //Hide the wireframe
  690. mesh.children[ 0 ].visible = false;
  691. var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
  692. folder.add( data, 'text' ).onChange( generateGeometry );
  693. folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
  694. folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
  695. folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  696. folder.add( data, 'font', fonts ).onChange( generateGeometry );
  697. folder.add( data, 'weight', weights ).onChange( generateGeometry );
  698. folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
  699. folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
  700. folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
  701. folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
  702. folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
  703. generateGeometry();
  704. },
  705. TorusBufferGeometry: function ( mesh ) {
  706. var data = {
  707. radius: 10,
  708. tube: 3,
  709. radialSegments: 16,
  710. tubularSegments: 100,
  711. arc: twoPi
  712. };
  713. function generateGeometry() {
  714. updateGroupGeometry( mesh,
  715. new THREE.TorusBufferGeometry(
  716. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  717. )
  718. );
  719. }
  720. var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
  721. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  722. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  723. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  724. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  725. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  726. generateGeometry();
  727. },
  728. TorusGeometry: function ( mesh ) {
  729. var data = {
  730. radius: 10,
  731. tube: 3,
  732. radialSegments: 16,
  733. tubularSegments: 100,
  734. arc: twoPi
  735. };
  736. function generateGeometry() {
  737. updateGroupGeometry( mesh,
  738. new THREE.TorusGeometry(
  739. data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
  740. )
  741. );
  742. }
  743. var folder = gui.addFolder( 'THREE.TorusGeometry' );
  744. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  745. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  746. folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
  747. folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
  748. folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
  749. generateGeometry();
  750. },
  751. TorusKnotBufferGeometry: function ( mesh ) {
  752. var data = {
  753. radius: 10,
  754. tube: 3,
  755. tubularSegments: 64,
  756. radialSegments: 8,
  757. p: 2,
  758. q: 3
  759. };
  760. function generateGeometry() {
  761. updateGroupGeometry( mesh,
  762. new THREE.TorusKnotBufferGeometry(
  763. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  764. data.p, data.q
  765. )
  766. );
  767. }
  768. var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
  769. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  770. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  771. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  772. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  773. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  774. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  775. generateGeometry();
  776. },
  777. TorusKnotGeometry: function ( mesh ) {
  778. var data = {
  779. radius: 10,
  780. tube: 3,
  781. tubularSegments: 64,
  782. radialSegments: 8,
  783. p: 2,
  784. q: 3
  785. };
  786. function generateGeometry() {
  787. updateGroupGeometry( mesh,
  788. new THREE.TorusKnotGeometry(
  789. data.radius, data.tube, data.tubularSegments, data.radialSegments,
  790. data.p, data.q
  791. )
  792. );
  793. }
  794. var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
  795. folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
  796. folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
  797. folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
  798. folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
  799. folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
  800. folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
  801. generateGeometry();
  802. },
  803. ParametricBufferGeometry: function ( mesh ) {
  804. var data = {
  805. slices: 25,
  806. stacks: 25
  807. };
  808. function generateGeometry() {
  809. updateGroupGeometry( mesh,
  810. new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
  811. );
  812. }
  813. var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
  814. folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
  815. folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
  816. generateGeometry();
  817. },
  818. ParametricGeometry: function ( mesh ) {
  819. var data = {
  820. slices: 25,
  821. stacks: 25
  822. };
  823. function generateGeometry() {
  824. updateGroupGeometry( mesh,
  825. new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
  826. );
  827. }
  828. var folder = gui.addFolder( 'THREE.ParametricGeometry' );
  829. folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
  830. folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
  831. generateGeometry();
  832. },
  833. TubeGeometry: function ( mesh ) {
  834. var data = {
  835. segments: 20,
  836. radius: 2,
  837. radialSegments: 8
  838. };
  839. var path = new CustomSinCurve( 10 );
  840. function generateGeometry() {
  841. updateGroupGeometry( mesh,
  842. new THREE.TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
  843. );
  844. }
  845. var folder = gui.addFolder( 'THREE.TubeGeometry' );
  846. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  847. folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
  848. folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  849. generateGeometry();
  850. },
  851. TubeBufferGeometry: function ( mesh ) {
  852. var data = {
  853. segments: 20,
  854. radius: 2,
  855. radialSegments: 8
  856. };
  857. var path = new CustomSinCurve( 10 );
  858. function generateGeometry() {
  859. updateGroupGeometry( mesh,
  860. new THREE.TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
  861. );
  862. }
  863. var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
  864. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  865. folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
  866. folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
  867. generateGeometry();
  868. },
  869. ShapeGeometry: function ( mesh ) {
  870. var data = {
  871. segments: 12
  872. };
  873. function generateGeometry() {
  874. var geometry = new THREE.ShapeGeometry( heartShape, data.segments );
  875. geometry.center();
  876. updateGroupGeometry( mesh, geometry );
  877. }
  878. var folder = gui.addFolder( 'THREE.ShapeGeometry' );
  879. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  880. generateGeometry();
  881. },
  882. ShapeBufferGeometry: function ( mesh ) {
  883. var data = {
  884. segments: 12
  885. };
  886. function generateGeometry() {
  887. var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments );
  888. geometry.center();
  889. updateGroupGeometry( mesh, geometry );
  890. }
  891. var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
  892. folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
  893. generateGeometry();
  894. },
  895. ExtrudeGeometry: function ( mesh ) {
  896. var data = {
  897. steps: 2,
  898. depth: 16,
  899. bevelEnabled: true,
  900. bevelThickness: 1,
  901. bevelSize: 1,
  902. bevelOffset: 0,
  903. bevelSegments: 1
  904. };
  905. var length = 12, width = 8;
  906. var shape = new THREE.Shape();
  907. shape.moveTo( 0, 0 );
  908. shape.lineTo( 0, width );
  909. shape.lineTo( length, width );
  910. shape.lineTo( length, 0 );
  911. shape.lineTo( 0, 0 );
  912. function generateGeometry() {
  913. var geometry = new THREE.ExtrudeGeometry( shape, data );
  914. geometry.center();
  915. updateGroupGeometry( mesh, geometry );
  916. }
  917. var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
  918. folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
  919. folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
  920. folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
  921. folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
  922. folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
  923. folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
  924. generateGeometry();
  925. },
  926. ExtrudeBufferGeometry: function ( mesh ) {
  927. var data = {
  928. steps: 2,
  929. depth: 16,
  930. bevelEnabled: true,
  931. bevelThickness: 1,
  932. bevelSize: 1,
  933. bevelOffset: 0,
  934. bevelSegments: 1
  935. };
  936. var length = 12, width = 8;
  937. var shape = new THREE.Shape();
  938. shape.moveTo( 0, 0 );
  939. shape.lineTo( 0, width );
  940. shape.lineTo( length, width );
  941. shape.lineTo( length, 0 );
  942. shape.lineTo( 0, 0 );
  943. function generateGeometry() {
  944. var geometry = new THREE.ExtrudeBufferGeometry( shape, data );
  945. geometry.center();
  946. updateGroupGeometry( mesh, geometry );
  947. }
  948. var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );
  949. folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
  950. folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
  951. folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
  952. folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
  953. folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
  954. folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
  955. generateGeometry();
  956. }
  957. };
  958. function chooseFromHash( mesh ) {
  959. var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
  960. if ( guis[ selectedGeometry ] !== undefined ) {
  961. guis[ selectedGeometry ]( mesh );
  962. }
  963. if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
  964. return { fixed: true };
  965. }
  966. //No configuration options
  967. return {};
  968. }