echarts 3D地球

效果图
在这里插入图片描述
需要的文件:
代码中的三个js文件官网可下、两张图片和pisa.hdr文件(实在找不到可去官网扒)
需要注意的一点是如果你是在本地运行,无服务器的环境下,谷歌可能会报错,效果出不来,好像是因为跨域的问题,火狐可以
代码如下(代码是网上的)

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

猜你喜欢

转载自blog.csdn.net/wxz340825/article/details/88785929
今日推荐