1
0

TextGeometry.html 4.5 KB

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