TextGeometry.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. [page:Geometry] &rarr; [page:ExtrudeGeometry] &rarr;
  12. <h1>[name]</h1>
  13. <p class="desc">
  14. A class for generating text as a single geometry. It is constructed by providing a string of text, and a hash of
  15. parameters consisting of a loaded [page:Font] and settings for the geometry's parent [page:ExtrudeGeometry].
  16. See the [page:Font], [page:FontLoader] and [page:Creating-Text] pages for additional details.
  17. </p>
  18. <iframe id="scene" src="scenes/geometry-browser.html#TextGeometry"></iframe>
  19. <script>
  20. // iOS iframe auto-resize workaround
  21. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  22. var scene = document.getElementById( 'scene' );
  23. scene.style.width = getComputedStyle( scene ).width;
  24. scene.style.height = getComputedStyle( scene ).height;
  25. scene.setAttribute( 'scrolling', 'no' );
  26. }
  27. </script>
  28. <h2>Code Example</h2>
  29. <code>
  30. var loader = new THREE.FontLoader();
  31. loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
  32. var geometry = new THREE.TextGeometry( 'Hello three.js!', {
  33. font: font,
  34. size: 80,
  35. height: 5,
  36. curveSegments: 12,
  37. bevelEnabled: true,
  38. bevelThickness: 10,
  39. bevelSize: 8,
  40. bevelOffset: 0,
  41. bevelSegments: 5
  42. } );
  43. } );
  44. </code>
  45. <h2>Examples</h2>
  46. <p>
  47. [example:webgl_geometry_text geometry / text ]
  48. </p>
  49. <h2>Constructor</h2>
  50. <h3>[name]([param:String text], [param:Object parameters])</h3>
  51. <p>
  52. text — The text that needs to be shown. <br />
  53. parameters — Object that can contains the following parameters.
  54. <ul>
  55. <li>font — an instance of THREE.Font.</li>
  56. <li>size — Float. Size of the text. Default is 100.</li>
  57. <li>height — Float. Thickness to extrude text. Default is 50.</li>
  58. <li>curveSegments — Integer. Number of points on the curves. Default is 12.</li>
  59. <li>bevelEnabled — Boolean. Turn on bevel. Default is False.</li>
  60. <li>bevelThickness — Float. How deep into text bevel goes. Default is 10.</li>
  61. <li>bevelSize — Float. How far from text outline is bevel. Default is 8.</li>
  62. <li>bevelOffset — Float. How far from text outline bevel starts. Default is 0.</li>
  63. <li>bevelSegments — Integer. Number of bevel segments. Default is 3.</li>
  64. </ul>
  65. </p>
  66. <h2>Available Fonts</h2>
  67. <p>
  68. TextGeometry uses <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a> generated fonts.
  69. Some existing fonts can be found located in <b>/examples/fonts</b> and must be included in the page.
  70. </p>
  71. <table>
  72. <tr>
  73. <th>Font</th>
  74. <th>Weight</th>
  75. <th>Style</th>
  76. <th>File Path</th>
  77. </tr>
  78. <tr>
  79. <td>helvetiker</td>
  80. <td>normal</td>
  81. <td>normal</td>
  82. <td>/examples/fonts/helvetiker_regular.typeface.json</td>
  83. </tr>
  84. <tr>
  85. <td>helvetiker</td>
  86. <td>bold</td>
  87. <td>normal</td>
  88. <td>/examples/fonts/helvetiker_bold.typeface.json</td>
  89. </tr>
  90. <tr>
  91. <td>optimer</td>
  92. <td>normal</td>
  93. <td>normal</td>
  94. <td>/examples/fonts/optimer_regular.typeface.json</td>
  95. </tr>
  96. <tr>
  97. <td>optimer</td>
  98. <td>bold</td>
  99. <td>normal</td>
  100. <td>/examples/fonts/optimer_bold.typeface.json</td>
  101. </tr>
  102. <tr>
  103. <td>gentilis</td>
  104. <td>normal</td>
  105. <td>normal</td>
  106. <td>/examples/fonts/gentilis_regular.typeface.json</td>
  107. </tr>
  108. <tr>
  109. <td>gentilis</td>
  110. <td>bold</td>
  111. <td>normal</td>
  112. <td>/examples/fonts/gentilis_bold.typeface.json</td>
  113. </tr>
  114. <tr>
  115. <td>droid sans</td>
  116. <td>normal</td>
  117. <td>normal</td>
  118. <td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
  119. </tr>
  120. <tr>
  121. <td>droid sans</td>
  122. <td>bold</td>
  123. <td>normal</td>
  124. <td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
  125. </tr>
  126. <tr>
  127. <td>droid serif</td>
  128. <td>normal</td>
  129. <td>normal</td>
  130. <td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
  131. </tr>
  132. <tr>
  133. <td>droid serif</td>
  134. <td>bold</td>
  135. <td>normal</td>
  136. <td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
  137. </tr>
  138. </table>
  139. <h2>Properties</h2>
  140. <p>See the base [page:ExtrudeGeometry] class for common properties.</p>
  141. <h3>[property:Object parameters]</h3>
  142. <p>
  143. An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.
  144. </p>
  145. <h2>Methods</h2>
  146. <p>See the base [page:ExtrudeGeometry] class for common methods.</p>
  147. <h2>Source</h2>
  148. <p>
  149. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  150. </p>
  151. </body>
  152. </html>