如何在react中使用three.js 提供的字体_three.min.js:6 three.fontloader has been moved to

参考 stackoverflow.com-textgeometry-of-three-js-with-react-not-working
遇到问题

应该是文件路径有问题

解决方法 使用loader的parse功能 直接提供字体json对象

import fontJSON from "three/examples/fonts/helvetiker_bold.typeface.json";

const fontLoad = new FontLoader();
const font = fontLoad.parse(fontJSON);
1
2
3
4

或者

const fontPath = require("../assets/gentilis_bold.typeface.json");
console.log(fontPath);
const font = fontLoad.parse(fontPath);
1
2
3

将ttf转 json https://gero3.github.io/facetype.js/

按需提取所需文字 可搜索 sfnttool.jar 使用

import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";

const fontLoad = new FontLoader();
      const fontPath = require("../assets/gentilis_bold.typeface.json");
      console.log(fontPath);

      const font = fontLoad.parse(fontPath);
      console.log("font:", font);
      if (font) {
        const geometry = new TextGeometry("Hello World", {
          font,
          size: 1,
          height: 1,
        });

        const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
        const text = new THREE.Mesh(geometry, material);
        text.position.x = 1;
        scene.add(text);
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21