troika-three-text: Unable to render text

[ajmas]

I am currently trying to using the troiker-three-text package, to render text, but I am not getting anything outputted. My project was originally written to use font.createShapeGeometry(), but I am looking at troiker-three-text to be able to render texts such as those written in Arabic.

My project: https://github.com/ajmas/extended-svg-threejs/tree/use-troika-three-text

The code I am trying to get working with troiker-three-text:

function createTextObject3d (textElement: SVGTextElement, options: createTextObject3dOptions = {}) {
  const group = new Group();

  const z = 0.1;
  const defaultFontSize = 10;
  const defaultFontFamily = 'Roboto';
  const defaultFontWeight = 'normal';
  const defaultFillColor = 0x000000;

  const fontFamily = getStyleValue(textElement, 'font-family') as string ?? options.fontFamily ?? defaultFontFamily;
  const fontSize = textSizeToPx(getStyleValue(textElement, 'font-size') as string) ?? options.textSize ?? defaultFontSize;
  const fontWeight = getStyleValue(textElement, 'font-weight') as string ?? options.fontWeight ?? defaultFontWeight;
  const fillColorStr = (getStyleValue(textElement, 'fill') as string); // ?? options.fill ?? defaultFillColor;
  const fillColor = fillColorStr ? parseColor(fillColorStr) : (options.fill ?? defaultFillColor) ;

  const xValues = Array.from(textElement.x.baseVal).map(entry => entry.value);
  const yValues = Array.from(textElement.y.baseVal).map(entry => entry.value);

  let transformations: SVGTransform[] = [];
  if (textElement.transform) {
    transformations = Array.from(textElement.transform.baseVal);
  }

  if (textElement.children?.length > 0) {
    const children = textElement.children;
    for (let i = 0; i < children.length; i++) {
      const textMesh = createTextObject3d(children[i] as SVGTextElement, {
        fill: fillColor,
        fontFamily,
        fontWeight,
        textSize: fontSize
      });
      if (textMesh) {
        group.add(textMesh);
      }
    }


    transformAndPositionText(group, 0, 0, z, transformations);

    return group;
  } else {
    let texts: string[] = [];
    if (xValues.length === 1) {
      texts.push(textElement.textContent);
    } else {
      texts = textElement.textContent.split('');
    }

    for (let i = 0; i < xValues.length; i++) {
      const x = xValues[i];
      const y = yValues[0];

      const textObj = new Text();

      // textObj.font = '/fonts/Arial Unicode MS-Regular.otf';
      textObj.text = texts[i];
      textObj.size = fontSize * 0.7;
      textObj.color = fillColor;
      textObj.weight = fontWeight;

      textObj.position.set(x, y, z);

      textObj.sync();

      group.add(textObj);
    }
  }

  return group;
}

My original code, which was using font.createShapeGeometry():

function createTextObject3d (textElement: SVGTextElement, options: createTextObject3dOptions = {}) {
  const group = new Group();

  const z = 0.1;
  const defaultFontSize = 10;
  const defaultFontFamily = 'Roboto';
  const defaultFontWeight = 'normal';
  const defaultFillColor = 0x000000;

  const fontFamily = getStyleValue(textElement, 'font-family') as string ?? options.fontFamily ?? defaultFontFamily;
  const fontSize = textSizeToPx(getStyleValue(textElement, 'font-size') as string) ?? options.textSize ?? defaultFontSize;
  const fontWeight = getStyleValue(textElement, 'font-weight') as string ?? options.fontWeight ?? defaultFontWeight;
  const fillColorStr = (getStyleValue(textElement, 'fill') as string); // ?? options.fill ?? defaultFillColor;
  const fillColor = fillColorStr ? parseColor(fillColorStr) : (options.fill ?? defaultFillColor) ;

  const xValues = Array.from(textElement.x.baseVal).map(entry => entry.value);
  const yValues = Array.from(textElement.y.baseVal).map(entry => entry.value);

  let transformations: SVGTransform[] = [];
  if (textElement.transform) {
    transformations = Array.from(textElement.transform.baseVal);
  }

  if (textElement.children?.length > 0) {
    const children = textElement.children;
    for (let i = 0; i < children.length; i++) {
      const textMesh = createTextObject3d(children[i] as SVGTextElement, {
        fill: fillColor,
        fontFamily,
        fontWeight,
        textSize: fontSize
      });
      if (textMesh) {
        group.add(textMesh);
      }
    }


    transformAndPositionText(group, 0, 0, z, transformations);

    return group;
  } else {

    const material = new LineBasicMaterial({
      color: fillColor,
      side: DoubleSide
    });

    const font = getFont(fontFamily, fontWeight);

    if (!font) {
      return;
    }

    let texts: string[] = [];
    if (xValues.length === 1) {
      texts.push(textElement.textContent);
    } else {
      texts = textElement.textContent.split('');
    }

    for (let i = 0; i < xValues.length; i++) {
      const text = texts[i];
      const x = xValues[i];
      const y = yValues[0];

      const shapes = font.generateShapes(text, fontSize * 0.7);

      const geometry = new ShapeGeometry(shapes);

      geometry.computeBoundingBox();

      if (!geometry.boundingBox) {
        return;
      }

      const textMesh = new Mesh(geometry, material);

      const scale = new Vector3(1, 1, 1);
      scale.y = scale.y * -1;
      textMesh.scale.multiply(scale);

      textMesh.position.set(x, y, z);

      group.add(textMesh);
    }
  }

  return group;
}

[lojjic]

Are you able to render a single Text instance with static properties?

[ajmas]

It doesn't seem to change anything, with the following

const textObj = new Text();

textObj.text = 'Good morning';
textObj.size = 10;
textObj.color = 0x000000;
textObj.weight = 'normal';

textObj.position.set(0, 0, 1);

textObj.sync();
scene.add(textObj);

What I do see in the console:

unsupported GPOS table LookupType 8 format 2     41df8a72-3b66-45bb-9dca-49d0856b9cb8:514 
unsupported GPOS table LookupType 5 format 1     41df8a72-3b66-45bb-9dca-49d0856b9cb8:514       
unsupported GSUB table LookupType 6 format 2     41df8a72-3b66-45bb-9dca-49d0856b9cb8:602
unsupported GSUB table LookupType 6 format 1     41df8a72-3b66-45bb-9dca-49d0856b9cb8:602 

This is without preloading.

I did also try preloading the fonts, but that didn't change anything:

async function loadFonts () {
  for (let i = 0; i < fontsToLoad.length; i++) {
    await new Promise((resolve) => preloadFont({ font: fontsToLoad[i].url }, () => resolve(undefined)));
  }
}

async function  init () {
  await loadFonts();

  // omitted code to set up scene

  const textObj = new Text();
  textObj.font =  fontsToLoad[0].url;
  textObj.text = 'Good morning';
  textObj.size = 10;
  textObj.color = 0x000000;
  textObj.weight = 'normal';

  textObj.position.set(0, 0, 1);

  textObj.sync();
  scene.add(textObj);

  // omitted code to do the render
}

Versions:

• troika-three-text: 0.52.4
• three: 0.181.0

Running in Chrome on macOS

[lojjic]

Hard to help. The console warnings are expected and harmless. size isn't a supported property, neither is weight.

[ajmas]

I've created a sample project, with just the essential troika-three-text related code and it seems to be working, so I'll need to dig into my main project to see why it is not rendering as expected. The only question I have now is how do specify the font family name, such that it uses one of the Google fonts?

BTW my working sample, as a reference:

import { Cache, WebGLRenderer, Scene, PerspectiveCamera, Color, GridHelper } from 'three';
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import { Text } from 'troika-three-text';

Cache.enabled = true;

let renderer: WebGLRenderer | undefined;
let scene: Scene | undefined;
let camera: PerspectiveCamera | undefined;

function render () {
  if (scene && camera && renderer) {
    renderer.render(scene, camera);
  }
}

function initScene (containerSelector: string) {
  const container = document.querySelector(containerSelector);
  if (!container) {
    throw new Error(`Could not find container ${containerSelector}`);
  }

  camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 0, 200);

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', render);
  controls.screenSpacePanning = true;

  window.addEventListener('resize', () => {
    if (camera && renderer) {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);
      render();
    }
  });

  scene = new Scene();
  scene.background = new Color(0xb0b0b0);

  const gridHelper = new GridHelper(3060, 50, 0x0000aa, 0x00aa00);
  scene.add(gridHelper);

  const textObj = new Text();

  textObj.text = 'Hello world!'
  textObj.fontSize = 12;
  textObj.color = 0x000000;
  textObj.fontWeight = 'normal';
  scene.add(textObj);

  textObj.position.set(0, 0, 1);

  render();
}

document.addEventListener('DOMContentLoaded', async () => {
  try {
    initScene('#app');
  } catch (error) {
    console.log(error)
  }
});

[lojjic]

For the Google fonts, there's no built-in font name resolution, but you can try using this script to get a .woff URL for a Google font: https://github.com/protectwise/troika/blob/main/packages/troika-three-text/find-google-font-url.js (haven't used it in a while so can't guarantee it still works)

[ajmas]

Thanks.

One final thing, I am finding the text doesn't quite seem to get align in the same way as when I use the ShapeGeometry approach. Is there anything I need to take into account here?

With Torika Three Text:

Without:

Update: playing around a bit show that a negative lineHeight resolve the issue for me:

textObj.lineHeight = -1;

Finally now need to see why my Wingdings based text is not rendering, where I get No font coverage for U+f0ab .... aa5f0a66-c05e-40a3-acda-49177d4995c4:137.

[lojjic]

You probably want anchorX/anchorY to control alignment?

[ajmas]

I tried that, but I am having more success with lineHeight = -1. Right now its good enough for what I need, even if it isn't necessarily the right solution.