echarts 3D地球实现自动旋转

小巷陌影(xxmoying)

16735人浏览 · 2019-03-12 13:15:33

小巷陌影(xxmoying) · 2019-03-12 13:15:33 发布

素材下载 码云或GitHub

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

所需素材：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>

效果如图：