ThreeJs实现裸眼3D地球仪
一、实现效果
使用Three.js实现裸眼3D地球仪
二、实现代码
代码如下：
<!DOCTYPE html>
<html>
<head><title>3D Earth</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建地球几何体const geometry = new THREE.SphereGeometry(5, 50, 50);// 加载纹理const textureLoader = new THREE.TextureLoader();const earthTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');const normalTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');// 创建材质const material = new THREE.MeshPhongMaterial({map: earthTexture,normalMap: normalTexture,normalScale: new THREE.Vector2(0.8, 0.8),specular: new THREE.Color('grey'),shininess: 5});// 创建地球网格const earth = new THREE.Mesh(geometry, material);scene.add(earth);// 添加光照const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);const pointLight = new THREE.PointLight(0xffffff, 1.5);pointLight.position.set(10, 10, 10);scene.add(pointLight);// 设置相机位置camera.position.z = 15;// 添加自动旋转动画function animate() {requestAnimationFrame(animate);earth.rotation.y += 0.002;renderer.render(scene, camera);}// 处理窗口大小变化window.addEventListener('resize', onWindowResize, false);function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}// 添加鼠标交互let isDragging = false;let previousMousePosition = {x: 0,y: 0};document.addEventListener('mousedown', (e) => {isDragging = true;previousMousePosition = {x: e.clientX,y: e.clientY};});document.addEventListener('mousemove', (e) => {if (!isDragging) return;const deltaMove = {x: e.clientX - previousMousePosition.x,y: e.clientY - previousMousePosition.y};earth.rotation.y += deltaMove.x * 0.005;earth.rotation.x += deltaMove.y * 0.005;previousMousePosition = {x: e.clientX,y: e.clientY};});document.addEventListener('mouseup', () => {isDragging = false;});// 启动动画animate();</script>
</body>
</html>这个示例代码包含以下主要功能：
-
创建了一个基本的Three.js场景，包含：
-
球体几何图形
-
地球纹理贴图（颜色贴图和法线贴图）
-
光影效果（环境光 + 点光源）
-
-
主要特性：
-
地球自动缓慢旋转
-
支持鼠标拖拽交互旋转
-
响应式窗口大小调整
-
法线贴图实现表面细节
-
适当的光照效果
-
-
使用说明：
-
需要网络连接加载纹理贴图
-
可以替换纹理贴图URL使用自定义贴图
-
通过调整SphereGeometry参数控制地球精度
-
修改rotation速度可以改变旋转速度
-
调整camera.position.z改变观察距离
-
-
扩展建议：
-
添加云层（使用透明贴图的第二个球体）
-
添加星空背景
-
添加标记点或国家边界
-
添加放大/缩小功能
-
添加旋转控制按钮
-
注意：由于纹理加载需要时间，首次加载可能会看到短暂的空白场景。实际使用时建议：
-
使用本地纹理文件
-
添加加载进度提示
-
使用更高分辨率的贴图
-
添加错误处理
可以将代码保存为HTML文件直接运行（需要网络连接），也可以部署到Web服务器使用本地资源。
三、重点代码片段
1. 地球材质创建（核心渲染）
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const earthTexture = textureLoader.load('earth_texture.jpg');
const normalTexture = textureLoader.load('earth_normal.jpg');// 创建材质
const material = new THREE.MeshPhongMaterial({map: earthTexture, // 基础颜色贴图normalMap: normalTexture, // 法线贴图normalScale: new THREE.Vector2(0.8, 0.8), // 法线强度specular: new THREE.Color('grey'), // 高光颜色shininess: 5 // 高光强度
});-
材质类型选择：
-
使用
MeshPhongMaterial（冯氏材质），这是实现光照交互的关键 -
支持高光反射效果，适合表现具有反光特性的地球表面
-
-
纹理映射：
-
map：基础颜色贴图，直接显示地球表面图像 -
normalMap：法线贴图，通过RGB值模拟表面凹凸细节（无需增加几何体复杂度）
-
-
材质参数：
-
normalScale：控制法线贴图的强度（值越大凹凸感越强） -
specular+shininess：组合控制高光效果（金属感/塑料感调节）
-
-
性能优化：
-
纹理尺寸建议保持2的幂次（如1024x512），否则可能触发Three.js的自动缩放
-
可以添加
bumpMap或specularMap实现更复杂的表面细节
-
2. 交互旋转实现（核心交互）
// 鼠标拖动交互
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };document.addEventListener('mousedown', (e) => {isDragging = true;previousMousePosition = { x: e.clientX, y: e.clientY };
});document.addEventListener('mousemove', (e) => {if (!isDragging) return;const deltaMove = {x: e.clientX - previousMousePosition.x,y: e.clientY - previousMousePosition.y};earth.rotation.y += deltaMove.x * 0.005;earth.rotation.x += deltaMove.y * 0.005;previousMousePosition = { x: e.clientX, y: e.clientY };
});document.addEventListener('mouseup', () => {isDragging = false;
});-
交互原理：
-
通过监听鼠标事件实现拖拽操作
-
计算两次鼠标位置的差值（
deltaMove）转换为旋转量
-
-
数学转换：
-
delta.x影响 Y 轴旋转（水平拖动→左右旋转） -
delta.y影响 X 轴旋转（垂直拖动→上下旋转） -
0.005是灵敏度系数，值越大拖动反应越灵敏
-
-
坐标系注意：
-
Three.js使用右手坐标系，Y轴向上
-
旋转顺序遵循物体自身坐标系（可能导致万向节锁问题，复杂交互需要四元数）
-
-
性能优化：
-
使用
requestAnimationFrame保证动画流畅性 -
避免在事件回调中直接修改DOM
-
