Overload resolution failed?

Questions
, , ,
1

image
image1703×171 11.1 KB

I am trying to render a TTF Font Loader on a Plane using Promise and converting it to Texture then on the index.js mapping it on a MeshBasicMaterial but gives me the above error

fontloader.js

const loader = new TTFLoader();
export default function loadFonts(url) {
  return new Promise(resolve => {
    let font = null;
    let text = 'three.js';
    let group, textMesh1, textMesh2, textGeo, material;
    loader.load(url, function(json) {
      font = new THREE.Font(json);
      textGeo = new THREE.TextGeometry(text, {
        font: font,
        size: 70,
        height: 0,
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false
      });
      textGeo.computeBoundingBox();
      textGeo.computeVertexNormals();
      const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
      textMesh1 = new THREE.Mesh(textGeo, material);
      textMesh1.position.x = centerOffset;
      textMesh1.position.y = 0;
      textMesh1.position.z = 0;
      textMesh1.rotation.x = 0;
      textMesh1.rotation.y = 0;
      var texture = new THREE.Texture(textMesh1);
      texture.needsUpdate = true;
      resolve(texture)
    });
  });
}

index.js

  async createBackground() {
    // const tex = await loadTexture("test.JPG");
    const tex = await loadFonts("/fonts/kenpixel.ttf");
    var material = new THREE.MeshBasicMaterial({
      map: tex
    })
    material.map.minFilter = THREE.LinearFilter;
    const quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(), material);
    quad.layers.set(1);
    quad.scale.set(this.vp.width, this.vp.height, 1);
    return quad;
  }

Im trying to refract the text created above on a 3D transparent object, I am successful when I create the text on plain canvas filltext but want to use three.js fontloader, please can anyone let me know what the error might be caused by?

Much help would be appreciated.

Thank you

2

Hey there,
it might be too late by now…
But I once had the same problem and solvedit by converting my TTF to a “typefont” json first.
Using this website e.g.: Facetype.js
Then load it using “FontLoader”.

Also note with some Fonts in the TextGeometry there might be some weird behaviour (like “NaN” values). I have set my “curveSegments” to “0.1”, which seems to fix this. But my Font doesnt have any curves… so you should play around with that.

3 
Promise.all([loadFonts(url)]).then(callbackFunction);