Implementing font texture atlas with json data in three.js

Questions
1

Hi everyone. I have a json file containing data about a font that’s essentially a .png file with all the letters on it. The data inside the json looks something like this:

{
  "kerning": 2,
  "height": 21,
  "baseline": 4,
  "glyphs": {
    "A": [0, 2, 17, 14, 0],
    ...
}

The data inside glyph comes in this format: letter: [x, y, width, height, baseline offset] (all this data represents pixel values).

What I’m wondering is, is there any way I could make use of this info to make three.js render that part of the texture so I could effectively use that .png file as a font? I’ve looked into texture.offset but am not sure how to translate it to my current situation. Any help is appreciated, thanks!

2

I managed to get it somewhat working with the following code:

  colorTexture.wrapS = colorTexture.wrapS = RepeatWrapping;
  colorTexture.repeat.set(
    letterData[2] / 256,
    letterData[3] / 136 + letterData[4] / 136
  );

  colorTexture.offset.x = letterData[0] / 256;
  colorTexture.offset.y =
    lineYOffsets[getLineNum(props.letter)] - letterData[4] / 136;

where letterData is the array provided for each glyph. What’s left to figure out is the y offset, for which I temporarily use hand-picked values.