echarts 3D地球实现自动旋转

布满荆棘的人生 2022-03-09 04:36 1270阅读 0赞

## 素材下载 [码云][Link 1]或[GitHub][] ##

1、引入js文件及准备素材。js文件及素材下载参照官网        [https://echarts.baidu.com/download.html][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>

效果如图：

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]素材下载 [码云][Link 1]或[GitHub][] ##

[Link 1]: https://gitee.com/cbhx/echarts3DEarth
[GitHub]: https://github.com/cbhx/echarts3DEarth
[https_echarts.baidu.com_download.html]: https://echarts.baidu.com/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20220309/2c0c276a139b47e4b76f7d33888843b2.png