---
title: "点阵地球访客地图"
summary: "three.js 点阵地球：各国访客数立成红色光柱，蓝色弧线带着光点飞向同一个目的地，可拖动、可点光柱看数字。"
category: "visual (图表与 3D)"
origin: "original"
stack: ["html","css","three.js"]
tags: ["3D","地球","数据可视化","地图"]
demo: "https://zhuoqidev.com/design/demos/dot-globe-visitors/"
url: "https://zhuoqidev.com/design/dot-globe-visitors/"
license: "MIT"
added: "2026-10-14"
translation: "https://zhuoqidev.com/en/design/dot-globe-visitors/index.md"
---
# 点阵地球访客地图
> three.js 点阵地球：各国访客数立成红色光柱，蓝色弧线带着光点飞向同一个目的地，可拖动、可点光柱看数字。
## 看点
- **点阵陆地**：在球面上用斐波那契螺旋均匀撒 5.2 万个点，只留落在陆地上的（约 1.5 万个），一个 `Points` 一次画完。陆地数据是 0.5° 的位图，只有「哪里是陆地」，不画国界。
- **点往边缘淡出**：点的着色器算「这个点朝不朝向镜头」，越靠球的边缘越透明，球看起来有体积；背面的点被一个略小的不透明球挡住。
- **光柱**：所有国家共用一个 `InstancedMesh`，每根柱子是同一个单位圆柱，按国家的位置、朝向和高度摆放。高度按访客数开平方，小国家也看得见；柱子从地面长出来。
- **弧线 + 流动光点**：每条弧是一段二次贝塞尔管子，顶点在大圆中点上方，路越远拱得越高；全部合成一个几何体，光点在片元着色器里按 `t` 和时间算，不用逐帧改顶点。
- **跟着主题走**：颜色都从 CSS 变量读，切换深浅色时重读一次；浅色背景上弧线改用普通混合（叠加光在纸色上看不见）。
- **省电**：离开视口、没东西在动时就停掉渲染循环；偏好减少动效时不自转、不流动、柱子直接到位。
## 怎么用
1. 把 `index.html` 里的 `.stage` 结构、样式和 `