Learning Three.js

or WebGL for Dummies

Personalized and Polished Text for Your Three.js Game With threex.text

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.text. threex.text is a threex game extension for three.js which makes it easy to add 3d text in your game. You can use it to create a big logo on top of a shop or a big sign of any kind Las Vegas style. Up to you to see :) It is very flexible. You can fine tune lots of parameters to make it fit your needs. You can choose the fonts, the size, the bevel, the weight etc…

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

How To Install It

You can install it via script tag

1
<script src='threex.text.js'></script>

Or you can install with bower, as you wish.

1
bower install threex.text

How To Use It

Here is a very basic usage

1
2
var mesh    = new THREEx.Text('THREEx')
scene.add(mesh)

Here is another example with more parameters. The options are passed directly to THREE.TextGeometry. See three.js docs for details.

1
2
3
4
5
6
7
var mesh    = new THREEx.Text('THREEx', {
    font        : "droid serif",
    weight      : "bold",
    size        : 1,
    height      : 0.4,
})
scene.add(mesh)

Comments