Change font-family for texture text in three.js

Question

I use plugin «threex.dynamictexture.js» in my app and have some trouble with loading my font (I have trouble even using existing helvetiker_bold.typeface.json ). I use the following pattern:

function loadFont() {

                var loader = new THREE.FontLoader();
                loader.load('/threejs/fonts/helvetiker_bold.typeface.json', function (font) {

                    dynamicTexture  = new THREEx.DynamicTexture(canvasWrapper.offsetWidth,canvasWrapper.offsetHeight);
//                    dynamicTexture.context.font  = 'bolder 90px Helvetiker';
                    var geometry2    = new THREE.SphereGeometry( 5, 100, 100);
                    var material2    = new THREE.MeshBasicMaterial({
                        map : dynamicTexture.texture
                    });
                    var mesh2    = new THREE.Mesh( geometry2, material2 );
                    console.log(font);

                    dynamicTexture.texture.needsUpdate  = true;
                    mesh2.position.set(10, 10, 10);
                    scene.add( mesh2 );

                    dynamicTexture.drawText('Hello', 100, 300, 'black', 'bolder 90px helvetiker');


                });
            }

After that I can see rendered text texture on my geometry, but the font-family is still the default. And if I use Arial instead Helvetiker(or helvetiker) the rendered text become Arial.

I looked everywhere, but found only about TextGeometry solution. By the way I could load my font-family using TextGeometry loader. Can you help me? Thanks!

To use the Helvetiker font for drawing with it on a canvas, you have to have it installed in your system. Otherwise, you'll get the default font for your writings. — prisoner849, Nov 04 '16 at 17:04

score 1 · Accepted Answer · answered Nov 04 '16 at 17:20

1

Seems you mix up system fonts with three.js fonts.

helvetiker_bold.typeface.json has nothing in common with Helvetiker.ttf. It's intended to be used for TextGeometry. To draw with "Helvetiker" on a canvas, you have to add/install Helvetiker.ttf to the fonts on your system.

If you use it for yourself, it's okay if you find and install the font you need. But the other users, who don't have such font on their system, will see writings with the default font.

The solution is to find a font from standard system fonts which is more or less similar to Helvetiker (or the font you would like to use/see).

answered Nov 04 '16 at 17:20

prisoner849

16,894
4
34
68

really no way to solve the problem? Even something like @font-face? – Dima Nov 04 '16 at 17:56
to be honest, I see no problem to find a standard font which is similar to Helvetiker and use it. `dynamicTexture.drawText('Hello', 100, 300, 'black', 'bolder 90px Arial');` – prisoner849 Nov 04 '16 at 18:15
1

@DmitriyKirillov Have you tried using \@font-face with a Helvetica-like font file? I don't see any reason why that wouldn't work. (Please keep in mind that as prisoner849 says, the helvetiker-typeface.json file has absolutely nothing to do with ThreeX DynamicTexture or the specific problem you're trying to solve.) – msun Nov 04 '16 at 20:42

Change font-family for texture text in three.js

1 Answers1