echarts 3D地球实现自动旋转-蒲公英云

echarts 3D地球实现自动旋转

素材下载码云或GitHub

1、引入js文件及准备素材。js文件及素材下载参照官网 https://echarts.baidu.com/download.html

    <script src="../js/lib/echarts.min.js"></script>  
    <script src="../js/lib/echarts-gl.min.js"></script>  
    <script src="../js/lib/world.js"></script>

所需素材：world.jpg、starfield.jpg、pisa.hdr

2、配置option

option = {
backgroundColor: “#000”,
globe:{
baseTexture: “../img/world.jpg”,
heightTexture: “../img/world.jpg”,
displacementScale: 0.04,
environment: “../img/starfield.jpg”,
shading:”realistic”,
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: “../img/pisa.hdr”,
diffuseIntensity: 0.2
}
}
}
};

3、全部代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="earth" style="width: 100%; height: 600px"></div>
        <script src="../js/lib/echarts.min.js"></script>
        <script src="../js/lib/echarts-gl.min.js"></script>
        <script src="../js/lib/world.js"></script>
        <script>
        var dom = document.getElementById("earth")
        var myChart = echarts.init(dom);
        option = {
              backgroundColor: "#000",
              globe:{
                baseTexture: "../img/world.jpg",
                heightTexture: "../img/world.jpg",
                 displacementScale: 0.04,
                environment: "../img/starfield.jpg",
                shading:"realistic",
                realisticMaterial: {
                    roughness: 0.9
                },
                postEffect: {
                    enable: true
                },
                light: {
                    main: {
                        intensity: 5,
                        shadow: true
                    },
                    ambientCubemap: {
                        texture: "../img/pisa.hdr",
                        diffuseIntensity: 0.2
                    }
                }
              }
        };
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
        </script>
    </body>
</html>