|
|
@@ -9,44 +9,78 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>[name]</h1>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ There are often times when you might need to use text in your three.js application - here are
|
|
|
+ a couple of ways that you can do so.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>1. DOM + CSS</h2>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ Using HTML is generally the easiest and fastest manner to add text. This is the method
|
|
|
+ used for descriptive overlays in most three.js examples.
|
|
|
+ </p>
|
|
|
+ <p>You can add content to a</p>
|
|
|
+ <code><div id="info">Description</div></code>
|
|
|
+
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <code>
|
|
|
+#info {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 100;
|
|
|
+ display:block;
|
|
|
+}
|
|
|
+ </code>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <h2>2. Draw text to canvas and use as a [page:Texture]</h2>
|
|
|
+ <div>
|
|
|
+ <p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <h2>3. Create a model in your favourite 3D application and export to three.js</h2>
|
|
|
+ <div>
|
|
|
+ <p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <h2>4. Procedural Text Geometry</h2>
|
|
|
+ <div>
|
|
|
+ <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>
|
|
|
+ <p>A Text Geometry can then be created with </p>
|
|
|
+ <code>new THREE.TextGeometry( text, parameters );</code>
|
|
|
+
|
|
|
+ <h3>Examples</h3>
|
|
|
+ [example:webgl_geometry_text WebGL / geometry / text]<br />
|
|
|
+ [example:canvas_geometry_text canvas / geometry / text]<br />
|
|
|
+ [example:webgl_shadowmap WebGL / shadowmap]
|
|
|
+
|
|
|
+ <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:
|
|
|
+ [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
|
|
|
-<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>
|
|
|
-
|
|
|
-<h2>1. DOM + CSS</h2>
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<p>You can add content to a
|
|
|
-<code><div id="info">Description</div></code></p>
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<p><code>#info {
|
|
|
-position: absolute;
|
|
|
-top: 10px;
|
|
|
-width: 100%;
|
|
|
-text-align: center;
|
|
|
-z-index: 100;
|
|
|
-display:block;
|
|
|
-}</code></p>
|
|
|
-
|
|
|
-<h2>2. Draw text to canvas and use as Texture</h2>
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<h2>3. Create a 3d model in your 3d application and export to three.js</h2>
|
|
|
-
|
|
|
-<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
|
|
|
-
|
|
|
-<h2>4. Procedural Text Geometry</h2>
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<p>A Text Geometry can then be created with <code>new THREE.TextGeometry( text, parameters );</code></p>
|
|
|
-
|
|
|
-<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>
|
|
|
-
|
|
|
-<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>
|
|
|
|
|
|
|
|
|
</body>
|
Lewy Blue