Three.js实战：从零搭建一个3D旋转地球（附完整代码）
Three.js实战：从零搭建3D旋转地球全流程解析
1. 项目准备与环境搭建
在开始构建3D旋转地球之前，我们需要确保开发环境准备就绪。Three.js作为WebGL的高级封装库，让3D图形开发变得触手可及。以下是基础环境配置步骤：
创建项目结构：
mkdir 3d-earth && cd 3d-earth npm init -y安装核心依赖：
npm install three three-orbitcontrolsHTML基础模板：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D Earth</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="src/main.js" type="module"></script> </body> </html>
提示：现代浏览器已原生支持ES模块，使用
type="module"可以直接导入npm包
2. 核心场景构建
2.1 初始化三大件
每个Three.js应用都始于三个核心对象的创建：
import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 初始化场景 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000814); // 透视相机配置 const camera = new THREE.PerspectiveCamera( 75, // 视场角 window.innerWidth / window.innerHeight, // 宽高比 0.1, // 近裁面 1000 // 远裁面 ); camera.position.z = 5; // WebGL渲染器 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // 添加轨道控制器 const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true;2.2 光照系统配置
真实的地球渲染需要精心设计的光照方案：
| 光源类型 | 参数配置 | 作用 |
|---|---|---|
| 环境光 | new THREE.AmbientLight(0x404040) | 基础照明 |
| 平行光 | new THREE.DirectionalLight(0xffffff, 1) | 模拟太阳光 |
| 点光源 | new THREE.PointLight(0xffffff, 0.5, 100) | 补充光照 |
// 创建光源组 const ambientLight = new THREE.AmbientLight(0x333333); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 3, 5); scene.add(directionalLight);3. 地球模型创建
3.1 几何体与材质
地球模型由球体几何体和多层材质组成：
// 创建球体几何体 const geometry = new THREE.SphereGeometry(2, 64, 64); // 加载地球纹理 const textureLoader = new THREE.TextureLoader(); const earthTexture = textureLoader.load('assets/earth_map.jpg'); const bumpMap = textureLoader.load('assets/earth_bump.jpg'); const specularMap = textureLoader.load('assets/earth_specular.jpg'); // 创建标准材质 const material = new THREE.MeshPhongMaterial({ map: earthTexture, bumpMap: bumpMap, bumpScale: 0.05, specularMap: specularMap, specular: new THREE.Color('grey'), shininess: 5 }); const earth = new THREE.Mesh(geometry, material); scene.add(earth);3.2 大气层效果
通过缩放球体并应用特殊材质实现大气散射效果：
// 大气层几何体 const atmosphereGeometry = new THREE.SphereGeometry(2.1, 64, 64); const atmosphereMaterial = new THREE.ShaderMaterial({ vertexShader: ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` varying vec3 vNormal; void main() { float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity; } `, blending: THREE.AdditiveBlending, side: THREE.BackSide, transparent: true }); const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial); earth.add(atmosphere);4. 动画与交互实现
4.1 自转动画控制
通过requestAnimationFrame实现平滑的地球自转：
function animate() { requestAnimationFrame(animate); // 地球自转 earth.rotation.y += 0.001; // 更新阻尼控制器 controls.update(); renderer.render(scene, camera); } animate();4.2 响应式处理
确保场景适应不同屏幕尺寸：
window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });5. 进阶效果增强
5.1 星空背景
使用粒子系统创建浩瀚星空：
// 创建星空几何体 const starGeometry = new THREE.BufferGeometry(); const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02, transparent: true, opacity: 0.8 }); // 生成随机星点 const starVertices = []; for (let i = 0; i < 5000; 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);5.2 云层效果
叠加透明云层纹理增强真实感：
const cloudGeometry = new THREE.SphereGeometry(2.05, 64, 64); const cloudTexture = textureLoader.load('assets/earth_clouds.jpg'); const cloudMaterial = new THREE.MeshPhongMaterial({ map: cloudTexture, transparent: true, opacity: 0.3 }); const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial); earth.add(clouds); // 云层以不同速度旋转 function animate() { // ... clouds.rotation.y += 0.0005; }6. 性能优化技巧
实现高质量3D效果的同时需要关注性能表现：
纹理压缩：使用512x512或1024x1024的压缩纹理
几何体优化：合理设置球体的分段数（widthSegments/heightSegments）
渲染策略：
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.outputEncoding = THREE.sRGBEncoding;按需渲染：当页面不可见时暂停渲染
document.addEventListener('visibilitychange', () => { if (document.hidden) { cancelAnimationFrame(animationId); } else { animate(); } });
7. 项目扩展方向
完成基础地球模型后，可以考虑以下增强功能：
- 国家边界高亮：使用额外纹理标记特定区域
- 实时天气数据：通过API动态展示云层和风暴
- 昼夜变化：根据真实时间计算光照角度
- 城市光点：在夜间显示主要城市灯光
- 飞行航线：添加动态的弧线表示主要航线
// 示例：添加动态航线 const createFlightPath = (start, end) => { const curve = new THREE.QuadraticBezierCurve3( start, new THREE.Vector3( (start.x + end.x) / 2, Math.max(start.y, end.y) + 0.5, (start.z + end.z) / 2 ), end ); const points = curve.getPoints(50); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: 0x00ffff }); return new THREE.Line(geometry, material); };在实现这些高级功能时，建议使用Three.js的后期处理通道（EffectComposer）来添加辉光、色彩校正等效果，这将显著提升视觉表现力。