如何在ThreeJS中动态修改TextGeometry的文本内容？

嘿，这个问题我熟！ThreeJS里的TextGeometry一旦创建完成，它的几何体数据就固定下来了，没法直接修改文本内容——得换个思路来实现动态更新，我给你捋捋具体怎么做：

核心思路 #

因为TextGeometry是基于文本内容生成的几何体，每次文本变化都需要重新生成几何体，同时要清理旧的资源避免内存泄漏。另外，一定要复用提前加载好的字体，别每次修改都重新加载字体文件，不然会很慢还浪费资源。

具体实现步骤 #

1. 提前加载并保存字体

先把字体加载逻辑抽出来，把加载好的字体存在全局变量里，后续创建文本时直接复用：

let loadedFont; // 全局变量保存加载完成的字体
let textMesh; // 保存当前的文本网格对象
let textMaterial; // 保存复用的材质（可选，优化性能）

// 初始化加载字体
const fontLoader = new THREE.FontLoader();
fontLoader.load("/assets/fonts/helvetiker_bold.typeface.json", function (font) {
  loadedFont = font;
  // 首次创建初始文本
  createTextMesh("初始文本内容");
});

2. 封装创建文本的函数

这个函数负责创建/更新文本网格，会自动清理旧的资源：

function createTextMesh(textContent) {
  // 如果已有旧的文本网格，先移除并清理资源
  if (textMesh) {
    current_scene.remove(textMesh);
    textMesh.geometry.dispose(); // 释放旧几何体的内存
    // 如果材质不需要更换，这里不用dispose材质
  }

  // 创建新的TextGeometry
  const textGeometry = new THREE.TextGeometry(textContent, {
    size: 200,
    height: 2,
    curveSegments: 3,
    font: loadedFont,
  });
  textGeometry.center(); // 可选：让文本居中，避免位置偏移

  // 复用材质（如果不需要修改颜色等属性）
  if (!textMaterial) {
    const color = new THREE.Color("#ff0000"); // 替换成你需要的颜色
    textMaterial = new THREE.MeshBasicMaterial({ color: color });
  }

  // 创建新的文本网格并添加到场景
  textMesh = new THREE.Mesh(textGeometry, textMaterial);
  textMesh.name = "2D Text 1";
  current_scene.add(textMesh);
}

3. 调用更新函数修改文本

当你需要修改文本时，直接调用这个函数就行：

function updateText(newText) {
  // 先判断字体是否加载完成
  if (!loadedFont) {
    console.warn("字体还没加载完成，请稍等！");
    return;
  }
  createTextMesh(newText);
}

// 举个例子：点击按钮时修改文本
document.querySelector("#changeTextBtn").addEventListener("click", () => {
  updateText("新的文本内容");
});

额外优化建议 #

• 如果只是需要2D文本（不需要厚度），可以考虑用CanvasTexture：把文本画在Canvas上，然后把Canvas作为纹理贴在PlaneGeometry上。这种方式修改文本只需要重绘Canvas，不用重新生成几何体，性能更优。
• 要是需要频繁修改文本，尽量复用材质和其他不变的属性，减少不必要的对象创建。

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