android 3D地球旋转是如何实现的 3d地球旋转动态壁纸

转载

mob64ca13ff28f1 2024-06-07 19:36:02

android 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官网上可以找到实例

android 3D地球旋转是如何实现的 3d地球旋转动态壁纸_3D_02