Threejs loading font using fontloader throws and error when using React

Question

I'm using the ThreeJS library together with React.

I've installed ThreeJS using npm.

Adding images works fine - I'm importing an image in react like this:

import stockImage from './../../images/download.jpg';

and using it like this works great:

this.addCube(stockImage, { x:2, y:2, z:2 } );

(...)

addCube(imageUrl, aPosition) {
        //Load image as material:
        var anImageMaterial = new THREE.MeshBasicMaterial({
            map : this.textureLoader.load(imageUrl)
        });
        //Make box geometry:
        var box = new THREE.BoxGeometry( 1, 1, 1 );
        //Create mesh:
        var cube = new THREE.Mesh( box, anImageMaterial );
        //Add to scene:
        this.scene.add( cube );
        return cube;
    }

When trying to add text to the canvas using this tutorial.

I'm trying to import the font in react like this:

import helveticaRegular from './../../fonts/helvetiker_regular.typeface.json';

Printing it like this looks good, so it doesn't seem to be a problem with react:

console.log(helveticaRegular);

However using the font like this throws an error:

var loader = new THREE.FontLoader();

loader.load( helveticaRegular, function ( font ) {
        var geometry2 = new THREE.TextGeometry( 'Hello three.js!', {
            font: font,
            size: 80,
            height: 5,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 8,
            bevelSegments: 5
        } );
        this.scene.add(geometry2);
    } );

The error is the following:

Please ignore C:/xammp/... as I'm not using xammp, but the folder naming was from when I used xammp.

Loading fonts like this using xammp, using a regular url does not produce the same error.

I don't know if the problem is due to urls or react or the FileLoader.load function in ThreeJS.

Have you tried using the font path directly?

gaitat
– gaitat

2019-01-04 13:36:03 +00:00
Commented Jan 4, 2019 at 13:36 — gaitat
– gaitat, Commented Jan 4, 2019 at 13:36

Mosè Raguzzini · Accepted Answer · 2019-01-04 13:35:58Z

7

FontLoader requires a URL as parameter by signature:

FontLoader.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

What you are passing in is instead the imported file, thus FontLoader.load does not like it as under the hood there will be an xhr call with an url parameter.

May be the correct approach is to skip load phase and go with FontLoader.parse(myImportedFont)

FontLoader.parse signature

.parse ( json : Object ) : Font
json — The JSON structure to parse.

Parse a JSON structure and return a Font.

answered Jan 4, 2019 at 13:35

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PeterOeClausen Over a year ago

Thanks a lot! I was unaware of the parse function and the 'under the hood' xhr call. The following code worked: var loader = new THREE.FontLoader(); var font = loader.parse(helveticaRegular); var textGeometry = new THREE.TextGeometry( 'Hello three.js!', { font: font, size: 1, height: 0.1, curveSegments: 20 } ); var textMaterial = new THREE.MeshBasicMaterial( { color: 0xF00000 } ); var textMesh = new THREE.Mesh( textGeometry, textMaterial ); this.scene.add(textMesh);

Collectives™ on Stack Overflow

Threejs loading font using fontloader throws and error when using React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related