Creating-text.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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. <p>There are often times when you might need to use text in your Three.js application. Here's are some options you may consider when you wish to add Text.</p>
  13. <h2>1. DOM + CSS</h2>
  14. <p>Using HTML could simply be the easiest and fastest manner to add text. This is commonly used for descriptive overlays in three.js examples.</p>
  15. <p>You can add content to a
  16. <code>&lt;div id="info"&gt;Description&lt;/div&gt;</code></p>
  17. <p>and use css markup to position absolutely at a position above all others with a z-index especially if you are running three.js full screen.</p>
  18. <p><code>#info {
  19. position: absolute;
  20. top: 10px;
  21. width: 100%;
  22. text-align: center;
  23. z-index: 100;
  24. display:block;
  25. }</code></p>
  26. <h2>2. Draw text to canvas and use as Texture</h2>
  27. <p>Use this method if you wish to draw text easily on a plane in your three.js scene. This technique can be seen utilized in the <a href="http://plumegraph.org/">Civilian Casualties in Afghanistan</a> visualization.</p>
  28. <h2>3. Create a 3d model in your 3d application and export to three.js</h2>
  29. <p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
  30. <h2>4. Procedural Text Geometry</h2>
  31. <p>Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d text geometries. However, font data files <a href="http://typeface.neocracy.org/fonts.html">http://typeface.neocracy.org/fonts.html</a> in the typeface.js format needs to be loaded.</p>
  32. <p>A Text Geometry can then be created with <code>new THREE.TextGeometry( text, parameters );</code></p>
  33. <p>For examples, see <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html</a>, <a href="https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html</a> and <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html</a></p>
  34. <p>If Typeface is down, or you want to use a font that is not there, there's a tutorial with a python script for blender that allows you to export text to Three.js's JSON format: <a href="http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html">http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html</a></p>
  35. </body>
  36. </html>