Three.js实现3D物体动态标签：从基础到进阶的全流程指南

2025年10月12日 互联网

一、技术背景与核心需求

在3D可视化场景中，为物体添加动态标签是提升信息传达效率的关键手段。传统2D标签存在遮挡、视角依赖等问题，而3D空间中的跟随标签需要解决三大技术挑战：坐标空间转换、动态位置更新、渲染性能优化。

Three.js的标签系统需实现：

  1. 实时计算物体世界坐标到屏幕坐标的转换
  2. 保持标签始终面向相机（Billboard效果）
  3. 处理标签与3D物体的层级关系
  4. 适配不同分辨率和设备

二、基础实现方案

1. 使用CSS2DRenderer（推荐方案）

  1. import * as THREE from 'three';
  2. import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
  4. // 初始化场景
  5. const scene = new THREE.Scene();
  6. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  7. const renderer = new THREE.WebGLRenderer({ antialias: true });
  8. const labelRenderer = new CSS2DRenderer();
  10. // 创建带标签的3D物体
  11. const cube = new THREE.Mesh(
  12.   new THREE.BoxGeometry(1, 1, 1),
  13.   new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  14. );
  15. scene.add(cube);
  17. // 创建标签元素
  18. const labelDiv = document.createElement('div');
  19. labelDiv.className = 'label';
  20. labelDiv.textContent = 'Dynamic Label';
  21. labelDiv.style.color = 'white';
  22. labelDiv.style.backgroundColor = 'rgba(0,0,0,0.7)';
  23. labelDiv.style.padding = '5px 10px';
  25. const label = new CSS2DObject(labelDiv);
  26. label.position.set(0, 1.5, 0); // 标签相对于物体的偏移
  27. cube.add(label);
  29. // 动画循环
  30. function animate() {
  31.   requestAnimationFrame(animate);
  32.   cube.rotation.x += 0.01;
  33.   cube.rotation.y += 0.01;
  34.   labelRenderer.render(scene, camera);
  35.   renderer.render(scene, camera);
  36. }
  38. // 窗口调整处理
  39. function onWindowResize() {
  40.   camera.aspect = window.innerWidth / window.innerHeight;
  41.   camera.updateProjectionMatrix();
  42.   renderer.setSize(window.innerWidth, window.innerHeight);
  43.   labelRenderer.setSize(window.innerWidth, window.innerHeight);
  44. }
  45. window.addEventListener('resize', onWindowResize);

技术要点解析：

  • CSS2DRenderer：通过DOM元素实现标签，支持HTML/CSS样式
  • 坐标系统：标签作为3D物体的子对象，自动继承变换
  • 渲染顺序：需同时调用WebGLRenderer和CSS2DRenderer

2. 使用Sprite材质（纯3D方案）

  1. const canvas = document.createElement('canvas');
  2. canvas.width = 256;
  3. canvas.height = 128;
  4. const context = canvas.getContext('2d');
  5. context.fillStyle = 'rgba(0, 0, 0, 0.7)';
  6. context.fillRect(0, 0, canvas.width, canvas.height);
  7. context.font = 'Bold 20px Arial';
  8. context.fillStyle = 'white';
  9. context.textAlign = 'center';
  10. context.fillText('3D Label', canvas.width/2, canvas.height/2);
  12. const texture = new THREE.CanvasTexture(canvas);
  13. const spriteMaterial = new THREE.SpriteMaterial({ 
  14.   map: texture,
  15.   transparent: true
  16. });
  17. const labelSprite = new THREE.Sprite(spriteMaterial);
  18. labelSprite.position.set(2, 2, 2);
  19. scene.add(labelSprite);

优缺点对比：

特性 CSS2DRenderer Sprite材质
渲染性能 中等（DOM操作） 高（纯GPU渲染）
样式灵活性 高（支持CSS） 低（仅canvas绘制）
深度测试 自动处理 需手动配置
移动端适配 需额外处理 较好支持

三、进阶优化技术

1. 视锥体剔除优化

  1. function updateLabels() {
  2.   const frustum = new THREE.Frustum();
  3.   const projScreenMatrix = new THREE.Matrix4();
  4.   projScreenMatrix.multiplyMatrices(
  5.     camera.projectionMatrix,
  6.     camera.matrixWorldInverse
  7.   );
  9.   scene.traverse(object => {
  10.     if (object.isCSS2DObject) {
  11.       const worldPosition = new THREE.Vector3();
  12.       object.getWorldPosition(worldPosition);
  13.       const screenPosition = worldPosition.clone().applyMatrix4(projScreenMatrix);
  15.       // 视锥体测试
  16.       frustum.setFromProjectionMatrix(projScreenMatrix);
  17.       if (!frustum.containsPoint(worldPosition)) {
  18.         object.element.style.display = 'none';
  19.         return;
  20.       }
  22.       // 屏幕边界检查
  23.       const { x, y } = projectToScreen(worldPosition);
  24.       if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {
  25.         object.element.style.display = 'none';
  26.         return;
  27.       }
  29.       object.element.style.display = 'block';
  30.     }
  31.   });
  32. }

2. 动态缩放控制

  1. function adjustLabelSize(camera, label) {
  2.   const distance = camera.position.distanceTo(label.position);
  3.   const baseSize = 0.5; // 基础大小
  4.   const scaleFactor = Math.max(0.5, Math.min(2, 10 / distance)); // 10单位距离为基准
  5.   label.scale.set(baseSize * scaleFactor, baseSize * scaleFactor, 1);
  6. }

3. 性能优化方案

  1. 标签池技术：复用标签对象避免频繁创建/销毁
  2. LOD控制：根据距离切换不同精度的标签
  3. Web Worker计算：将复杂计算移至工作线程
  4. 批量渲染：合并相似标签的绘制调用

四、完整实现示例

  1. class LabelManager {
  2.   constructor(scene, camera, container) {
  3.     this.scene = scene;
  4.     this.camera = camera;
  5.     this.container = container;
  6.     this.labelRenderer = new CSS2DRenderer();
  7.     this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
  8.     this.labelRenderer.domElement.style.position = 'absolute';
  9.     this.labelRenderer.domElement.style.top = '0';
  10.     container.appendChild(this.labelRenderer.domElement);
  12.     this.labels = new Map();
  13.     this.frustum = new THREE.Frustum();
  14.     this.projScreenMatrix = new THREE.Matrix4();
  15.   }
  17.   addLabel(object, text, options = {}) {
  18.     const labelDiv = document.createElement('div');
  19.     labelDiv.className = 'label';
  20.     labelDiv.textContent = text;
  21.     Object.assign(labelDiv.style, {
  22.       color: 'white',
  23.       backgroundColor: 'rgba(0,0,0,0.7)',
  24.       padding: '5px 10px',
  25.       borderRadius: '4px',
  26.       transform: 'translate(-50%, -50%)'
  27.     }, options.style);
  29.     const label = new CSS2DObject(labelDiv);
  30.     label.position.copy(options.position || new THREE.Vector3(0, 1, 0));
  31.     object.add(label);
  33.     this.labels.set(object.uuid, {
  34.       object,
  35.       label,
  36.       visible: true
  37.     });
  38.   }
  40.   update() {
  41.     this.projScreenMatrix.multiplyMatrices(
  42.       this.camera.projectionMatrix,
  43.       this.camera.matrixWorldInverse
  44.     );
  45.     this.frustum.setFromProjectionMatrix(this.projScreenMatrix);
  47.     this.labels.forEach(item => {
  48.       if (!item.visible) return;
  50.       const worldPosition = new THREE.Vector3();
  51.       item.object.getWorldPosition(worldPosition);
  53.       // 视锥体剔除
  54.       if (!this.frustum.containsPoint(worldPosition)) {
  55.         item.label.element.style.display = 'none';
  56.         return;
  57.       }
  59.       // 动态缩放
  60.       const distance = this.camera.position.distanceTo(worldPosition);
  61.       const scale = Math.max(0.5, Math.min(2, 15 / distance));
  62.       item.label.scale.set(scale, scale, scale);
  64.       item.label.element.style.display = 'block';
  65.     });
  67.     this.labelRenderer.render(this.scene, this.camera);
  68.   }
  70.   resize() {
  71.     this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
  72.   }
  73. }
  75. // 使用示例
  76. const scene = new THREE.Scene();
  77. const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  78. const renderer = new THREE.WebGLRenderer({ antialias: true });
  79. document.body.appendChild(renderer.domElement);
  81. const labelManager = new LabelManager(scene, camera, document.body);
  83. const cube = new THREE.Mesh(
  84.   new THREE.BoxGeometry(1, 1, 1),
  85.   new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  86. );
  87. scene.add(cube);
  89. labelManager.addLabel(cube, 'Dynamic Cube', {
  90.   position: new THREE.Vector3(0, 1.2, 0),
  91.   style: {
  92.     fontSize: '16px',
  93.     fontWeight: 'bold'
  94.   }
  95. });
  97. function animate() {
  98.   requestAnimationFrame(animate);
  99.   cube.rotation.x += 0.01;
  100.   cube.rotation.y += 0.01;
  101.   labelManager.update();
  102.   renderer.render(scene, camera);
  103. }
  104. animate();

五、常见问题解决方案

  1. 标签闪烁问题：

    • 原因：帧率不一致导致渲染不同步
    • 解决方案：统一使用requestAnimationFrame，确保标签和场景同步更新

  2. 移动端适配：

    1. // 添加触摸事件支持
    2. function handleTouch(event) {
    3.   event.preventDefault();
    4.   const touch = event.touches[0];
    5.   // 转换为Three.js坐标...
    6. }
    7. document.addEventListener('touchstart', handleTouch, { passive: false });

  3. 深度冲突处理：

    • 设置标签的renderOrder属性
    • 调整标签的z-index值
    • 使用depthTest: false材质属性

  4. 性能监控：

    1. function profilePerformance() {
    2.   console.log('Label count:', labelManager.labels.size);
    3.   console.log('FPS:', 1000 / (performance.now() - lastFrameTime));
    4.   lastFrameTime = performance.now();
    5. }

六、最佳实践建议

  1. 标签设计原则：

    • 保持简洁，每个标签不超过10个字
    • 使用高对比度配色方案
    • 避免在标签中使用复杂图形

  2. 性能优化策略：

    • 每场景标签数控制在100个以内
    • 对远距离物体使用简化标签
    • 实现标签的分级加载

  3. 交互增强方案：

    • 添加悬停高亮效果
    • 实现点击标签显示详细信息面板
    • 添加标签淡入淡出动画

  4. 跨平台适配：

    • 针对Retina屏幕使用@2x/@3x资源
    • 实现触摸屏的双击缩放控制
    • 添加键盘导航支持

通过以上技术方案和优化策略，开发者可以在Three.js中实现高效、美观的3D物体跟随标签系统，显著提升3D可视化应用的信息传达能力和用户体验。

最新文章