ThreeJS Font Vercel 错误：无法加载资源：/static/helvetiker_regular.typeface.json:1 服务器响应状态为 404 ()

Question

我正在测试 THREEJS TextGeometry 功能，我已经用它创建了一个 3D 文本，它在本地主机上运行得非常好，但是当我部署到 Vercel 时，我收到了上述错误。

下面是App.jsx文件代码，三个.js文件包含所有THREEJS代码：

App.jsx代码

import './App.css'
import './three.js'

function App() {

  return (
    <>
      <canvas className="webgl"></canvas>
    </>
  )
}

export default App

下面是代码片段，其中存在错误

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";

loader.load(
    "../static/helvetiker_regular.typeface.json",
      function (font) {
      const geometry = new TextGeometry("Hello three.js!", {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 5,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 4,
      });

      geometry.center();

      const material = new THREE.MeshNormalMaterial();

      const text = new THREE.Mesh(geometry, material);
      scene.add(text);
    }
  );

I tried changing the location of the font file, but still it didn't work. By the way, the font is a JSON file. I have attached the relevant screenshots of the file structure, and also the screenshot of the console error that I get after deploying on Vercel

Answer 1

创建

FontLoader

的实例

const loader = new FontLoader();

修改您的文件夹树（尝试在

static

文件夹

fonts

之后添加并扔在那里 .json 并设置此路径：

"/fonts/helvetiker_regular.typeface.json"