3d地球
程序员文章站
2022-05-26 19:41:26
...
项目结构如下：
这个时3d地区旋转的源码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript"
src="./js/echarts/echart.min.js"></script>
<script type="text/javascript" src="./js/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript"
src="./js/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="./js/echarts/extension/dataTool.min.js"></script>
<script
type="text/javascript" src="./js/echarts/map/js/china.js"></script>
<script type="text/javascript" src="./js/echarts/map/js/world.js"></script>
<!--百度**需要去百度地图api申请-->
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=VQ8nwpflfhcBIaC0yjFsgzIBIF19Zh4T&__ec_v__=20190126"></script>
<script type="text/javascript" src="./js/echarts/extension/bmap.min.js"></script>
<script
type="text/javascript" src="./js/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var ROOT_PATH = "";
option = null;
option = {
backgroundColor: '#000',
globe: {
baseTexture: 'img/earth.jpg',
heightTexture:'img/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.1,
shading: 'lambert',
environment: 'img/starfield.jpg',
light: {
ambient: {
intensity: 0.1
},
main: {
intensity: 1.5
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: 'img/night.jpg'
}, {
type: 'overlay',
texture: 'img/clouds.png',
shading: 'lambert',
distance: 500
}]
},
series: []
}
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
3d立体影像js，其他与上面相同：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var ROOT_PATH = "";
option = null;
option = {
backgroundColor: '#000',
globe: {
baseTexture: "img/world.topo.bathy.200401.jpg",
heightTexture: "img/bathymetry_bw_composite_4k.jpg",
displacementScale: 0.2,
shading: 'realistic',
environment: 'img/starfield.jpg',
realisticMaterial: {
roughness: ROOT_PATH + 'asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
metalness: ROOT_PATH + 'asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
textureTiling: [8, 4]
},
postEffect: {
enable: true
},
viewControl: {
autoRotate: true
},
light: {
main: {
intensity: 2,
shadow: true
},
ambientCubemap: {
texture: 'hdr/pisa.hdr',
exposure: 2,
diffuseIntensity: 2,
specularIntensity: 2
}
}
},
series: []
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
我自己凑出的3d影像旋转：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var ROOT_PATH = "";
option = null;
option = {
backgroundColor: '#000',
globe: {
baseTexture: 'img/world.topo.bathy.200401.jpg',
heightTexture:'img/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.2,
shading: 'realistic',
environment: 'img/starfield.jpg',
realisticMaterial: {
roughness: ROOT_PATH + 'asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
metalness: ROOT_PATH + 'asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
textureTiling: [8, 4]
},
postEffect: {
enable: true
},
viewControl: {
autoRotate: true
},
light: {
ambient: {
intensity: 0.1
},
main: {
intensity: 2,
shadow: true
},
ambientCubemap: {
texture: 'hdr/pisa.hdr',
exposure: 2,
diffuseIntensity: 2,
specularIntensity: 2
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: 'img/night.jpg'
}, {
type: 'overlay',
texture: 'img/clouds.png',
shading: 'lambert',
distance: 500
}]
},
series: []
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
3D柱状图：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
$.getScript( 'js/simplex.js').done(function () {
var noise = new SimplexNoise(Math.random);
function generateData(theta, min, max) {
var data = [];
for (var i = 0; i <= 20; i++) {
for (var j = 0; j <= 20; j++) {
var value = noise.noise2D(i / 20, j / 20);
valMax = Math.max(valMax, value);
valMin = Math.min(valMin, value);
data.push([i, j, value * 2 + 4]);
}
}
return data;
}
var valMin = Infinity;
var valMax = -Infinity;
var data = generateData(2, -5, 5);
myChart.setOption(option = {
tooltip: {},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value',
max: 10,
min: 0
},
grid3D: {
environment: '#000',
axisPointer: {
show: false
},
postEffect: {
enable: true,
SSAO: {
enable: true,
radius: 5
}
},
light: {
main: {
intensity: 3
},
ambientCubemap: {
texture:'hdr/pisa.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
}
},
series: [{
type: 'bar3D',
data: data,
barSize: 4,
bevelSize: 0.4,
bevelSmoothness: 4,
shading: 'realistic',
realisticMaterial: {
roughness: 0.3,
metalness: 1
},
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
itemStyle: {
color: '#ccc'
},
emphasis: {
label: {
show: false
}
}
}]
});
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
图片可以在我的资源里找
上一篇： 值得收藏的精致的动态祝福图片
下一篇： Tkinter教程之Canvas篇(2)