三个 JS：我收到此错误不支持的 OpenType 签名<!--DO</div--><div id="text_translate"><p> 我有一个 three.js 项目，我使用<strong>parcel</strong>作为模块捆绑器。 我尝试使用三个 js <strong>TTFLoader</strong>加载字体，但出现此错误。 我在inte.net上查过类似的问题，有人说是跟字体的<strong>相对路径</strong>有关，我觉得不是。 我不知道问题到底出在哪里</p><p><strong>这是错误的快照</strong><a href="https://i.stack.imgur.com/v8OC7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v8OC7.jpg" alt="在此处输入图像描述"></a></p><p> <strong>这是项目树：</strong></p><p> <a href="https://i.stack.imgur.com/fFKA9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fFKA9.jpg" alt="在此处输入图像描述"></a></p><p> <strong>这是包含错误的代码的一部分：</strong></p><p> <strong>应用程序.js</strong></p><pre> // load font -- three font const ttfLoader = new TTFLoader(); ttfLoader.load('fonts/Mont-Regular.ttf', (json) => { const font = new FontLoader(json); this.textGeo = new TextGeometry('Hello Text', { font: font, size: 200, height: 50, curveSegments: 12, }); this.textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, side: THREE.DoubleSide, }); this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial); this.textMesh.position.set(0, 0, 0); }); this.scene.add(this.textMesh);</pre><hr><p> <strong>这是codesandbox：</strong> <a href="https://codesandbox.io/s/three-project-0hpqjr" rel="nofollow noreferrer">https://codesandbox.io/s/three-project-0hpqjr</a></p><hr><p> 我怎么解决这个问题？ 谢谢</p></div>

Question

I have a three.js project, and I use parcel as module bundler. I try to load a font with THREE js TTFLoader but I get this error. I've looked up similar problem on the inte.net, some says that it has something to do with the relative path of the font, but I think it doesn't. I don't know where the problem actually is

Here is the snapshot of the error

Here is the project tree:

Here is part of the code that contains error:

app.js

// load font -- three font
const ttfLoader = new TTFLoader();

ttfLoader.load('fonts/Mont-Regular.ttf', (json) => {
   const font = new FontLoader(json);

   this.textGeo = new TextGeometry('Hello Text', {
      font: font,
      size: 200,
      height: 50,
      curveSegments: 12,
   });

   this.textMaterial = new THREE.MeshPhongMaterial({
      color: 0xff0000,
      side: THREE.DoubleSide,
   });

   this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
   this.textMesh.position.set(0, 0, 0);
});

this.scene.add(this.textMesh);

---

Here is the codesandbox: https://codesandbox.io/s/three-project-0hpqjr

---

How can I solve this problem? Thankyou

Answer 1

Finally I've figured out Where I did wrong, this time I use THREE FontLoader instead of TTFLoader, and I use absolute path from the root project directory. I put this add to scene code this.scene.add(this.textMesh) inside the callback function. For the font, I used font example provided by the library: 'node_modules/three/examples/fonts/helvetiker_regular.typeface.json' and it uses absolute path

Here is the code:

const fontLoader = new FontLoader();
fontLoader.load(
  'node_modules/three/examples/fonts/helvetiker_regular.typeface.json',
   (Helvfont) => {
     // const font = fontLoader.parse(json);

    this.textGeo = new TextGeometry('Yeah', {
      font: Helvfont,
      size: 0.2,
      height: 0,
      // curveSegments: 12,
    });

    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
  },
);

But if want to load the.ttf font, you can just use TTFLoader to load the font and FontLoader.parse() to parse the json, because it converts.ttf font to json so you need to parse it before you can use it

Here is the code:

 const ttfLoader = new TTFLoader();
 const fontLoader = new FontLoader();

 ttfLoader.load('src/fonts/Mont-Regular.ttf', (json) => {
    const MontFont = fontLoader.parse(json);

    this.textGeo = new TextGeometry('Yeah', {
      font: MontFont,
      // font: Helvfont,
      size: 0.2,
      height: 0,
      // curveSegments: 12,
    });

    // this.textMaterial = new THREE.MeshPhongMaterial({
    //   color: 0xff0000,
    //   side: THREE.DoubleSide,
    // });
    this.textMaterial = new THREE.MeshNormalMaterial();
    this.textMesh = new THREE.Mesh(this.textGeo, this.textMaterial);
    this.textMesh.position.set(-0.5, 0.5, 0);
    this.scene.add(this.textMesh);
 });