未捕获的 SyntaxError Three.js FontLoader

rga*_*rah 3 javascript three.js

我尝试在 Three.js 中使用 FontLoader 创建 3D 文本,但出现错误。

我使用 Three.js r99。

  const loader = new THREE.FontLoader();

  //https://github.com/mrdoob/three.js/tree/dev/examples/fonts
  loader.load("./fonts/helvetiker_regular.typeface.json", function(font) {
    const textGeometry = new THREE.TextGeometry("Hello!", {
      font: font,
      size: 20,
      height: 5,
      curveSegments: 12
    });
    const material = new THREE.MeshNormalMaterial();
    const textMesh = new THREE.Mesh(textGeometry, material);
    scene.add(textMesh);
  });
Run Code Online (Sandbox Code Playgroud)

Chrome 开发者工具的输出如下。

THREE.FontLoader: typeface.js support is being deprecated. Use typeface.json instead.
VM5770:1 Uncaught SyntaxError: Unexpected token T in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.onLoad (three.module.js:39064)
    at XMLHttpRequest.<anonymous> (three.module.js:33974)
Run Code Online (Sandbox Code Playgroud)

而 VM 5770(?) 似乎指向 index.html 的内容。“T”似乎是T的

<meta charset = "UTF-8" />.
Run Code Online (Sandbox Code Playgroud)

我不知道发生了什么。有任何想法吗?

rga*_*rah 7

我解决了这个问题。原因是 Parcel,而不是 Three.js。将 json 文件复制到 dist 目录工作完美。