Creating-text.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. <h1>[name]</h1>
  12. <div>
  13. <p>
  14. There are often times when you might need to use text in your three.js application - here are
  15. a couple of ways that you can do so.
  16. </p>
  17. </div>
  18. <h2>1. DOM + CSS</h2>
  19. <div>
  20. <p>
  21. Using HTML is generally the easiest and fastest manner to add text. This is the method
  22. used for descriptive overlays in most three.js examples.
  23. </p>
  24. <p>You can add content to a</p>
  25. <code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
  26. <p>
  27. and use CSS markup to position absolutely at a position above all others with a
  28. z-index especially if you are running three.js full screen.
  29. </p>
  30. <code>
  31. #info {
  32. position: absolute;
  33. top: 10px;
  34. width: 100%;
  35. text-align: center;
  36. z-index: 100;
  37. display:block;
  38. }
  39. </code>
  40. </div>
  41. <h2>2. Draw text to canvas and use as a [page:Texture]</h2>
  42. <div>
  43. <p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
  44. </div>
  45. <h2>3. Create a model in your favourite 3D application and export to three.js</h2>
  46. <div>
  47. <p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
  48. </div>
  49. <h2>4. Procedural Text Geometry</h2>
  50. <div>
  51. <p>
  52. Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d
  53. text geometries. However, font data files in THREE.js JSON format needs to be loaded
  54. before this will work.
  55. See the [page:TextGeometry] page for examples of JSON fonts.
  56. </p>
  57. <p>A Text Geometry can then be created with </p>
  58. <code>new THREE.TextGeometry( text, parameters );</code>
  59. <h3>Examples</h3>
  60. [example:webgl_geometry_text WebGL / geometry / text]<br />
  61. [example:canvas_geometry_text canvas / geometry / text]<br />
  62. [example:webgl_shadowmap WebGL / shadowmap]
  63. <p>
  64. If Typeface is down, or you want to use a font that is not there, there's a tutorial
  65. with a python script for blender that allows you to export text to Three.js's JSON format:
  66. [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
  67. </p>
  68. </div>
  69. </body>
  70. </html>