echarts 3D地球实现自动旋转

2024-04-23 21:53:52

素材下载码云或GitHub

1、引入js文件及准备素材。js文件及素材下载参照官网 https://echarts.baidu.com/download.html

<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/echarts-gl.min.js"></script>
<script src="../js/lib/world.js"></script>

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="earth" style="width: 100%; height: 600px"></div><script src="../js/lib/echarts.min.js"></script><script src="../js/lib/echarts-gl.min.js"></script><script src="../js/lib/world.js"></script><script>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);}</script></body>
</html>

效果如图：

素材下载码云或GitHub

echarts 3D地球实现自动旋转相关推荐

3d地球旋转html,echarts 3D地球实现自动旋转
所需素材:world.jpg.starfield.jpg.pisa.hdr 2.配置option option = { backgroundColor: "#000", globe ...
【vue前端】Echarts 3D地球照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件
使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
echarts 3d地球背面光线太暗_国内超炫裸眼3D案例鉴赏，大家更喜欢那一个！
即韩国娱乐公司SM的户外大屏上了热搜之后,国内也出现了一批.今天就给大家带来四个案例.成都太古里太古里网红LED巨幕,位于成都春熙路太古里核心商圈,项目分辨率达8K,总面积888㎡,裸眼3D巨幕与一 ...
echarts 3d地球背面光线太暗_新技术：多波长光源，同时3D打印多种光敏树脂材料...
如今,光固化3D打印技术已经被广泛的采用,在齿科.首饰.手办等领域,然而如上图一样的常规光固化3D打印机,一次仍然只能打印一种材料. △FDM技术类型的3D打印机可以通过增加喷头数量来实现多色或者多种 ...
Echarts 3D地球照片未显示处理
首先确定自己的文件夹是否有该照片文件, 检查自己照片文件的路径是否有误同时也要注意有的照片路径,有的路径需要加require,否则是不显示的 ,其次可能有的新手还不明确照片应该存放再哪个文件 ...
前端用echarts-gl实现旋转的3D地球
通过echarts-gl中的globe来实现一个3D地球需要引用的js: echarts.min.js echarts-gl.min.js world.js 废话不多,代码如下: <div i ...
在react中用echarts实现3d地球
在react中用echarts实现3d地球 1.安装echarts,和3d,去官网看如何安装就行 2.导入import echarts from 'echarts' import echartsGL ...
echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...

最新文章

热门文章