Forge Viewer中如何在Mesh上添加文字？内置THREE.js无FontLoader/Font

方法一：预生成文字几何体（适合3D文字需求） #

Forge Viewer内置的THREE.js裁剪了TextGeometry和Font相关类，我们可以先在本地用完整THREE.js生成文字的几何体JSON，再在Viewer中加载使用：

1. 本地生成几何体JSON
   用完整版本的THREE.js（比如最新稳定版）执行以下代码，导出文字几何体的JSON：

   // 本地环境运行
   import * as THREE from 'three';
   import { FontLoader } from 'three/addons/loaders/FontLoader.js';
   
   async function generateTextGeoJson() {
     const font = await new FontLoader().load('path/to/your/font.typeface.json');
     const textGeometry = new THREE.TextGeometry('你的文字', {
       font: font,
       size: 10,
       height: 1,
       curveSegments: 12,
       bevelEnabled: false
     });
     console.log(JSON.stringify(textGeometry.toJSON()));
   }
   generateTextGeoJson();
   

2. 在Forge Viewer中加载使用
   将上面输出的JSON复制到项目中，通过BufferGeometry.fromJSON加载并创建Mesh：

   // Forge Viewer 代码
   const preGeneratedTextGeoJson = {/* 预生成的几何体JSON */};
   const textGeometry = new THREE.BufferGeometry().fromJSON(preGeneratedTextGeoJson);
   const textMesh = new THREE.Mesh(
     textGeometry,
     new THREE.MeshBasicMaterial({ color: 0xffffff })
   );
   
   // 调整文字Mesh的位置、旋转，使其贴合目标Mesh
   textMesh.position.set(0, 5, 0); // 根据实际需求调整
   textMesh.rotation.copy(mesh.rotation); // 同步目标Mesh的旋转
   
   mesh.add(textMesh);
   this.viewer.impl.addOverlay(AreaOverlay, mesh);
   

方法二：使用HTML标签叠加文字（快速实现，2D始终面向镜头） #

如果不需要3D文字的立体效果，直接用HTML标签实现更简单，通过坐标转换将3D位置映射到屏幕坐标：

// 创建文字标签工具函数
function createTextLabel(text, worldPosition, viewer) {
  const label = document.createElement('div');
  label.style.cssText = `
    position: absolute;
    color: #ffffff;
    font-size: 14px;
    pointer-events: none;
    white-space: nowrap;
  `;
  label.textContent = text;
  viewer.container.appendChild(label);

  // 实时更新标签位置
  function updatePosition() {
    const screenPos = viewer.worldToScreen(worldPosition);
    label.style.left = `${screenPos.x}px`;
    label.style.top = `${viewer.container.clientHeight - screenPos.y}px`;
  }

  // 绑定Viewer渲染事件更新位置
  const updateEvent = Autodesk.Viewing.VIEWER_UPDATE_EVENT;
  viewer.addEventListener(updateEvent, updatePosition);

  // 提供销毁方法，避免内存泄漏
  return {
    dispose: () => {
      viewer.removeEventListener(updateEvent, updatePosition);
      label.remove();
    }
  };
}

// 使用示例
const targetPosition = mesh.position.clone(); // 获取目标Mesh的位置
const textLabel = createTextLabel(area.title, targetPosition, this.viewer);

// 当不需要标签时调用销毁
// textLabel.dispose();

注意事项 #

• 方法一中的字体文件需要和本地生成时使用的一致，确保几何体正确。
• 方法二中的HTML标签不会随3D模型旋转，始终在屏幕上保持固定朝向，适合标注类需求。
• 避免在Viewer中引入独立的THREE.js实例，容易引发命名空间冲突和渲染异常。

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