3d地球旋转html,echarts 3D地球实现自动旋转

所需素材：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、全部代码如下：

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);

}

效果如图：