TextBufferGeometry.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <!DOCTYPE html>
  2. <html lang="zh">
  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:BufferGeometry] &rarr; [page:ExtrudeBufferGeometry] &rarr;
  12. <h1>文本缓冲几何体([name])</h1>
  13. <p class="desc">
  14. 一个用于将文本生成为单一的几何体的类。
  15. 它是由一串给定的文本,以及由加载的[page:Font](字体)和该几何体[page:ExtrudeGeometry]父类中的设置所组成的参数来构造的。
  16. 请参阅[page:Font]、[page:FontLoader]和[page:Creating_Text]页面来查看更多详细信息。
  17. </p>
  18. <iframe id="scene" src="scenes/geometry-browser.html#TextBufferGeometry"></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>代码示例</h2>
  29. <code>
  30. var loader = new THREE.FontLoader();
  31. loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
  32. var geometry = new THREE.TextBufferGeometry( '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. bevelSegments: 5
  41. } );
  42. } );
  43. </code>
  44. <h2>例子</h2>
  45. <p>
  46. [example:webgl_geometry_text geometry / text ]
  47. </p>
  48. <h2>构造器</h2>
  49. <h3>[name]([param:String text], [param:Object parameters])</h3>
  50. <p>
  51. text — 将要显示的文本。<br />
  52. parameters — 包含有下列参数的对象:
  53. <ul>
  54. <li>font — THREE.Font的实例。</li>
  55. <li>size — Float。字体大小,默认值为100。</li>
  56. <li>height — Float。挤出文本的厚度。默认值为50。</li>
  57. <li>curveSegments — Integer。(表示文本的)曲线上点的数量。默认值为12。</li>
  58. <li>bevelEnabled — Boolean。是否开启斜角,默认为false。</li>
  59. <li>bevelThickness — Float。文本上斜角的深度,默认值为20。</li>
  60. <li>bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。</li>
  61. <li>bevelSegments — Integer。斜角的分段数。默认值为3。</li>
  62. </ul>
  63. </p>
  64. <h2>可用的字体</h2>
  65. <p>
  66. 文本几何体使用 <a href='http://gero3.github.io/facetype.js/' target="_top">typeface.json</a>所生成的字体。
  67. 一些已有的字体可以在<b>/examples/fonts</b>中找到,且必须在页面中引入。
  68. </p>
  69. <table>
  70. <tr>
  71. <th>字体</th>
  72. <th>字重</th>
  73. <th>风格</th>
  74. <th>文件路径</th>
  75. </tr>
  76. <tr>
  77. <td>helvetiker</td>
  78. <td>normal</td>
  79. <td>normal</td>
  80. <td>/examples/fonts/helvetiker_regular.typeface.json</td>
  81. </tr>
  82. <tr>
  83. <td>helvetiker</td>
  84. <td>bold</td>
  85. <td>normal</td>
  86. <td>/examples/fonts/helvetiker_bold.typeface.json</td>
  87. </tr>
  88. <tr>
  89. <td>optimer</td>
  90. <td>normal</td>
  91. <td>normal</td>
  92. <td>/examples/fonts/optimer_regular.typeface.json</td>
  93. </tr>
  94. <tr>
  95. <td>optimer</td>
  96. <td>bold</td>
  97. <td>normal</td>
  98. <td>/examples/fonts/optimer_bold.typeface.json</td>
  99. </tr>
  100. <tr>
  101. <td>gentilis</td>
  102. <td>normal</td>
  103. <td>normal</td>
  104. <td>/examples/fonts/gentilis_regular.typeface.json</td>
  105. </tr>
  106. <tr>
  107. <td>gentilis</td>
  108. <td>bold</td>
  109. <td>normal</td>
  110. <td>/examples/fonts/gentilis_bold.typeface.json</td>
  111. </tr>
  112. <tr>
  113. <td>droid sans</td>
  114. <td>normal</td>
  115. <td>normal</td>
  116. <td>/examples/fonts/droid/droid_sans_regular.typeface.json</td>
  117. </tr>
  118. <tr>
  119. <td>droid sans</td>
  120. <td>bold</td>
  121. <td>normal</td>
  122. <td>/examples/fonts/droid/droid_sans_bold.typeface.json</td>
  123. </tr>
  124. <tr>
  125. <td>droid serif</td>
  126. <td>normal</td>
  127. <td>normal</td>
  128. <td>/examples/fonts/droid/droid_serif_regular.typeface.json</td>
  129. </tr>
  130. <tr>
  131. <td>droid serif</td>
  132. <td>bold</td>
  133. <td>normal</td>
  134. <td>/examples/fonts/droid/droid_serif_bold.typeface.json</td>
  135. </tr>
  136. </table>
  137. <h2>属性</h2>
  138. <p>共有属性请参见其基类[page:ExtrudeBufferGeometry]。</p>
  139. <h3>[property:Object parameters]</h3>
  140. <p>
  141. 一个包含着构造函数中每个参数的对象。在对象实例化之后,对该属性的任何修改都不会改变这个几何体。
  142. </p>
  143. <h2>方法(Methods)</h2>
  144. <p>共有方法请参见其基类[page:ExtrudeBufferGeometry]。</p>
  145. <h2>源代码</h2>
  146. <p>
  147. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  148. </p>
  149. </body>
  150. </html>