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);
}
效果如圖：
總結
以上是生活随笔為你收集整理的3d地球旋转html,echarts 3D地球实现自动旋转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机工程与科学电话,【计算机工程与科学
- 下一篇： 2009年出现的计算机术语,2009年计