🌍 基于 Three.js 的 3D 地球可视化项目
📢 项目说明 ：
这是一个使用 Three.js 创建的交互式 3D 地球模型，支持鼠标拖动旋转、自动旋转动画和响应式布局。
📅 更新时间：2026 年 3 月 24 日
🎯 技术栈：HTML5 + CSS3 + JavaScript + Three.js
⏱️ 预计阅读时间：20-30 分钟
✍️ 作者：书到用时方恨少!
📋 完整目录
┌─────────────────────────────────────────────────────────────┐
│ 本篇博客内容导航 │
├─────────────────────────────────────────────────────────────┤
│ 第一部分：项目介绍 │
│ ├── 1. 项目背景 │
│ ├── 2. 效果预览 │
│ └── 3. 功能特性 │
├─────────────────────────────────────────────────────────────┤
│ 第二部分：技术架构 │
│ ├── 4. 技术栈说明 │
│ ├── 5. 项目结构 │
│ └── 6. 核心原理 │
├─────────────────────────────────────────────────────────────┤
│ 第三部分：代码详解 │
│ ├── 7. HTML 结构 │
│ ├── 8. CSS 样式 │
│ └── 9. JavaScript 核心代码 │
├─────────────────────────────────────────────────────────────┤
│ 第四部分：核心功能讲解 │
│ ├── 10. Three.js 场景搭建 │
│ ├── 11. 地球材质与纹理 │
│ ├── 12. 灯光系统 │
│ ├── 13. 鼠标交互控制 │
│ └── 14. 动画循环 │
├─────────────────────────────────────────────────────────────┤
│ 第五部分：扩展与优化 │
│ ├── 15. 功能扩展建议 │
│ ├── 16. 性能优化 │
│ └── 17. 常见问题 │
└─────────────────────────────────────────────────────────────┘第一部分：项目介绍
1. 项目背景
在 Web 3D 可视化日益普及的今天，Three.js 成为了前端开发者创建 3D 内容的首选库。本项目通过创建一个交互式 3D 地球模型，帮助开发者快速掌握 Three.js 的核心概念，包括场景搭建、几何体、材质、纹理、灯光、交互控制和动画循环。
┌─────────────────────────────────────────────────────────────┐
│ 项目应用场景 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🌐 数据可视化 │
│ • 全球业务分布展示 │
│ • 用户地理位置可视化 │
│ • 网络流量监控 │
│ │
│ 🎓 教育演示 │
│ • 地理教学辅助 │
│ • 天文科普展示 │
│ • 互动学习平台 │
│ │
│ 🎨 创意展示 │
│ • 企业官网首页 │
│ • 产品介绍页面 │
│ • 个人作品集 │
│ │
└─────────────────────────────────────────────────────────────┘2. 效果预览
🖼️ 项目效果
🎬 交互特性
| 交互方式 | 效果 |
|---|---|
| 鼠标拖动 | 地球跟随鼠标旋转 |
| 鼠标释放 | 恢复自动旋转 |
| 窗口缩放 | 自适应调整大小 |
| 右键菜单 | 禁用（防止干扰） |
3. 功能特性
┌─────────────────────────────────────────────────────────────┐
│ 核心功能清单 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ✅ 3D 地球渲染 │
│ • 高精度球体几何体（64×64 分段） │
│ • 多层纹理贴图（颜色/法线/高光） │
│ • Phong 材质光照效果 │
│ │
│ ✅ 交互控制 │
│ • 鼠标拖动旋转 │
│ • 平滑旋转动画 │
│ • 禁用右键菜单 │
│ │
│ ✅ 自适应布局 │
│ • 响应式窗口大小 │
│ • 设备像素比适配 │
│ • 全屏显示 │
│ │
│ ✅ 灯光系统 │
│ • 环境光（基础照明） │
│ • 方向光（模拟太阳） │
│ │
└─────────────────────────────────────────────────────────────┘第二部分：技术架构
4. 技术栈说明
🛠️ 核心技术
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML5 | - | 页面结构 |
| CSS3 | - | 样式布局 |
| JavaScript | ES6+ | 交互逻辑 |
| Three.js | r128 | 3D 渲染引擎 |
📦 Three.js 核心模块
┌─────────────────────────────────────────────────────────────┐
│ Three.js 模块使用 │
├─────────────────────────────────────────────────────────────┤
│ │
│ THREE.Scene → 3D 场景容器 │
│ THREE.PerspectiveCamera → 透视相机 │
│ THREE.WebGLRenderer → WebGL 渲染器 │
│ THREE.SphereGeometry → 球体几何体 │
│ THREE.TextureLoader → 纹理加载器 │
│ THREE.MeshPhongMaterial → Phong 材质 │
│ THREE.Mesh → 网格对象 │
│ THREE.AmbientLight → 环境光 │
│ THREE.DirectionalLight → 方向光 │
│ │
└─────────────────────────────────────────────────────────────┘5. 项目结构
project/
│
├── index.html # 主页面（包含所有代码）
│
├── 纹理资源（CDN 加载）
│ ├── earth_atmos_2048.jpg # 地球颜色纹理
│ ├── earth_normal_2048.jpg # 法线贴图
│ └── earth_specular_2048.jpg # 高光贴图
│
└── 依赖库（CDN 加载）
└── three.min.js (r128) # Three.js 核心库💡 说明 ：本项目采用单文件结构，所有代码集成在
index.html中，便于快速部署和测试。纹理和库文件通过 CDN 加载。
6. 核心原理
🔄 渲染流程
┌─────────────────────────────────────────────────────────────┐
│ Three.js 渲染流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. 创建场景 (Scene) │
│ ↓ │
│ 2. 创建相机 (Camera) │
│ ↓ │
│ 3. 创建渲染器 (Renderer) │
│ ↓ │
│ 4. 添加几何体 + 材质 = 网格 (Mesh) │
│ ↓ │
│ 5. 添加灯光 (Light) │
│ ↓ │
│ 6. 动画循环 (requestAnimationFrame) │
│ ↓ │
│ 7. 渲染场景 (renderer.render) │
│ │
└─────────────────────────────────────────────────────────────┘🎮 交互原理
┌─────────────────────────────────────────────────────────────┐
│ 鼠标交互原理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ mousedown → 记录起始位置 → isDragging = true │
│ ↓ │
│ mousemove → 计算位移差 → 更新旋转角度 │
│ ↓ │
│ mouseup → isDragging = false → 恢复自动旋转 │
│ │
└─────────────────────────────────────────────────────────────┘第三部分：代码详解
7. HTML 结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 地球模型</title>
<!-- CSS 样式 -->
</head>
<body>
<div id="instructions">拖动地球旋转 | Drag to rotate the Earth</div>
<div id="container"></div>
<!-- 引入 Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- JavaScript 代码 -->
</body>
</html>📋 关键元素说明
| 元素 | 作用 |
|---|---|
meta viewport |
移动端适配 |
#instructions |
操作提示文字 |
#container |
Three.js 渲染容器 |
script |
引入 Three.js 库 |
8. CSS 样式
body {
margin: 0;
overflow: hidden;
background-color: #000000;
font-family: Arial, sans-serif;
}
#container {
width: 100%;
height: 100vh;
display: block;
}
#instructions {
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size: 14px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
pointer-events: none; /* 不阻挡鼠标事件 */
z-index: 10;
}🎨 样式要点
┌─────────────────────────────────────────────────────────────┐
│ CSS 样式要点 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ✅ margin: 0 │
│ 移除默认边距，实现全屏效果 │
│ │
│ ✅ overflow: hidden │
│ 隐藏滚动条，防止拖动时页面滚动 │
│ │
│ ✅ pointer-events: none │
│ 提示文字不阻挡鼠标事件，确保能拖动地球 │
│ │
│ ✅ text-shadow │
│ 文字阴影，增强在黑色背景上的可读性 │
│ │
└─────────────────────────────────────────────────────────────┘9. JavaScript 核心代码
📦 代码结构概览
// 1. 场景设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer(...);
// 2. 地球创建
const geometry = new THREE.SphereGeometry(...);
const material = new THREE.MeshPhongMaterial({...});
const earth = new THREE.Mesh(geometry, material);
// 3. 灯光系统
const ambientLight = new THREE.AmbientLight(...);
const directionalLight = new THREE.DirectionalLight(...);
// 4. 交互控制
// 鼠标事件监听函数...
// 5. 动画循环
function animate() { ... }第四部分：核心功能讲解
10. Three.js 场景搭建
🔍 场景、相机、渲染器
// 场景设置
const scene = new THREE.Scene();
// 相机：透视相机
const camera = new THREE.PerspectiveCamera(
75, // 视野角度 (FOV)
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近截面
1000 // 远截面
);
camera.position.z = 2; // 相机位置
// 渲染器
const renderer = new THREE.WebGLRenderer({
antialias: true // 开启抗锯齿
});
renderer.setPixelRatio(window.devicePixelRatio); // 设备像素比
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);📊 参数详解
| 参数 | 值 | 说明 |
|---|---|---|
| FOV | 75 | 视野角度，值越大视野越广 |
| 宽高比 | innerWidth/innerHeight | 保持画面不变形 |
| 近截面 | 0.1 | 小于该距离的物体不渲染 |
| 远截面 | 1000 | 大于该距离的物体不渲染 |
| 相机 Z 轴 | 2 | 相机距离原点的距离 |
🎯 相机位置示意图
┌─────────────────────────────────────────────────────────────┐
│ 相机位置示意 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 📷 相机 (z=2) │
│ │ │
│ │ 看向 │
│ ↓ │
│ 🌍 地球 (0,0,0) │
│ │
│ X 轴 → 左右旋转 │
│ Y 轴 → 上下旋转 │
│ Z 轴 → 前后移动 │
│ │
└─────────────────────────────────────────────────────────────┘11. 地球材质与纹理
🔍 几何体创建
const geometry = new THREE.SphereGeometry(1, 64, 64);| 参数 | 值 | 说明 |
|---|---|---|
| 半径 | 1 | 球体半径 |
| 水平分段 | 64 | 经线方向分段数 |
| 垂直分段 | 64 | 纬线方向分段数 |
💡 提示：分段数越高，球体越圆滑，但性能消耗越大。64×64 是质量和性能的平衡点。
🔍 纹理加载
const textureLoader = new THREE.TextureLoader();
// 三种纹理
const map = textureLoader.load('earth_atmos_2048.jpg'); // 颜色纹理
const bumpMap = textureLoader.load('earth_normal_2048.jpg'); // 法线贴图
const specularMap = textureLoader.load('earth_specular_2048.jpg'); // 高光贴图🎨 三种纹理对比
┌─────────────────────────────────────────────────────────────┐
│ 纹理类型对比 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🗺️ 颜色纹理 (map) │
│ ═══════════ │
│ • 显示地球表面颜色 │
│ • 包含陆地、海洋、云层 │
│ • 基础视觉效果 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 🏔️ 法线贴图 (bumpMap) │
│ ═══════════ │
│ • 模拟表面凹凸效果 │
│ • 增强山脉、地形的立体感 │
│ • bumpScale 控制凹凸强度 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ ✨ 高光贴图 (specularMap) │
│ ═══════════ │
│ • 控制反光强度 │
│ • 海洋反光强，陆地反光弱 │
│ • 增强真实感 │
│ │
└─────────────────────────────────────────────────────────────┘🔍 材质配置
const material = new THREE.MeshPhongMaterial({
map: map, // 颜色纹理
bumpMap: bumpMap, // 法线贴图
bumpScale: 0.05, // 凹凸强度
specularMap: specularMap, // 高光贴图
specular: new THREE.Color(0x333333), // 高光颜色
shininess: 5 // 光泽度
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);📊 材质参数说明
| 参数 | 值 | 效果 |
|---|---|---|
| bumpScale | 0.05 | 凹凸强度，值越大越明显 |
| specular | 0x333333 | 高光颜色（深灰色） |
| shininess | 5 | 光泽度，值越大越亮 |
12. 灯光系统
🔍 灯光配置
// 环境光 - 基础照明
const ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);
// 方向光 - 模拟太阳
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(2, 1, 3).normalize();
scene.add(directionalLight);💡 灯光类型对比
┌─────────────────────────────────────────────────────────────┐
│ 灯光类型对比 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🌑 环境光 (AmbientLight) │
│ ═════════════ │
│ • 均匀照亮整个场景 │
│ • 无方向性 │
│ • 防止背光面全黑 │
│ • 颜色：0x404040（深灰色） │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ ☀️ 方向光 (DirectionalLight) │
│ ═════════════ │
│ • 模拟平行光源（如太阳） │
│ • 有方向性 │
│ • 产生明暗对比 │
│ • 位置：(2, 1, 3) 归一化 │
│ │
└─────────────────────────────────────────────────────────────┘🎯 灯光效果示意
┌─────────────────────────────────────────────────────────────┐
│ 灯光效果示意 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ☀️ 方向光 │
│ ╱ │
│ ╱ │
│ ╱ │
│ 🌍 地球 │
│ ╱│ │
│ ╱ │ 环境光（整体） │
│ │
│ 亮面 ← 方向光照射 │
│ 暗面 ← 背光面 │
│ │
└─────────────────────────────────────────────────────────────┘13. 鼠标交互控制
🔍 变量定义
let isDragging = false;
let previousMousePosition = {
x: 0,
y: 0
};🔍 事件处理函数
// 鼠标按下
function onMouseDown(event) {
isDragging = true;
previousMousePosition = {
x: event.clientX,
y: event.clientY
};
}
// 鼠标移动
function onMouseMove(event) {
if (isDragging) {
const deltaX = event.clientX - previousMousePosition.x;
const deltaY = event.clientY - previousMousePosition.y;
// 根据鼠标移动调整地球旋转
earth.rotation.y += deltaX * 0.01;
earth.rotation.x += deltaY * 0.01;
previousMousePosition = {
x: event.clientX,
y: event.clientY
};
}
}
// 鼠标释放
function onMouseUp() {
isDragging = false;
}
// 鼠标离开
function onMouseLeave() {
isDragging = false;
}
// 禁用右键菜单
function onContextMenu(event) {
event.preventDefault();
}🔍 事件监听器绑定
renderer.domElement.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mouseup', onMouseUp, false);
renderer.domElement.addEventListener('mouseleave', onMouseLeave, false);
renderer.domElement.addEventListener('contextmenu', onContextMenu, false);🎮 交互流程图
┌─────────────────────────────────────────────────────────────┐
│ 交互控制流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ 鼠标按下 │ ──→ isDragging = true │
│ │ mousedown │ 记录起始位置 │
│ └─────────────┘ │
│ ↓ │
│ ┌─────────────┐ │
│ │ 鼠标移动 │ ──→ 计算位移差 │
│ │ mousemove │ 更新旋转角度 │
│ │ (isDragging)│ 更新上次位置 │
│ └─────────────┘ │
│ ↓ │
│ ┌─────────────┐ │
│ │ 鼠标释放 │ ──→ isDragging = false │
│ │ mouseup │ 恢复自动旋转 │
│ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘📊 旋转参数说明
| 参数 | 值 | 说明 |
|---|---|---|
| deltaX * 0.01 | Y 轴旋转 | 水平拖动控制左右旋转 |
| deltaY * 0.01 | X 轴旋转 | 垂直拖动控制上下旋转 |
| 0.01 | 灵敏度 | 值越大旋转越快 |
14. 动画循环
🔍 核心代码
function animate() {
requestAnimationFrame(animate);
// 非拖动状态下自动旋转
if (!isDragging) {
earth.rotation.y += 0.001;
}
renderer.render(scene, camera);
}
animate();🔄 动画原理
┌─────────────────────────────────────────────────────────────┐
│ 动画循环原理 │
├─────────────────────────────────────────────────────────────┤
│ │
│ requestAnimationFrame(animate) │
│ ↓ │
│ 浏览器准备下一帧渲染 │
│ ↓ │
│ 检查是否拖动 │
│ ↓ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ 拖动中 │ │ 未拖动 │ │
│ │ 不自动旋转 │ │ 自动旋转 │ │
│ └─────────────┘ └─────────────┘ │
│ ↓ ↓ │
│ renderer.render() ←───┘ │
│ ↓ │
│ 重复循环（约 60fps） │
│ │
└─────────────────────────────────────────────────────────────┘📊 响应式适配
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);| 操作 | 说明 |
|---|---|
| 更新宽高比 | 保持画面不变形 |
| 更新投影矩阵 | 应用新的宽高比 |
| 更新渲染器尺寸 | 适配新窗口大小 |
第五部分：扩展与优化
15. 功能扩展建议
🚀 可扩展功能
┌─────────────────────────────────────────────────────────────┐
│ 功能扩展建议 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 🌟 基础扩展 │
│ ├── 添加月球绕地球旋转 │
│ ├── 添加大气层效果 │
│ ├── 添加星空背景 │
│ └── 添加云层动画 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 📍 交互扩展 │
│ ├── 鼠标滚轮缩放 │
│ ├── 点击显示地点信息 │
│ ├── 添加标记点（城市/景点） │
│ └── OrbitControls 专业控制 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 📊 数据可视化 │
│ ├── 显示飞行航线 │
│ ├── 显示人口密度 │
│ ├── 显示天气数据 │
│ └── 显示实时地震 │
│ │
└─────────────────────────────────────────────────────────────┘💡 扩展代码示例
添加星空背景
// 创建星空
function createStars() {
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({color: 0xffffff});
const starVertices = [];
for(let i = 0; i < 10000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = (Math.random() - 0.5) * 2000;
starVertices.push(x, y, z);
}
starGeometry.setAttribute('position',
new THREE.Float32BufferAttribute(starVertices, 3));
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
}
createStars();添加鼠标滚轮缩放
camera.position.z = 2;
renderer.domElement.addEventListener('wheel', (event) => {
camera.position.z += event.deltaY * 0.001;
camera.position.z = Math.max(1.5, Math.min(5, camera.position.z));
});使用 OrbitControls（推荐）
<!-- 引入 OrbitControls -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
// 添加控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.autoRotate = true;
controls.autoRotateSpeed = 1.0;
// 在 animate 中更新
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>16. 性能优化
⚡ 优化建议
┌─────────────────────────────────────────────────────────────┐
│ 性能优化建议 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ✅ 几何体优化 │
│ • 适当降低分段数（32×32 足够） │
│ • 使用 LOD（多细节层次） │
│ │
│ ✅ 纹理优化 │
│ • 使用压缩纹理（KTX/DDS） │
│ • 根据设备选择纹理大小 │
│ • 使用纹理压缩格式 │
│ │
│ ✅ 渲染优化 │
│ • 限制最大帧率 │
│ • 离屏时暂停渲染 │
│ • 使用请求动画帧 │
│ │
│ ✅ 资源管理 │
│ • 及时释放不用的资源 │
│ • 使用纹理缓存 │
│ • 延迟加载资源 │
│ │
└─────────────────────────────────────────────────────────────┘🔧 代码优化示例
// 优化 1：降低几何体分段数
const geometry = new THREE.SphereGeometry(1, 32, 32); // 64→32
// 优化 2：离屏时暂停渲染
let isVisible = true;
document.addEventListener('visibilitychange', () => {
isVisible = !document.hidden;
});
function animate() {
if (isVisible) {
requestAnimationFrame(animate);
// ... 渲染代码
} else {
requestAnimationFrame(animate);
}
}
// 优化 3：使用纹理压缩
// 在生产环境中使用 .ktx 或 .dds 格式17. 常见问题
❓ FAQ
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 地球不显示 | 纹理加载失败 | 检查 CDN 链接，使用本地纹理 |
| 画面模糊 | 像素比未设置 | 添加 setPixelRatio |
| 拖动卡顿 | 性能问题 | 降低几何体分段数 |
| 移动端无法拖动 | 缺少触摸事件 | 添加 touch 事件监听 |
| 窗口缩放变形 | 未更新相机 | 添加 resize 事件处理 |
🔍 移动端适配
// 添加触摸事件支持
let touchStartX = 0;
let touchStartY = 0;
renderer.domElement.addEventListener('touchstart', (event) => {
isDragging = true;
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
});
renderer.domElement.addEventListener('touchmove', (event) => {
if (isDragging) {
const deltaX = event.touches[0].clientX - touchStartX;
const deltaY = event.touches[0].clientY - touchStartY;
earth.rotation.y += deltaX * 0.01;
earth.rotation.x += deltaY * 0.01;
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
}
});
renderer.domElement.addEventListener('touchend', () => {
isDragging = false;
});📝 总结
核心知识点回顾
┌─────────────────────────────────────────────────────────────┐
│ 知识点总览 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Three.js 基础 │
│ ├── Scene（场景） │
│ ├── Camera（相机） │
│ ├── Renderer（渲染器） │
│ └── Geometry + Material = Mesh │
│ │
│ 材质与纹理 │
│ ├── 颜色纹理（map） │
│ ├── 法线贴图（bumpMap） │
│ └── 高光贴图（specularMap） │
│ │
│ 灯光系统 │
│ ├── AmbientLight（环境光） │
│ └── DirectionalLight（方向光） │
│ │
│ 交互控制 │
│ ├── 鼠标事件监听 │
│ ├── 旋转角度计算 │
│ └── 动画循环 │
│ │
│ 响应式适配 │
│ ├── 窗口 resize 处理 │
│ ├── 设备像素比适配 │
│ └── 移动端触摸支持 │
│ │
└─────────────────────────────────────────────────────────────┘🎯 学习路线建议
┌─────────────────────────────────────────────────────────────┐
│ Three.js 学习路线 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 📌 第一阶段：基础 │
│ ├── 场景搭建 │
│ ├── 几何体与材质 │
│ └── 本项目的地球模型 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 📌 第二阶段：交互 │
│ ├── 鼠标/触摸控制 │
│ ├── OrbitControls │
│ └── 点击检测 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 📌 第三阶段：进阶 │
│ ├── 粒子系统 │
│ ├── 着色器编程 │
│ └── 物理引擎 │
│ │
│ ───────────────────────────────────────────────────────── │
│ │
│ 📌 第四阶段：实战 │
│ ├── 数据可视化 │
│ ├── 游戏开发 │
│ └── VR/AR 应用 │
│ │
└─────────────────────────────────────────────────────────────┘📚 推荐资源
| 类型 | 名称 | 链接 |
|---|---|---|
| 官网 | Three.js 官方网站 | https://threejs.org |
| 文档 | Three.js 文档 | https://threejs.org/docs |
| 示例 | Three.js 示例 | https://threejs.org/examples |
| 教程 | Three.js 入门教程 | https://threejs-journey.com |
| 社区 | GitHub | https://github.com/mrdoob/three.js |
| 中文 | Three.js 中文网 | http://www.webgl3d.cn |
💬 结语
"3D 可视化是前端开发的重要方向，掌握 Three.js，让你的网页更加生动！"
通过本项目，你已经：
- ✅ 掌握了 Three.js 的基本使用流程
- ✅ 理解了 3D 场景、相机、渲染器的关系
- ✅ 学会了材质与纹理的应用
- ✅ 实现了鼠标交互控制
- ✅ 完成了响应式适配
下一步建议：
- 尝试添加更多功能（月球、星空、标记点）
- 学习 OrbitControls 专业控制器
- 探索粒子系统和着色器
- 将地球模型应用到实际项目中
记住 ：3D 世界的大门已经打开，尽情发挥你的创造力！
📅 更新时间：2026 年 3 月 24 日
✍️ 作者：书到用时方恨少!
💌 如有疑问，欢迎在评论区留言讨论！
如果这篇博客对你有帮助，请点赞👍、收藏⭐、转发🔄，让更多的小伙伴一起探索 3D 世界！