echarts 3D地球实现自动旋转

素材下载 码云或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、全部代码如下:



	
		
		
	
	
		

效果如图:

素材下载 码云或GitHub

你可能感兴趣的:(javascript,echarts,3D,地球)