使用three-globe实现3D地球上的HTML标记点可视化

项目概述

three-globe是一个基于Three.js构建的3D地球可视化库，它允许开发者在Web环境中创建交互式的3D地球场景。本文将重点介绍如何使用three-globe实现带有HTML标记点的3D地球可视化效果。

核心功能实现

1. 基础环境搭建

首先需要设置基本的HTML结构和导入必要的JavaScript模块：

<div id="globeViz"></div>

通过ES模块方式导入three-globe及其依赖：

import ThreeGlobe from 'three-globe';
import * as THREE from 'three';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js';

2. 创建标记点SVG图标

定义一个SVG图标作为标记点的基本形状：

const markerSvg = `<svg viewBox="-4 0 36 36">
  <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
  <circle fill="black" cx="14" cy="14" r="7"></circle>
</svg>`;

这个SVG定义了一个水滴形状的标记点，包含一个圆形中心点。

3. 生成随机数据

创建30个随机分布的数据点：

const N = 30;
const gData = [...Array(N).keys()].map(() => ({
  lat: (Math.random() - 0.5) * 180,
  lng: (Math.random() - 0.5) * 360,
  size: 7 + Math.random() * 30,
  color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
}));

每个数据点包含：

• 纬度(lat)和经度(lng)
• 大小(size)
• 颜色(color)

4. 初始化3D地球

创建ThreeGlobe实例并配置基本属性：

const Globe = new ThreeGlobe()
  .globeImageUrl('earth-dark.jpg')  // 地球纹理
  .bumpImageUrl('earth-topology.png')  // 地形凹凸贴图

5. 添加HTML标记点

使用htmlElementsData方法添加标记点：

.htmlElementsData(gData)
.htmlElement(d => {
  const el = document.createElement('div');
  el.innerHTML = markerSvg;
  el.style.color = d.color;
  el.style.width = `${d.size}px`;
  el.style.transition = 'opacity 250ms';
  return el;
})
.htmlElementVisibilityModifier((el, isVisible) => el.style.opacity = isVisible ? 1 : 0);

关键点：

• 为每个数据点创建div元素
• 设置SVG图标、颜色和大小
• 添加淡入淡出效果

6. 渲染器设置

配置WebGL和CSS2D渲染器：

const renderers = [new THREE.WebGLRenderer(), new CSS2DRenderer()];
renderers.forEach((r, idx) => {
  r.setSize(window.innerWidth, window.innerHeight);
  if (idx > 0) {
    // 叠加CSS2D渲染器在WebGL渲染器之上
    r.domElement.style.position = 'absolute';
    r.domElement.style.top = '0px';
    r.domElement.style.pointerEvents = 'none';
  }
  document.getElementById('globeViz').appendChild(r.domElement);
});

7. 场景和光照设置

const scene = new THREE.Scene();
scene.add(Globe);
scene.add(new THREE.AmbientLight(0xcccccc, Math.PI));
scene.add(new THREE.DirectionalLight(0xffffff, 0.6 * Math.PI));

8. 相机和控制器

const camera = new THREE.PerspectiveCamera();
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
camera.position.z = 500;

const tbControls = new TrackballControls(camera, renderers[0].domElement);
tbControls.minDistance = 101;
tbControls.rotateSpeed = 5;
tbControls.zoomSpeed = 0.8;

9. 动画循环

(function animate() {
  tbControls.update();
  renderers.forEach(r => r.render(scene, camera));
  requestAnimationFrame(animate);
})();

技术要点解析

1. 混合渲染技术：同时使用WebGLRenderer和CSS2DRenderer，前者负责3D地球渲染，后者处理HTML标记点。

2. 性能优化：通过htmlElementVisibilityModifier控制标记点的显示/隐藏，减少不必要的渲染开销。

3. 交互体验：TrackballControls提供流畅的旋转、缩放和平移控制。

4. 视觉设计：SVG标记点可以自由缩放不失真，且支持CSS样式控制。

实际应用建议

1. 数据可视化：适合展示地理位置分布数据，如全球分支机构、用户分布等。

2. 自定义标记：可以替换SVG为任意HTML内容，如图片、图表等。

3. 交互增强：可以为标记点添加点击事件，实现详细信息展示。

4. 性能考虑：当标记点数量较多时，应考虑使用WebGL点精灵替代HTML元素。

通过three-globe的HTML标记点功能，开发者可以轻松创建既美观又交互性强的3D地球可视化应用。