# 在任意目录新建文件夹
mkdir my-travel-globe && cd $_
# 初始化 npm 项目
npm init -y
# 安装核心库
npm install three globe.gl --save
# Ru果想用 Vite 快速预览：
npm install vite --save-dev
# 在 package.json 中添加:
#   "scripts": { "dev": "vite" }
# 然后执行 npm run dev 即可打开本地服务器。

容器 div 的宽高会在 JavaScript 中动态设置，以适配不同屏幕尺寸。

// main.js —— 基于 ES Module 编写
import * as THREE from 'three';
import Globe from 'globe.gl';
// ---------- 第一步：创建 Globe 实例 ----------
const container = document.getElementById;
const width = window.innerWidth;
const height = window.innerHeight;
// 自动根据窗口大小伸缩
container.style.width = `${width}px`;
container.style.height = `${height}px`;
const globe = Globe
    .width
    .height
// ---------- 第二步：加载纹理 ----------
import earthDay from './textures/earth_day.jpg';
import earthNight from './textures/earth_night.jpg';
globe.globeImageUrl            // 白天纹理
     .backgroundImageUrl   // 夜空背景
// ---------- 第三步：准备旅游地点数据 ----------
const travelSpots = ;
// ---------- 第四步：把数据塞进 Globe ----------
globe.labelsData
      .labelLat
      .labelLng
      .labelText
      .labelSize                 // 标签大小统一，可自行调节
      .labelColor=>'rgba') // 半透明白字geng好辨认
      .labelDotRadius                 // 小圆点半径
// ---------- 第五步：交互效果 ----------
globe.onLabelClick(label => {
   alert;
});
// 自动旋转 + 鼠标拖拽控制
const controls = globe.controls;
controls.autoRotate = true;
controls.autoRotateSpeed = -0.4;
controls.enableZoom = false;
// ---------- 第六步：响应式 ----------
window.addEventListener => {
   const w = window.innerWidth,
         h = window.innerHeight;
   globe.width.height;
});

只要保存并在浏览器打开 index.html，你就会kan到一颗蓝绿相间、缓慢自转的星球，上面闪烁着「东京」·「北极」等标签。点击任意标签会弹出简短描述，这正是我们想要的“点亮记忆”。

const travelSpots = ;

globe.labelText
     .onLabelHover(d => {
         // 鼠标悬停时显示图片预览或播放短片
         const preview = document.getElementById;
         preview.src = d.img;
         preview.style.display='block';
     });