Skip to content

Instantly share code, notes, and snippets.

@nbriz
Last active December 18, 2015 05:29
Show Gist options
  • Save nbriz/7142d0759d6bca236bb7 to your computer and use it in GitHub Desktop.
Save nbriz/7142d0759d6bca236bb7 to your computer and use it in GitHub Desktop.
text geometry, for threejs_playGnd
/* ------------------- INSTRUCTIONS -----
to create 3D text
you must first add a font file to your HTML page
add the following tags belelow the Detector.js
which is on line 16
-------------------------------------- */
<script src="http://threejs.org/examples/fonts/helvetiker_bold.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/helvetiker_regular.typeface.js"></script>
/* --------------------------------------
then add the code below to your setup() function
change theText variable to whatever you want
change the size, height and curveSegments
you can also change wieght to "normal"
-------------------------------------- */
var theText = "a rose is";
var hash = document.location.hash.substr( 1 );
if ( hash.length !== 0 ) { theText = hash; }
var text3d = new THREE.TextGeometry( theText, {
size: 20,
height: 20,
curveSegments: 2,
font: "helvetiker",
weight: "bold"
});
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random()*0xffffff, overdraw: true } );
text = new THREE.Mesh( text3d, textMaterial );
text.position.x = centerOffset;
text.position.y = 100;
text.position.z = 0;
text.rotation.x = 0;
text.rotation.y = Math.PI * 2;
parent = new THREE.Object3D();
parent.add( text );
scene.add( parent );
/* --------------------------------------
if you want more font options add the following
tags to your page (below the others you added)
-------------------------------------- */
<script src="http://threejs.org/examples/fonts/gentilis_bold.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/gentilis_regular.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/optimer_bold.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/optimer_regular.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/droid/droid_sans_regular.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/droid/droid_sans_bold.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/droid/droid_serif_regular.typeface.js"></script>
<script src="http://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.js"></script>
/* --------------------------------------
you can now adjust your 'font' property in
the TextGeometry to any of the following:
helvetiker, optimer, gentilis, droid sans, droid serif
-------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment