three.js 字体使用全解析

作者 Mintopia

2025年5月17日 11:28

在 3D 可视化项目中，文字是传递信息的重要元素。Three.js 作为强大的 3D 库，提供了多种添加和处理文字的方式。本文将深入探讨 Three.js 中字体的使用方法，从基础文字渲染到高级文字动画，帮助你在 3D 场景中完美呈现文字内容。

一、Three.js 中字体的基本概念

在 Three.js 中使用字体，主要有两种方式：

基于 Canvas 的 2D 文字渲染：使用 Canvas 绘制文字，然后将其作为纹理应用到 3D 平面上。

3D 文字几何体：使用 Three.js 提供的 TextGeometry 创建具有厚度和深度的 3D 文字模型。

这两种方式各有优缺点，适用于不同的场景。下面我们将详细介绍这两种方式的实现方法。

二、使用 Canvas 生成文字纹理

基础实现方法

通过 Canvas 生成文字纹理是一种简单且灵活的方法，特别适合需要动态更新文字内容的场景。

// 创建Canvas文字纹理函数
function createTextTexture(text, parameters = {}) {
  parameters = Object.assign({
    fontface: "Arial",
    fontsize: 72,
    backgroundColor: { r: 0, g: 0, b: 0, a: 0 },
    textColor: { r: 255, g: 255, b: 255, a: 255 }
  }, parameters);
  // 创建Canvas元素
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  
  // 设置Canvas尺寸
  context.font = `${parameters.fontsize}px ${parameters.fontface}`;
  const textWidth = context.measureText(text).width;
  
  // 设置Canvas尺寸，考虑文字宽度和高度
  canvas.width = textWidth + parameters.fontsize;
  canvas.height = parameters.fontsize * 2;
  
  // 重置字体设置，因为Canvas尺寸改变后可能会重置
  context.font = `${parameters.fontsize}px ${parameters.fontface}`;
  context.textBaseline = 'middle';
  context.textAlign = 'center';
  
  // 绘制背景
  context.fillStyle = `rgba(${parameters.backgroundColor.r}, ${parameters.backgroundColor.g}, ${parameters.backgroundColor.b}, ${parameters.backgroundColor.a})`;
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制文字
  context.fillStyle = `rgba(${parameters.textColor.r}, ${parameters.textColor.g}, ${parameters.textColor.b}, ${parameters.textColor.a})`;
  context.fillText(text, canvas.width / 2, canvas.height / 2);
  
  // 创建纹理
  const texture = new THREE.CanvasTexture(canvas);
  
  return texture;
}
// 在Three.js场景中使用Canvas生成的文字纹理
function addTextToScene() {
  // 创建文字纹理
  const texture = createTextTexture("Hello Three.js", {
    fontface: "Arial",
    fontsize: 48,
    textColor: { r: 255, g: 255, b: 255 },
    backgroundColor: { r: 0, g: 0, b: 0, a: 0 }
  });
  
  // 创建材质和平面几何体
  const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
  const geometry = new THREE.PlaneGeometry(2, 1);
  const textMesh = new THREE.Mesh(geometry, material);
  
  // 添加到场景
  scene.add(textMesh);
}

高级应用：动态更新文字内容

Canvas 纹理的一个重要优势是可以动态更新文字内容。以下是一个实现动态更新文字的示例：

// 动态更新文字内容
function updateText(text) {
  // 重新生成纹理
  const texture = createTextTexture(text);
  
  // 更新材质的纹理
  textMesh.material.map.dispose();
  textMesh.material.map = texture;
  textMesh.material.needsUpdate = true;
}
// 在动画循环中更新文字
let counter = 0;
function animate() {
  requestAnimationFrame(animate);
  
  // 每100帧更新一次文字
  if (counter % 100 === 0) {
    updateText(`Frame: ${counter}`);
  }
  
  counter++;
  renderer.render(scene, camera);
}

三、使用 TextGeometry 创建 3D 文字

准备字体文件

使用 TextGeometry 需要先加载字体文件。Three.js 使用 JSON 格式的字体文件，这些文件可以通过 Three.js 提供的字体工具生成。

以下是加载字体并创建 3D 文字的示例：

// 加载字体并创建3D文字
function loadFontAndCreateText() {
  const loader = new THREE.FontLoader();
  
  // 加载字体文件
  loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
    // 创建文字几何体
    const geometry = new THREE.TextGeometry('Three.js 3D Text', {
      font: font,
      size: 0.5,
      height: 0.1,  // 文字厚度
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 0.03,
      bevelSize: 0.02,
      bevelOffset: 0,
      bevelSegments: 5
    });
    
    // 计算边界框以居中文字
    geometry.computeBoundingBox();
    const centerOffset = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
    
    // 创建材质
    const material = new THREE.MeshPhongMaterial({ 
      color: 0x44aa88, 
      specular: 0x111111 
    });
    
    // 创建网格
    const textMesh = new THREE.Mesh(geometry, material);
    
    // 设置位置
    textMesh.position.x = centerOffset;
    textMesh.position.y = 0.2;
    textMesh.position.z = 0;
    
    // 添加到场景
    scene.add(textMesh);
  });
}

优化 3D 文字性能

对于复杂场景中的大量文字，性能可能成为问题。以下是一些优化建议：

合并几何体：如果有多个静态文字，可以使用BufferGeometryUtils.mergeBufferGeometries合并它们以减少绘制调用。

降低细节：减少curveSegments和bevelSegments的值可以显著提高性能。

使用实例化：对于重复的文字，可以使用THREE.InstancedMesh。

四、文字的高级效果与动画

文字材质与光照效果

使用不同的材质可以为文字带来不同的视觉效果：

// 使用不同材质的文字示例
function createTextWithMaterials() {
  // 加载字体
  const loader = new THREE.FontLoader();
  loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
    // 创建基础文字几何体
    const geometry = new THREE.TextGeometry('Materials', {
      font: font,
      size: 0.4,
      height: 0.1
    });
    
    // 不同材质的文字
    const materials = [
      new THREE.MeshBasicMaterial({ color: 0xff0000 }),
      new THREE.MeshLambertMaterial({ color: 0x00ff00 }),
      new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 }),
      new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 0.5, roughness: 0.5 })
    ];
    
    // 为每种材质创建一个文字实例
    materials.forEach((material, index) => {
      const textMesh = new THREE.Mesh(geometry.clone(), material);
      textMesh.position.set(-2 + index * 1.5, 0, 0);
      scene.add(textMesh);
    });
  });
}

文字动画效果

以下是一个文字波浪动画的实现：

// 文字波浪动画
function createWavyText() {
  const loader = new THREE.FontLoader();
  loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
    const geometry = new THREE.TextGeometry('Wave Animation', {
      font: font,
      size: 0.5,
      height: 0.1
    });
    
    // 创建顶点材质
    const material = new THREE.ShaderMaterial({
      vertexShader: `
        uniform float time;
        varying vec3 vPosition;
        
        void main() {
          vPosition = position;
          // 添加波浪效果
          float offset = sin(position.x * 5.0 + time) * 0.05;
          vec3 newPosition = position + normal * offset;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
        }
      `,
      fragmentShader: `
        varying vec3 vPosition;
        
        void main() {
          // 基于位置创建颜色渐变
          vec3 color = mix(vec3(0.2, 0.2, 1.0), vec3(1.0, 0.2, 0.2), vPosition.y + 0.5);
          gl_FragColor = vec4(color, 1.0);
        }
      `,
      uniforms: {
        time: { value: 0.0 }
      },
      side: THREE.DoubleSide,
      transparent: false
    });
    
    const textMesh = new THREE.Mesh(geometry, material);
    scene.add(textMesh);
    
    // 动画循环
    function animate() {
      requestAnimationFrame(animate);
      material.uniforms.time.value += 0.05;
      renderer.render(scene, camera);
    }
    
    animate();
  });
}

五、性能优化与最佳实践

字体文件管理

对于小型项目，可以直接使用 Three.js 提供的内置字体。

对于大型项目，考虑创建自定义字体以减少文件大小。

使用字体压缩工具减小字体文件体积。

动态文字的性能考量

频繁更新 Canvas 纹理会影响性能，尽量减少更新频率。

对于实时数据显示，考虑使用数字精灵而非完整文字。

渲染性能优化

对于远距离可见的文字，考虑使用低精度几何体。

使用THREE.LOD（Level of Detail）根据距离动态切换文字精度。

六、实际应用案例

游戏中的 3D 文字

在游戏中，3D 文字可用于显示玩家名称、分数或游戏状态：

// 游戏中的玩家名称显示
function createPlayerNameTag(player) {
  const loader = new THREE.FontLoader();
  loader.load('fonts/helvetiker_regular.typeface.json', function(font) {
    const geometry = new THREE.TextGeometry(player.name, {
      font: font,
      size: 0.2,
      height: 0.02
    });
    
    const material = new THREE.MeshPhongMaterial({ color: player.color });
    const nameTag = new THREE.Mesh(geometry, material);
    
    // 设置文字位置，使其始终面向相机
    nameTag.position.set(0, 2, 0);
    player.add(nameTag);
    
    // 确保文字始终面向相机
    scene.add(new THREE.PointLight(0xffffff, 1, 100));
    scene.add(new THREE.PointLight(0xffffff, 0.5, 100));
  });
}

数据可视化中的文字标签

在数据可视化中，文字标签用于标识数据点：

// 数据可视化中的标签
function addDataLabels(data) {
  data.forEach((item, index) => {
    const texture = createTextTexture(item.label, {
      fontsize: 36,
      textColor: { r: 255, g: 255, b: 255 }
    });
    
    const material = new THREE.SpriteMaterial({ map: texture });
    const sprite = new THREE.Sprite(material);
    
    // 设置位置
    sprite.position.set(item.x, item.y, item.z);
    sprite.scale.set(1, 0.5, 1);
    
    scene.add(sprite);
  });
}

七、常见问题与解决方案

文字模糊问题

原因：Canvas 尺寸过小或纹理过滤设置不当。

解决方案：增加 Canvas 尺寸，或设置纹理的minFilter和magFilter为THREE.NearestFilter。

3D 文字渲染不完整

原因：相机的near值设置过大，或文字超出了视锥体。

解决方案：减小相机的near值，或调整文字位置使其在视锥体内。

性能问题

原因：过多的文字对象或复杂的文字几何体。

解决方案：合并几何体、使用实例化、降低细节级别或使用 Canvas 纹理替代 3D 文字。

八、总结

Three.js 提供了丰富的字体使用方式，从简单的 2D 文字纹理到复杂的 3D 文字几何体，能够满足各种场景的需求。在实际应用中，应根据具体需求选择合适的方法，并注意性能优化。通过合理使用材质、动画和交互效果，可以为 3D 场景增添丰富的信息和生动的视觉体验。

希望本文能帮助你掌握 Three.js 中字体的使用技巧，创造出更加精彩的 3D 项目！

普通视图