三个 JS：我收到此错误 不支持的 OpenType 签名 <!DO

Question

我有一个三个 js 项目，我使用 parcel 作为模块捆绑器。我尝试使用三个 js TTFLoader 加载字体，但出现此错误。我在网上查过类似的问题，有人说这与字体的相对路径有关，但我认为事实并非如此。我不知道问题到底出在哪里

这是错误的快照

这是项目树：

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

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

---

这是代码和框： https://codesandbox.io/s/ Three-project-0hpqjr

---

我该如何解决这个问题？谢谢你

Answer 1

终于我找到了哪里做错了，这次我使用了三个FontLoader而不是TTFLoader，并且我使用了根项目目录的绝对路径。我将此添加到场景代码

this.scene.add(this.textMesh) 

内的回调函数中。对于字体，我使用了库提供的字体示例：

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

Answer 2

我发现链接到此堆栈跟踪的 vite 存在问题。 Vite 尝试使用 url 来解决依赖关系，因为它创建了一个服务器来共享依赖关系，而该服务器没有文件系统。 我用 import ttf 修复了这样的问题：

import FontName from './FontName.ttf';