CODEWITHSUNDEEP
javascriptthree.js
hrcow88
hrcow88

Reputation: 41

How to include typeface.json font file in three.js?

I want to add 3D text in my website using the code (according to Labelling the vertices in AxisHelper of THREE.js ) below: 

var  textGeo = new THREE.TextGeometry('Test', {
                size: 10,
                height: 5,
                curveSegments: 6,
                font: "helvetiker",
                style: "normal"});
var  color = new THREE.Color();
color.setRGB(255, 250, 250);
var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
var  text = new THREE.Mesh(textGeo , textMaterial);
scene.add(text);

This requires including helvetiker_regular.typeface.js font file before using text Geometry as Three.js needs it for loading text geomtery.

What I find is json file such as "helvetiker_regular.typeface.json" (https://github.com/mrdoob/three.js/tree/master/examples/fonts).

Just a rookie in JS programing. Can someone tell me how to include it to make my code work?

Upvotes: 3

Views: 14423

Answers (1)

Eric
Eric

Reputation: 148

You'll need to use a font loader to load the font first:

var fontLoader = new THREE.FontLoader();
fontLoader.load("../path/to/font.json",function(tex){ 
    var  textGeo = new THREE.TextGeometry('Test', {
            size: 10,
            height: 5,
            curveSegments: 6,
            font: tex,
    });
    var  color = new THREE.Color();
    color.setRGB(255, 250, 250);
    var  textMaterial = new THREE.MeshBasicMaterial({ color: color });
    var  text = new THREE.Mesh(textGeo , textMaterial);
    scene.add(text);
})

Something like that will work if you just want to load it once and dont care about keeping the texture for another time. If you need to keep the "tex" object you could preload it somewhere in the code, and have it accessible for all future textgeometry objects..

Upvotes: 3

Related Questions