How can I have smoother text geometry? (first codepen experiment)

Questions
,
1

This is my first three.js experiment, and I can’t seem to get my text to be smoother when rotated. Here are the things I tried with no luck. Here’s what I mean:

44%20AM

  1. I tried different font files. They all don’t give me that pixelation when text is rotated.
  2. I also tried placing the light in different positions, with no luck too.

Link to codepen: https://codepen.io/j_theislander/pen/KbebKb
I don’t know how to approach fixing this so I would appreciate any pointers.

2

Hi!
Try to do this:

  1. Set renderer’s antialias to true: var renderer = new THREE.WebGLRenderer({antialias: true});
  2. Swap the values of the last two parameters of the camera. Now it is:
var camera = new THREE.OrthographicCamera (
  window.innerWidth  / - 0.5,
  window.innerWidth  / 0.5,
  window.innerHeight / 0.5,
  window.innerHeight / - 0.5,
  4000,
  1000 );

so make it lilke this:

var camera = new THREE.OrthographicCamera (
  window.innerWidth  / - 0.5,
  window.innerWidth  / 0.5,
  window.innerHeight / 0.5,
  window.innerHeight / - 0.5,
  1000, // swap this value
  4000 ); //and this value

instead.

2 Likes
3

Hooray! Thanks a lot @prisoner849. It worked.

4

@j-theislander
You’re welcome :slight_smile: :beers: