为何Three.js场景无法添加文本？代码无误求排查

问题1：导入与使用的几何体不匹配 #

你代码里导入了TextGeometry，但实例化的却是TextBufferGeometry——这会导致TextBufferGeometry未定义的报错，因为你没有导入这个类。

修复方案二选一：

1. 修改导入语句，引入TextBufferGeometry：

   import { TextBufferGeometry } from 'three/examples/jsm/geometries/TextBufferGeometry.js';
   

2. 保持导入的TextGeometry，将实例化代码改为new TextGeometry(...)（推荐，和Three.js官方示例用法一致）。

问题2：文本与立方体位置重叠 #

文本默认位置是(0,0,0)，和你添加的立方体完全重合，导致被遮挡无法看见。

修复方案：
调整文本位置，比如移开立方体所在区域，或者给文本几何体重心居中后再调整位置：

const text = new THREE.Mesh(textGeometry, textMaterial);
textGeometry.center(); // 让文本自身居中
text.position.x = 2; // 移到立方体右侧，避免重叠
scene.add(text);

额外排查建议 #

• 给文本材质设置显眼颜色（比如红色），方便快速定位：

  const textMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
  

• 给字体加载添加错误回调，排查是否是字体文件加载失败：

  fontloader.load(
      'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json',
      (font) => { /* 成功回调逻辑 */ },
      () => {}, // 进度回调可选
      (err) => { console.error('字体加载失败：', err); }
  );
  

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