如何在Three.js中实现3D文本随明暗模式切换颜色？

1. 检查材质是否启用顶点颜色 #

曲线文本示例默认可能使用MeshBasicMaterial并开启了vertexColors: true，此时材质的color属性会被顶点颜色覆盖，导致修改无效。解决方式：

• 关闭顶点颜色，修改材质配置：

  const material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: false // 关键：禁用顶点颜色优先级
  });
  

2. 确保正确获取文本的材质对象 #

曲线文本通常是以Group形式存在，直接修改objectToCurve.material可能找不到实际渲染的Mesh材质。需要遍历子对象定位到Mesh：

function updateTextColor(textGroup, hexColor) {
  textGroup.traverse(child => {
    if (child.isMesh) {
      child.material.color.setHex(hexColor);
      child.material.needsUpdate = true; // 强制触发材质更新
    }
  });
}

// 调用示例：暗色模式下设置文本为深灰色
updateTextColor(objectToCurve, 0x333333);

3. 排查材质是否被克隆 #

如果创建文本时使用了clone()复制材质，修改原材质不会影响克隆后的实例。要确保修改的是文本Mesh实际使用的材质引用：

// 正确做法：保存克隆后的材质引用
const baseMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const textMaterial = baseMaterial.clone();
const textMesh = new THREE.Mesh(textGeometry, textMaterial);

// 后续直接修改textMaterial即可
textMaterial.color.setHex(0xff0000);
textMaterial.needsUpdate = true;

4. 强制触发材质更新 #

部分场景下修改颜色后Three.js不会自动刷新渲染，需手动标记材质需要更新：

child.material.color.setHex(0x00ff00);
child.material.needsUpdate = true;

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