使用 Three.js 和 D3 可视化全球新冠疫情

话不多说，整体效果是这样的，本文主要讲解的地球实现

核心需求

• 地球半透明，可以看到背面
• 点阵式的全球地图
• 根据数据的经纬度生成对应的柱体
• 数值越大，柱体的颜色和高度就越深越长

引入Threejs和D3

<script src="https://cdn.staticfile.org/three.js/r125/three.min.js"></script>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://unpkg.com/three@0.125.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.125.0/examples/js/utils/BufferGeometryUtils.js"></script>

基本HTML结构

<div id="box" style="width: 100%; height: 100%">
  <canvas id="canvas" style="width: 100%; height: 100%" />
</div>

定义必要的变量

const box = document.getElementById("box");
const canvas = document.getElementById("canvas");

let glRender; // webgl渲染器
let camera; // 摄像机
let earthMesh; // 地球的Mesh
let scene; // 场景，一个大容器，可以理解为html中的body
let meshGroup; // 所有Mesh的容器，后面所有Mesh都会放在这里面，方便我们管理，可理解为一个div
let controls; // 轨道控制器，实现整体场景的控制

初始化相关变量

// 创建webgl渲染器
glRender = new THREE.WebGLRenderer({
    canvas, alpha: true });
glRender.setSize(canvas.clientWidth, canvas.clientHeight, false);
// 创建场景
scene = new THREE.Scene();

// 创建相机
const fov = 45;
const aspect = canvas.clientWidth / canvas.clientHeight