使用@react-three/fiber时TextGeometry报yMax未定义错误

问题根源 #

从错误栈能直接定位到：FontLoader.js里的createPaths方法尝试读取yMax时，目标对象是undefined。本质是初始化TextGeometry时传入的font参数不是有效的Three.js Font对象——要么字体没加载完成，要么文件路径错误，甚至直接传了undefined。

修复步骤 #

1. 正确加载字体文件 #

TextGeometry必须依赖Three.js的Font对象，需先通过FontLoader加载官方提供的字体JSON文件（比如helvetiker_regular.typeface.json，可从Three.js examples的fonts目录获取）。在react-three/fiber中用useLoader钩子实现最便捷：

import { useLoader } from '@react-three/fiber';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';

function My3DText() {
  // 字体文件需放在项目静态资源目录（如public/fonts），路径要匹配
  const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json');
  
  return (
    <mesh>
      <textGeometry args={['你好', { font, size: 0.5 }]} />
      <meshBasicMaterial color="#fff" />
    </mesh>
  );
}

2. 用Suspense处理异步加载 #

字体加载是异步操作，直接渲染会因资源未就绪触发错误，用React的Suspense组件包裹文本逻辑，添加加载占位：

import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      <Suspense fallback={<mesh><boxGeometry /><meshBasicMaterial color="#ccc" /></mesh>}>
        <My3DText />
      </Suspense>
    </Canvas>
  );
}

3. 点击渲染时确保字体已就绪 #

针对你点击蓝色场景生成文本的需求，不要等点击才加载字体，提前在组件初始化阶段完成加载，点击仅负责切换显示状态：

import { useState } from 'react';
import { useLoader } from '@react-three/fiber';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';

function ClickableScene() {
  const [showText, setShowText] = useState(false);
  // 提前加载字体，避免点击时才触发加载导致的错误
  const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json');

  return (
    <>
      {/* 点击平面触发文本显示 */}
      <mesh onClick={() => setShowText(true)}>
        <planeGeometry args={[10, 10]} />
        <meshBasicMaterial color="#2196f3" />
      </mesh>
      {/* 字体就绪后再渲染文本 */}
      {showText && (
        <mesh position={[0, 0, 0.1]}>
          <textGeometry args={['已点击', { font, size: 1 }]} />
          <meshBasicMaterial color="#fff" />
        </mesh>
      )}
    </>
  );
}

避坑提醒 #

• 绝对不能给TextGeometry的font参数传undefined，必须是加载完成的Font对象。
• 字体文件要放在项目静态资源目录（如public），否则会出现404加载失败。
• 如果使用@react-three/drei封装的Text组件，同样要确保font属性传入正确的Font对象。

内容的提问来源于stack exchange，提问作者paq