echarts 3D地球

最新推荐文章于 2024-06-19 15:10:02 发布

typico

最新推荐文章于 2024-06-19 15:10:02 发布

阅读量6.2k

点赞数

分类专栏： echart

echart 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述
需要的文件：
代码中的三个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>

typico

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
echarts 3D地球

效果图需要的文件：代码中的三个js文件官网可下、两张图片和pisa.hdr文件（实在找不到可去官网扒）需要注意的一点是如果你是在本地运行，无服务器的环境下，谷歌可能会报错，效果出不来，好像是因为跨域的问题，火狐可以代码如下<!DOCTYPE html><html><head> <meta charset="UTF-8"> &l...
复制链接

扫一扫

专栏目录