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

}

效果如圖：

總結

以上是生活随笔為你收集整理的3d地球旋转html,echarts 3D地球实现自动旋转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。