如何使用CSS2D Renderer/Object在three.js中渲染FontAwesome图标

你的代码里存在两个关键问题导致图标无法正常显示：

• HTML标签语法错误：<i>标签的闭合写法错误，把</i>写成了<i，导致浏览器无法正确解析图标元素
• 图标类名不匹配：你需要的是map-marker-exclamation图标，但代码里误用了fa-user类名

以下是修正后的完整代码：

修正后的JavaScript代码 #

var camera, scene, renderer, labelRenderer, controls;

init();
animate();

/**
 * 绘制立方体
 **/
function drawCube(pos, scene) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  material.transparent = true;
  material.opacity = 0.2;
  const cube = new THREE.Mesh(geometry, material);

  const el = document.createElement('div');
  // 修正标签闭合错误，替换为目标图标类名
  el.innerHTML = '<i class="fa-solid fa-map-marker-exclamation"></i>';
  // 可选：添加样式优化图标显示
  el.style.fontSize = '24px';
  el.style.color = '#ff4444';
  const objectCSS = new THREE.CSS2DObject(el);
  objectCSS.position.set(pos.x, pos.y + 1, pos.z);

  cube.add(objectCSS);
  scene.add(cube);
}

/**
 * 创建场景、相机、渲染器
 */
function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x21252d);
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.x = 1;
  camera.position.y = 4;
  camera.position.z = 5;
  scene.add(camera);

  labelRenderer = new THREE.CSS2DRenderer();
  labelRenderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  // 避免CSS标签遮挡Three.js交互控件
  labelRenderer.domElement.style.pointerEvents = 'none';
  document.body.appendChild(labelRenderer.domElement);

  controls = new THREE.OrbitControls(camera, labelRenderer.domElement);

  const cube_pos = new THREE.Vector3(1, 0, 2);
  drawCube(cube_pos, scene);

  window.addEventListener('resize', onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
  labelRenderer.render(scene, camera);
}

对应的HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/renderers/CSS2DRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

额外注意事项 #

• 确保FontAwesome的CDN链接有效，你使用的是6.2.1版本，实心图标前缀为fa-solid，若使用其他风格需替换对应前缀（如fa-regular）
• 可以给CSS2DObject的容器添加自定义样式，调整图标大小、颜色、边距等优化显示效果
• 设置pointerEvents: none可以防止HTML标签遮挡Three.js的交互控件操作

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