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