Three.js场景中TextGeometry无法显示问题求助

一、字体路径问题排查 #

• 确认文件层级：检查fonts/helvetiker_regular.typeface.json是否与项目入口HTML文件（如index.html）处于同一层级的fonts文件夹下。若入口文件在子目录（如src），需调整路径为../fonts/helvetiker_regular.typeface.json。
• 绝对路径测试：暂时将字体文件移到项目根目录，直接使用helvetiker_regular.typeface.json作为路径，排除相对路径的层级干扰。
• 本地服务器运行：直接通过file://协议打开HTML文件会触发跨域限制，导致字体加载失败。建议用本地服务器启动项目，比如执行npx serve命令。

二、代码补全与修正 #

你当前的代码仅创建了TextGeometry，但未生成网格对象、绑定材质，也未将其添加到场景中，同时缺少错误回调用于排查加载问题。以下是完整的修正代码：

// 假设已初始化scene、camera、renderer实例，且立方体网格变量为cubeMesh
const loader = new THREE.FontLoader();

loader.load('fonts/helvetiker_regular.typeface.json', 
  function (font) {
    // 创建文本几何体
    const textGeometry = new THREE.TextGeometry('Cube Face', {
      font: font,
      size: 80,
      height: 5,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 10,
      bevelSize: 8,
      bevelOffset: 0,
      bevelSegments: 5
    });

    // 创建文本材质
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    // 生成文本网格
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);

    // 调整文本位置，避免与立方体重叠
    textMesh.position.copy(cubeMesh.position);
    textMesh.position.x += 150; // 根据立方体尺寸调整偏移量

    // 居中文本几何体，避免位置偏移
    textGeometry.center();

    // 将文本添加到场景
    scene.add(textMesh);
  },
  // 加载进度回调（可选）
  function (xhr) {
    console.log(`${(xhr.loaded / xhr.total * 100).toFixed(1)}% loaded`);
  },
  // 加载错误回调，用于排查路径问题
  function (error) {
    console.error('字体加载失败:', error);
  }
);

额外注意事项 #

• 模块化导入验证：若使用ES模块化引入Three.js，需单独导入对应模块：

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

• 适配立方体尺寸：根据你创建的BoxGeometry大小，调整文本的size和position参数，避免文本过大或与立方体重叠。

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