如何在Three.js中添加球体并实现标注？

Question

在Three.js中如何创建一个带有标签的3D球体，并实现标签始终朝向摄像机？

Answer 1

一、创建带有标签的3D球体概述

在Three.js中创建一个带有标签的3D球体，涉及到几个核心概念：几何体创建、材质应用、文本渲染以及标签的朝向控制。本文将从基础开始，逐步深入讲解如何实现这一功能。

二、基础步骤：创建球体和基本标签

首先，我们需要在Three.js中创建一个球体，并为其添加一个简单的标签。标签可以通过HTML元素或Three.js内置的TextGeometry来实现。

• 创建场景、相机、渲染器
• 使用THREE.SphereGeometry创建球体
• 使用THREE.MeshStandardMaterial设置材质
• 使用TextGeometry生成标签文字

// 创建球体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// 创建标签
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
  const textGeometry = new THREE.TextGeometry('Earth', {
    font: font,
    size: 0.2,
    height: 0.01,
  });
  const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const textMesh = new THREE.Mesh(textGeometry, textMaterial);
  textMesh.position.set(0, 1.2, 0);
  scene.add(textMesh);
});
  

三、实现标签始终朝向摄像机

要让标签始终朝向摄像机，可以使用Three.js中的Sprite对象或CSS3DRenderer结合HTML标签。以下是两种主流方案：

方案	实现方式	优缺点
Sprite	使用THREE.SpriteMaterial和THREE.Sprite创建始终朝向相机的标签	轻量、易用；但文本质量较低
CSS3DRenderer	结合HTML标签与CSS3DRenderer实现高质量标签	支持复杂HTML样式；但需要额外引入CSS3DRenderer模块

使用Sprite实现标签朝向摄像机

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 128;
context.fillStyle = 'white';
context.font = 'bold 64px Arial';
context.fillText('Earth', 64, 96);

const texture = new THREE.CanvasTexture(canvas);
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(2, 0.5, 1);
sprite.position.set(0, 1.2, 0);
scene.add(sprite);
  

四、进阶方案：使用CSS3DRenderer实现HTML标签

对于需要高度定制的标签样式，可以使用Three.js的CSS3DRenderer模块，将HTML元素作为标签绑定到3D对象上。

const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
document.body.appendChild(cssRenderer.domElement);

const label = document.createElement('div');
label.className = 'label';
label.textContent = 'Earth';
label.style.marginTop = '-1em';

const labelObject = new THREE.CSS3DObject(label);
labelObject.position.set(0, 1.2, 0);
sphere.add(labelObject); // 添加到球体上
  

五、性能与交互优化

当标签数量较多或交互频繁时，需要注意性能优化和交互逻辑处理。以下是几个优化方向：

1. 动态控制标签可见性，避免遮挡
2. 使用Raycaster实现标签点击事件
3. 使用OrbitControls时保持标签朝向
4. 标签层级管理，避免Z冲突

六、流程图：标签朝向实现流程

      graph TD
A[创建3D球体] --> B[选择标签实现方式]
B --> C{Sprite还是HTML标签?}
C -->|Sprite| D[创建Canvas纹理]
C -->|HTML/CSS3D| E[创建HTML元素并绑定CSS3DObject]
D --> F[添加到场景]
E --> F
F --> G[每帧更新标签朝向]
G --> H[完成]