三个 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

我有一个 three.js 项目，我使用parcel作为模块捆绑器。 我尝试使用三个 js TTFLoader加载字体，但出现此错误。 我在inte.net上查过类似的问题，有人说是跟字体的相对路径有关，我觉得不是。 我不知道问题到底出在哪里

这是错误的快照

这是项目树：

这是包含错误的代码的一部分：

应用程序.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);

---

这是codesandbox： https://codesandbox.io/s/three-project-0hpqjr

---

我怎么解决这个问题？ 谢谢

Answer 1

最后我弄清楚了哪里做错了，这次我使用三个FontLoader而不是 TTFLoader，并且我使用根项目目录的绝对路径。 我将此添加到场景代码this.scene.add(this.textMesh)中的回调 function 中。对于字体，我使用了库提供的字体示例： 'node_modules/three/examples/fonts/helvetiker_regular.typeface.json'它使用绝对路径

这是代码：

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);
  },
);

但是如果要加载.ttf字体，你可以只使用TTFLoader加载字体和FontLoader.parse()来解析json，因为它将.ttf字体转换为json所以你需要解析它才能使用它

这是代码：

 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);
 });