CODEWITHSUNDEEP
javascriptthree.js
George Reason
George Reason

Reputation: 173

Three.js text rendering issues

I am currently working on a three.js project and we are running into issues loading fonts onto our text.

We are using TextGeometry object to render our fonts and the typeface js converter to add in our fonts.

Some fonts work great but others do not perform as expected with some letters not rendering correctly such as d's and o's.

This can be seen in the fiddle below, the font is loading the interior of some letters not the exterior.

http://jsfiddle.net/264jawhe/2/

Can anyone identify why this is happening and if there is a better method to display text possibly loading an html element?

Thanks in advance!

var textGeom = new THREE.TextGeometry("Video Dp", 
     {
      font: 'acknowledgement',
      weight: 'normal'
     });
var material2 = new THREE.MeshNormalMaterial();
var textMesh = new THREE.Mesh( textGeom, material2 );

scene.add( textMesh );

Upvotes: 1

Views: 582

Answers (2)

Akshay Mathur
Akshay Mathur

Reputation: 560

It is related to 'Direction of Paths' of type1 fonts.

Visit this . You can details about the bug with solution and a tool for using any font file for generating mesh.

Upvotes: 0

Saurabh Maun
Saurabh Maun

Reputation: 39

Please check the fiddle. Actually the issue is with your font style. I have just changed the font face and its working fine

Refer to this Jsfiddle

var textGeom = new THREE.TextGeometry("Video Dp", {
    font: 'optimer',
    weight: 'normal'
});
var material2 = new THREE.MeshNormalMaterial();
var textMesh = new THREE.Mesh(textGeom, material2);
scene.add(textMesh);

Upvotes: 1

Related Questions