React+Three.js渲染的GLB/GLTF模型插入HTML元素及文本方法咨询

报错原因说明 #

你调用fillText报错的核心原因是：getContext("webgl")拿到的是WebGL绘图上下文，fillText是2D Canvas上下文独有的API，WebGL上下文不支持该方法。同时Three.js渲染的WebGL画布会持续触发重绘，你手动绘制的内容会被下一帧的3D渲染内容直接覆盖，这个方案本身不可行。

针对你需要在3D模型上方显示编号、插入类HTML元素的需求，React+Three.js技术栈下有3种成熟的实现方案：

方案1：CSS2DRenderer/CSS3DRenderer（插入真实HTML元素） #

这是Three.js官方提供的扩展能力，专门用于将DOM元素与3D空间坐标绑定，元素会跟随模型同步移动、适配视角，完全支持普通HTML的所有样式与交互特性，是最适配你需求的方案。
如果你的项目使用了@react-three/fiber相关生态，可直接调用@react-three/drei封装的Html组件快速实现：

import { Html } from '@react-three/drei'

// 在模型组件内部插入即可
<Html position={[0, 2, 0]} /* 此处配置3D空间坐标，调整到模型上方对应位置 */>
  <div style={{
    color: 'red',
    fontSize: '16px',
    background: 'rgba(255,255,255,0.8)',
    padding: '2px 6px',
    borderRadius: '4px'
  }}>
    1 {/* 替换为对应模型的编号 */}
  </div>
</Html>

如果是原生Three.js实现，只需手动引入CSS2DRenderer、CSS2DObject扩展，将DOM封装为CSS2DObject加入场景，每次渲染帧同步调用CSS2DRenderer的render方法即可。

方案2：Sprite精灵文本 #

如果不需要HTML的复杂样式，只需显示简单文本，可通过2D Canvas预绘制文本生成纹理，贴到Sprite精灵对象上再放到模型上方。该方案生成的是3D场景内原生对象，会被其他模型遮挡，无需额外渲染层。
示例逻辑：

const createTextSprite = (text) => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  // 绘制文本到2D画布
  ctx.font = '24px Arial'
  ctx.fillStyle = 'red'
  ctx.fillText(text, 0, 24)
  // 生成纹理与精灵对象
  const texture = new THREE.CanvasTexture(canvas)
  const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
    map: texture,
    transparent: true
  }))
  sprite.scale.set(2, 1, 1) // 调整显示大小
  return sprite
}
// 将返回的sprite的position设置为模型上方坐标，加入场景即可

方案3：TextGeometry生成3D立体文本 #

如果需要立体效果的编号，可以用Three.js的TextGeometry直接生成3D文本网格，放到模型上方。该方案生成的是纯3D对象，和场景融合度最高，支持和其他3D对象一样的材质、光影效果。

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