React Three Fiber中Text Geometry修改参数后无法缩放的问题求助

问题根源 #

你代码里的FontLoader.load是异步加载方法，直接把它的返回值赋值给font时，这个变量初始是undefined。textGeometry初始化时用了未加载完成的字体，导致文本被渲染成极小的像素点。

修复方案 #

用React Three Fiber提供的useLoader钩子替代原生FontLoader.load，它会自动处理异步加载的状态，确保字体加载完成后再渲染文本：

1. 导入所需依赖：

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

extend({ TextGeometry });

2. 加载字体：

const font = useLoader(FontLoader, 'node_modules/three/examples/fonts/droid/droid_sans_bold.typeface.json');

3. 文本渲染代码保持原有参数即可：

<mesh position={[-170, 30, 0]}>
  <textGeometry 
    args={[
      "DP LAYER", 
      {
        font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelOffset: 0,
        bevelSegments: 5 
      }
    ]}  
  />
  <meshBasicMaterial color="red" />
</mesh>

额外排查点 #

如果修复后还是看不到文本，检查相机配置：

• 确保相机的视锥体（fov、near/far参数）包含文本位置
• 调整相机position，保证文本在相机可见范围内

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