HTML5本身不支持三维建模，所谓“HTML5建模”实为通过WebGL（如Three.js）或WebGPU在浏览器中渲染3D模型，并结合DOM、Canvas等方式添加文字标注；Three.js的TextGeometry可生成带厚度的3D文字，需配合FontLoader加载字体文件，适合静态标签；CanvasTexture+Sprite适用于动态更新文字，性能更优；DOM标注最轻量，适合屏幕空间UI提示，但需手动处理坐标转换与遮挡检测；实际项目常根据需求混用三种方式。
HTML5 本身不提供三维建模能力，所谓“HTML5 建模”实际指在浏览器中用 WebGL（如 Three.js）或 WebGPU 渲染 3D 模型，并通过 DOM 或 Canvas 叠加文字标注。直接在模型几何体上“添加文字标签”不是 HTML5 标准功能，而是前端渲染框架的扩展实现。
Three.js 中用 TextGeometry 添加 3D 文字标签
这是最接近“把文字焊在模型上”的方式：生成带厚度的三维文字几何体，可随模型一起旋转、缩放、受光照影响。
-
TextGeometry依赖字体文件（.typeface.json），需提前加载，否则文字不显示 - 必须配合
FontLoader使用，且字体路径不能跨域；本地 file:// 协议下常因 CORS 失败，建议用live-server或http-server启动 - 文字默认朝向 +Z 轴，若想正对摄像机，需手动设置
rotation.y = Math.PI或用Billboard技巧 - 性能敏感：每个文字都是独立网格，大量标签会显著增加 draw call 和内存占用
const loader = new FontLoader();
loader.load('fonts/helvetiker_bold.typeface.json', (font) => {
const textGeo = new TextGeometry('Label', {
font: font,
size: 0.2,
height: 0.05,
curveSegments: 12,
});
textGeo.center();
const textMaterial = new MeshStandardMaterial({ color: 0xffa500 });
const textMesh = new Mesh(textGeo, textMaterial);
scene.add(textMesh);
});用 CanvasTexture + Sprite 实现动态文字标注
适合需要频繁更新内容（如实时坐标、状态值）或大量标注的场景。文字绘制在 Canvas 上，转为纹理贴到面向摄像机的平面（Sprite），开销远低于 TextGeometry。
- 创建
<canvas>元素，用getContext('2d')绘制文字，注意设置canvas.width/canvas.height像素尺寸（非 CSS 尺寸） -
CanvasTexture默认启用minFilter/magFilter插值，小字号文字会模糊，应设为NearestFilter -
Sprite默认锚点在中心，位置需按模型世界坐标同步更新；若模型有缩放/旋转，Sprite需额外计算偏移 - 避免每帧重绘整个 Canvas——只在文字内容变化时调用
texture.needsUpdate = true
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 256; canvas.height = 64;
context.font = 'bold 24px Arial';
context.fillStyle = 'white';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('ID: 001', 128, 32);
<p>const texture = new CanvasTexture(canvas);
texture.minFilter = texture.magFilter = THREE.NearestFilter;</p><p>const spriteMaterial = new SpriteMaterial({ map: texture });
const sprite = new Sprite(spriteMaterial);
sprite.position.set(1.5, 0.8, -0.2); // 对齐模型某顶点
scene.add(sprite);用 DOM 元素做屏幕空间标注（UI 覆盖）
最轻量、兼容性最好，适用于不需要透视变形、仅需“指向模型某部位”的标注（如零件名称、操作提示）。文字完全由 CSS 控制，与 3D 渲染解耦。
立即学习“前端免费学习笔记（深入）”；
- 需将模型顶点坐标经
camera.worldToLocal()→project()→renderer.getSize()转换为屏幕像素坐标 - 转换后
x/y是 [-1, 1] 区间，需映射到 DOM 容器的 clientWidth/clientHeight - 若模型被遮挡，DOM 标签仍可见——需手动做深度检测（如用
Raycaster判断是否被其他物体挡住） - 滚动或缩放页面时，务必监听
resize事件并重新计算位置，否则标签漂移
// 示例：将模型坐标转为屏幕位置
function worldToScreen(worldPos, camera, renderer) {
const vector = worldPos.clone().project(camera);
const x = Math.round((vector.x + 1) * renderer.domElement.clientWidth / 2);
const y = Math.round((-vector.y + 1) * renderer.domElement.clientHeight / 2);
return { x, y };
}
<p>// 更新 DOM 标签位置（在 render 循环中调用）
labelEl.style.left = <code>${pos.x}px</code>;
labelEl.style.top = <code>${pos.y}px</code>; // labelEl 是绝对定位的 <div>真正难的不是“怎么加文字”，而是决定用哪种方式：要真实 3D 效果就选 TextGeometry，要动态更新就选 CanvasTexture + Sprite，要快速上线且不卡顿就用 DOM。多数项目里，这三种方式会混用——比如主标题用 3D 文字，参数值用 Canvas，交互提示用 DOM。
