ThreeJs实现裸眼3D地球仪

海哥  论坛元老 | 2025-4-15 14:22:49 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1589|帖子 1589|积分 4767

一、实现结果

使用Three.js实现裸眼3D地球仪
      
  二、实当代码

代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>3D Earth</title>
  5.     <style>
  6.         body { margin: 0; }
  7.         canvas { display: block; }
  8.     </style>
  9. </head>
  10. <body>
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  12.     <script>
  13.         // 初始化场景、相机和渲染器
  14.         const scene = new THREE.Scene();
  15.         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  16.         const renderer = new THREE.WebGLRenderer();
  17.         renderer.setSize(window.innerWidth, window.innerHeight);
  18.         document.body.appendChild(renderer.domElement);
  20.         // 创建地球几何体
  21.         const geometry = new THREE.SphereGeometry(5, 50, 50);
  23.         // 加载纹理
  24.         const textureLoader = new THREE.TextureLoader();
  25.         const earthTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
  26.         const normalTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
  28.         // 创建材质
  29.         const material = new THREE.MeshPhongMaterial({
  30.             map: earthTexture,
  31.             normalMap: normalTexture,
  32.             normalScale: new THREE.Vector2(0.8, 0.8),
  33.             specular: new THREE.Color('grey'),
  34.             shininess: 5
  35.         });
  37.         // 创建地球网格
  38.         const earth = new THREE.Mesh(geometry, material);
  39.         scene.add(earth);
  41.         // 添加光照
  42.         const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  43.         scene.add(ambientLight);
  45.         const pointLight = new THREE.PointLight(0xffffff, 1.5);
  46.         pointLight.position.set(10, 10, 10);
  47.         scene.add(pointLight);
  49.         // 设置相机位置
  50.         camera.position.z = 15;
  52.         // 添加自动旋转动画
  53.         function animate() {
  54.             requestAnimationFrame(animate);
  55.             earth.rotation.y += 0.002;
  56.             renderer.render(scene, camera);
  57.         }
  59.         // 处理窗口大小变化
  60.         window.addEventListener('resize', onWindowResize, false);
  62.         function onWindowResize() {
  63.             camera.aspect = window.innerWidth / window.innerHeight;
  64.             camera.updateProjectionMatrix();
  65.             renderer.setSize(window.innerWidth, window.innerHeight);
  66.         }
  68.         // 添加鼠标交互
  69.         let isDragging = false;
  70.         let previousMousePosition = {
  71.             x: 0,
  72.             y: 0
  73.         };
  75.         document.addEventListener('mousedown', (e) => {
  76.             isDragging = true;
  77.             previousMousePosition = {
  78.                 x: e.clientX,
  79.                 y: e.clientY
  80.             };
  81.         });
  83.         document.addEventListener('mousemove', (e) => {
  84.             if (!isDragging) return;
  86.             const deltaMove = {
  87.                 x: e.clientX - previousMousePosition.x,
  88.                 y: e.clientY - previousMousePosition.y
  89.             };
  91.             earth.rotation.y += deltaMove.x * 0.005;
  92.             earth.rotation.x += deltaMove.y * 0.005;
  94.             previousMousePosition = {
  95.                 x: e.clientX,
  96.                 y: e.clientY
  97.             };
  98.         });
  100.         document.addEventListener('mouseup', () => {
  101.             isDragging = false;
  102.         });
  104.         // 启动动画
  105.         animate();
  106.     </script>
  107. </body>
  108. </html>
复制代码
这个示例代码包含以下重要功能：

  • 创建了一个基本的Three.js场景，包含：

    • 球体几何图形
    • 地球纹理贴图（颜色贴图和法线贴图）
    • 光影结果（环境光 + 点光源）

  • 重要特性：

    • 地球主动迟钝旋转
    • 支持鼠标拖拽交互旋转
    • 相应式窗口大小调整
    • 法线贴图实现表面细节
    • 适当的光照结果

  • 使用阐明：

    • 必要网络连接加载纹理贴图
    • 可以替换纹理贴图URL使用自界说贴图
    • 通过调整SphereGeometry参数控制地球精度
    • 修改rotation速率可以改变旋转速率
    • 调整camera.position.z改变观察距离

  • 扩展发起：

    • 添加云层（使用透明贴图的第二个球体）
    • 添加星空背景
    • 添加标记点或国家界限
    • 添加放大/缩小功能
    • 添加旋转控制按钮

注意：由于纹理加载必要时间，初次加载可能会看到短暂的空白场景。现实使用时发起：

  • 使用当地纹理文件
  • 添加加载进度提示
  • 使用更高分辨率的贴图
  • 添加错误处理
可以将代码生存为HTML文件直接运行（必要网络连接），也可以部署到Web服务器使用当地资源。
三、重点代码片段

1. 地球材质创建（焦点渲染）

  1. // 加载纹理
  2. const textureLoader = new THREE.TextureLoader();
  3. const earthTexture = textureLoader.load('earth_texture.jpg');
  4. const normalTexture = textureLoader.load('earth_normal.jpg');
  6. // 创建材质
  7. const material = new THREE.MeshPhongMaterial({
  8.     map: earthTexture,          // 基础颜色贴图
  9.     normalMap: normalTexture,   // 法线贴图
  10.     normalScale: new THREE.Vector2(0.8, 0.8), // 法线强度
  11.     specular: new THREE.Color('grey'), // 高光颜色
  12.     shininess: 5                // 高光强度
  13. });
复制代码

  • 材质类型选择：

    • 使用 MeshPhongMaterial（冯氏材质），这是实现光照交互的关键
    • 支持高光反射结果，得当表现具有反光特性的地球表面

  • 纹理映射：

    • map：底子颜色贴图，直接表现地球表面图像
    • normalMap：法线贴图，通过RGB值模拟表面凹凸细节（无需增加几何体复杂度）

  • 材质参数：

    • normalScale：控制法线贴图的强度（值越大凹凸感越强）
    • specular + shininess：组合控制高光结果（金属感/塑料感调治）

  • 性能优化：

    • 纹理尺寸发起保持2的幂次（如1024x512），否则可能触发Three.js的主动缩放
    • 可以添加 bumpMap 或 specularMap 实现更复杂的表面细节

2. 交互旋转实现（焦点交互）

  1. // 鼠标拖动交互
  2. let isDragging = false;
  3. let previousMousePosition = { x: 0, y: 0 };
  5. document.addEventListener('mousedown', (e) => {
  6.     isDragging = true;
  7.     previousMousePosition = { x: e.clientX, y: e.clientY };
  8. });
  10. document.addEventListener('mousemove', (e) => {
  11.     if (!isDragging) return;
  13.     const deltaMove = {
  14.         x: e.clientX - previousMousePosition.x,
  15.         y: e.clientY - previousMousePosition.y
  16.     };
  18.     earth.rotation.y += deltaMove.x * 0.005;
  19.     earth.rotation.x += deltaMove.y * 0.005;
  21.     previousMousePosition = { x: e.clientX, y: e.clientY };
  22. });
  24. document.addEventListener('mouseup', () => {
  25.     isDragging = false;
  26. });
复制代码

  • 交互原理：

    • 通过监听鼠标变乱实现拖拽利用
    • 计算两次鼠标位置的差值（deltaMove）转换为旋转量

  • 数学转换：

    • delta.x 影响 Y 轴旋转（程度拖动→左右旋转）
    • delta.y 影响 X 轴旋转（垂直拖动→上下旋转）
    • 0.005 是敏捷度系数，值越大拖动反应越敏捷

  • 坐标系注意：

    • Three.js使用右手坐标系，Y轴向上
    • 旋转顺序遵循物体自身坐标系（可能导致万向节锁问题，复杂交互必要四元数）

  • 性能优化：

    • 使用 requestAnimationFrame 包管动画流畅性
    • 避免在变乱回调中直接修改DOM



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

海哥

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表