手把手教你做出数据可视化项目(三)3D地球旋转_大数据旋转动态是怎么做的

3D大地球旋转

在这里插入图片描述
看这个炫酷的3D大地球帅不!

直接上代码~~~,可以直接做模板放在js文件中使用!!!!
JS代码:(注释很详细,看不懂功能的看注释)

 /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* 3D地球 \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
    //初始化echart实例
    const globe3D = echarts.init(document.getElementById("globe3D"));
    //配置项
    const globeOpt = {
      globe: {
        zoom: 0.9,
        environment: 'images/bg01.jpg', //环境贴图
        baseTexture: "images/globe.jpg", //地球的纹理
        heightTexture: "images/globe.jpg", //地图的高度纹理
        displacementScale: 0, //地球顶点位移的大小
        shading: 'realistic', //着色效果,真实感渲染
        realisticMaterial: { //真实感渲染配置
          roughness: 0.8 //材质的粗糙度
        },
        postEffect: { //后处理特效配置
          enable: true
        },
        // viewControl: { //控制地球是否自转
        // autoRotate: false
        // },
        light: { //光照设置
          main: { //场景主光源设置,在globe设置中就是太阳光
            intensity: 4, //主光源强度
            shadow: true //是否投影
          },
          ambientCubemap: { //使用纹理作为光源的环境光, 会为物体提供漫反射和高光反射
            texture: 'images/pisa.hdr', //环境光贴图
            diffuseIntensity: 0.1 //漫反射强度
          }
        }
      }
    };
    //渲染图表
    globe3D.setOption(globeOpt);

这个效果是echarts库中自带的globe属性,我们在echarts官网上可以找到实例
在这里插入图片描述

实际上就是两张大贴纸!一张是环境贴纸,一张是地球贴纸。贴纸奉上!拿走不送~~

在这里插入图片描述

在这里插入图片描述

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

后续会持续更新**

需要这份系统化资料的朋友,可以戳这里获取

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值