Как конвертировать шрифт Google для использования с ThreeJS

Я предполагаю, что вы проверили все способы устранения неполадок, такие как путь, импорт, преобразование шрифта, структуру json…

Используя популярный онлайн-конвертер, я получаю:

Совершенно необычно, вы загружаете этот шрифт с помощью парсинга, я редко сталкиваюсь с таким способом, возможно там проблема, я не уверен.

В любом случае, попробуйте этот подход.

import { TextGeometry } from "https://esm.sh/three/addons/geometries/TextGeometry.js";
import { FontLoader } from "https://esm.sh/three/addons/loaders/FontLoader.js";

//…

const loader = new FontLoader();
loader.load(
    'https://esm.sh/@compai/font-lato/data/typefaces/normal-900.json',
    function (font) {
        const textGeometry = new TextGeometry("Hiii", {
            font: font,
            size: 2,
            height: 0.2,
        });
        const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.set(-2, 0, 0);
        scene.add(textMesh);
    }
);

https://codepen.io/Lucas_Mas/pen/xxMoPwq

Здесь у вас есть все шрифты:

https://github.com/comComponents-ai/typefaces/tree/main/packages

ОБНОВЛЕНИЕ 0

Если бы мне пришлось догадываться, то проблема кроется в расположении этого шрифта в вашем дереве... Потому что если бы вы сделали как в моем примере и скачали этот шрифт в готовый json или сконвертировали его здесь http://gero3 .github.io/facetype.js/ то, возможно, что-то не так с местоположением. Что касается бандлера, то я использую Vite.

threejs-vite-project/
├── node_modules/
├── src/
│   ├── index.html
│   ├── app.js
│   └── style.css
├── static/
│   └── font/
│       └── latoSans.json
├── package-lock.json
├── package.json
└── vite.config.js

Убедитесь, что ваш файл vite.config.js (если вы используете этот) правильно настроен для обслуживания статического каталога.

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist'
  },
  publicDir: '../static'
});

И тогда путь должен выглядеть так:

const loader = new FontLoader();
loader.load(
  '/static/font/latoSans.json',
  function (font) {
    const textGeometry = new TextGeometry("Hiii", {
      font: font,
      size: 2,
      height: 0.2,
    });

Тогда импорт должен выглядеть так

import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

ОБНОВЛЕНИЕ 1

1. Я не знаю, как называется шрифт, но убедитесь, что у вас есть соответствующее расширение .typeface.json - вы написали, что скачали этот шрифт из пакетов по моей ссылке. По умолчанию шрифты оттуда не имеют этого расширения.
2. Если вы оставите имя шрифта по умолчанию, попробуйте изменить его assetsInclude: ['**/*.json']
3. Дважды проверьте путь publicDir (особенно путь)
4. Дважды проверьте импорт, особенно экспорт, потому что вы уже успешно импортировали этот шрифт раньше.

ОБНОВЛЕНИЕ 2

Попробуйте этот подход

Проект А1

Дерево

project-Threejs-Vite
├── dist
│   ├── krypton-logo-threejs.es.js
│   ├── krypton-logo-threejs.umd.js
│   ├── lato-bold.json
├── lib
│   └── main.ts
├── node_modules
├── static
│   └── lato-bold.json
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── style.css
└── tsconfig.json

Вите

const path = require('path');
const { defineConfig } = require('vite');

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'lib/main.ts'),
      name: 'logo-threejs',
      fileName: (format) => `logo-threejs.${format}.js`
    }
  },
  publicDir: './static',
  assetsInclude: ['**/*.json'],
});

Проект А2

Дерево

project-B2
├── dist
├── lib
├── node_modules
├── public
│   └── lato-bold.json
├── src
│   └── main.js
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── style.css
└── vite.config.js

Вите

import { defineConfig } from 'vite';

export default defineConfig({
  publicDir: './public',
  assetsInclude: ['**/*.json'],
});

Шрифт существует…

УБЕДИТЕСЬ, что папки содержат этот шрифт. Потому что это обычная проблема Vite: например, статические файлы (glb и т. д.) приходится перемещать вручную.

Путь проекта A2

const loader = new FontLoader();
loader.load('/public/lato-bold.json', …

Абсолютный путь

Если описанные выше действия не помогли, попробуйте установить абсолютный путь от public.

const aPath = '/lato-bold.json';
const loader = new FontLoader();
loader.load(aPath, …

ОБНОВЛЕНИЕ 3

Я так не думаю, что ts как-то связано не с загрузкой шрифтов, а скорее с расширениями и файлами в целом. Но мало ли…

Попробуйте установить "resolveJsonModule": true, потому что по умолчанию отключено.

И кстати, что говорит о сетевых запросах devtools или какой-нибудь подсказке в консоли?