2

I have been having fun working with threejs recently. To create a 2d text in threejs application I have to create a canvas, populate the canvas with the text and add the canvas as a texture. Like it is done in this example. http://stemkoski.github.io/Three.js/Texture-From-Canvas.html

For the text I am using a custom font and I have two options to embed the font to the application. using css3 @font-face or by including the font as a typeface javascript after converting in this site. http://typeface.neocracy.org/

I wish to know what additional disadvantages one has compared to the other in addition to the one I listed here.

using @font-face

using typeface

  • when fonts are converted to typeface files their sizes are growing more than twice.

Thanks in Advance.

Community
  • 1
  • 1
besabestin
  • 482
  • 8
  • 26

2 Answers2

2

If you are using fonts to draw into a canvas, like you say, and maybe use the same font in the rest of the page I would use @font-face as it really is the standard way and does not require a JavaScript encoding of a font.

But if you also want to be able to write 3D text into the scene using TextGeometry then you must use typeface.js

[ Example here: http://blog.andrewray.me/creating-a-3d-font-in-three-js/ ]

So it really depends, in my opinion on what other uses you make of that font..

  • Only "flat", as texture image, inside Three.js + maybe elsewhere in the rest of the HTML/App

    Use @font-face

  • Flat as texture image inside Three.js scene + also TextGeometry 3D text

    Use typeface.js

FrancescoMM
  • 2,845
  • 1
  • 18
  • 29
1

In order to use arbtirary fonts within Three.JS, first you must convert the font into a usable form e.g. a typeface javascript file by processing a .ttf file to http://typeface.neocracy.org/ .

Secondly, inspect the generated file (it might be easier to prettify it first by copy pasting it somewhere like http://www.jspretty.com/ ) and you are looking for 3 parameters towards the end of the file : "familyName" (which will become the "font" parameter, "cssFontStyle" (which will become the "style" parameters, and "cssFontWeight" (which will become the "weight" parameter).

Then you include the generated Javascript file on your page, and it will automatically be picked up by THREE.js when you call

new TextGeometry('my text here', { font : familyName_from_file, style : cssFontStyle_from_file, weight : cssFontWeight_from_file } );

which can then be encapsulated within a Mesh object and rendered in a Scene.

Craig Moore
  • 111
  • 1
  • Hello Craig Moore, Thanks for the response. I appreciate it. But if you notice carefully, my question was about comparing between using font-face and typeface js file in threejs application. – besabestin Feb 07 '15 at 16:58
  • Sorry besabestin, I must have completely misread your question. The typeface version of the font as a JS file is converted into a form that can be used by THREE.js, it is nothing to do with CSS as far as I am aware, you will still need to include it for use in CSS. – Craig Moore Feb 09 '15 at 17:38
  • No, I have done both ways... you can include the typeface js files or include by @font-face css3 property. In the css case the only thing you have to make sure is that the font be loaded before the page loads. So, you can either include the javascript fonts or the css fonts. my question was which should be better. – besabestin Feb 10 '15 at 10:46