echarts 3D地球实现自动旋转

时间：2024-02-20 15:32:40

素材已上传至https://gitee.com/i1520/echarts3DEarth.git     https://github.com/i1520/echarts3DEarth

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>

效果如图：

​

相关文章