说明：这个不是GIS软件，是一个带地形的三维地球。...可在线加载全球地形，也可离线运行，运行流畅无卡顿，占用内存小，最大等级可达到地图20级 本数字地球全部由作者自由开发完成，未使用任何第三方插件，拥有完全知识产权。...视频Unity3d版数字地球、谷歌地球（google earth）_哔哩哔哩_bilibili 更新说明： 2021年12月15日更新：日出、日落、大气散射、蓝天效果。...2021年11月24日更新：支持绘制等高线。 2021年11月15日更新：支持海面效果。 2021年10月9日更新：已支持离线版高程数据和离线卫星影像数据。...另外，可用于数据可视化的地球见我的另一篇博客：Unity3d版数字地球、大数据可视化地球_zouxin_88的专栏-CSDN博客 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
逛啊逛，让我找到了另一种方法，仅仅几行代码： // 画地球 void OpenGL::DrawEarth(void) ...{ GLUquadricObj *quadObj = gluNewQuadric...·gluQuadricDrawStyle函数指定二次对象的绘制方式。本例中圆柱体的绘制方式为GLU_FILL。含义为用多边形原绘制本二次对象，多边形的绘制方式为逆时针。...球体的绘制方式为GL_SILHOUETTE,即除边界外用一系列线来绘制二次对象。圆盘的绘制方式为GL_LINE,即用一系列线来绘制二次对象。...部分圆盘的绘制方式为GL_POINT,即用一系列点来绘制二次对象。 ·gluQuadricNormals，指定二次对象使用的法向量类型。 ...·void gluSphere（GLUquadricObj *qobj，GLdouble radius，Glint slices，Glint stacks）绘制一个球形。
No 图 No Code，上面旋转的地球是不是很酷炫，下面就让我们开始说说如何绘制旋转地球吧？绘制旋转地球需要3个步骤： 计算球体顶点数据。 地球纹理贴图。 通过MVP矩阵旋转地球。...在把这些四边形分割为2个三角形，所以绘制球体的关键是计算“经纬度”相交的点的坐标。...最难的顶点坐标和纹理坐标已经获取，下面开始介绍如何绘制地球。...0) Matrix.multiplyMM(mMvpMatrix, 0, projectionMatrix, 0, mTempMvMatrix, 0) } 到此地球的绘制就结束了...，我们经常听说的天空穹、全景（VR）球体模式和地球的绘制基本一样，只不过是相机位置的不同而已。
这篇郭先生就来说说使用three.js几何体制作3D地图。...} }, 主要代码部分就是这样，我们也可以在颜色改变时加入一些渐变动画，three.js可以写出各种各样的地图，这是入门级的版本，希望给萌新一些启发。 转载请注明地址：郭先生的博客
查看旋转地球效果 主要用到几个知识点 （1）显示文字是使用了three.js 的精灵（Sprite），精灵的文字方向始终面向相机，文字是在canvas中画的，精灵的材质就是加载的带有文字的canvas...DOCTYPE html> 旋转地球 <script src="assets...THREE.DirectionalLight(0xffffbb, 1); // light.position.set(-1, 1, 1); // scene.add(light); } // <em>地球</em>...scene.remove(sprite) showSprite(); controls.update(); //stats.update(); // <em>地球</em>自转
今天我们使用 Pyecharts 制作一个地球可视化项目，一起来看看吧 Let’s go！...covid_data = df_new[['location', 'total_cases']].values.tolist() Output: Pyecharts 绘图 通过 Pyecharts 绘制地球图...在官网上有很详细的例子，我们直接套用即可 首先导入相关库 import pyecharts.options as opts from pyecharts.charts import MapGlobe 定义地球图函数并绘制...部署为 Web 服务 当前我们所有的代码都是运行在 Jupyter 当中的，如果要分享给其他人，并不是十分的方便，我们可以将整体代码部署成一个 Web 服务，这样其他人就可以方便的通过浏览器来查看该地球图了...main__": app.run() 这样，当我们启动 Flask 服务器之后，只需要访问根目录（/），就会在 templates 目录下生成 Map.html 文件，也会在浏览器正常展示地球图了
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。...Github 链接： https://github.com/syt123450/giojs/blob/master/README_zh.md 为什么要使用Gio.js Gio.js 是一个基于Three.js...的web 3D地球数据可视化的开源组件库。...-- 引入three.js --> 在您的页面中添加以下Javascript代码来初始化Gio
利用这些基础数据和过程步，用户能很容易绘制世界地图，各大洲地图，各国家地区地图。...解决方案有两种：第一种是直接利用实际测绘的地理数据创建自定义地图；第二种方法是利用谷歌地球导出地球上任何地区/建筑的 KML 数据，然后再导入到 SAS 系统里创建地图。...为了展示 SAS 在绘制地图方面预留的灵活性和控制，下面将展示若干纯粹利用 SAS 代码绘制的各种现代化的复杂地图。...图1：SAS绘制空白中国省图 图2：SAS绘制的中国各省的卫星地图 图3：SAS 绘制的带有卫星云图的中国分省图 总结： SAS GMAP 提供 2D (choropleth) 和 3D (block,...prism, surface) 地图的绘制和渲染，用来将分析变量和结果显示在地图上。
本文是three.js系列博文的一篇，第一篇文章是【three.js基础知识】，如果你还没有阅读过，可以从这一篇开始，页面顶部可以切换为中文或英文。...three.js中最核心的部分可能就是scene graph（或称为场景节点图）。3D引擎中的scene graph是一个表示继承关系的节点图谱，图谱中的每个节点都表示了一个本地坐标空间。 ?...从太阳开始绘制，首先要做的就是生成一个球体，然后将其放置在坐标原点。我们希望使用三者之间的相对关系来展示scene graph的用法。...有时候我们需要一些辅助线以便可以更好地观察scene graph中的实体，three.js中提供了一些有用的工具。...同时我们将renderOrder属性设置为1（默认是0），这样它们就会在所有球体被绘制完后再绘制，否则的话球体被绘制时可能就会挡住辅助线。
本文是谷歌地球引擎（Google Earth Engine，GEE）系列教学文章的第八篇，更多GEE文章请参考专栏：GEE学习与应用（https://blog.csdn.net/zhebushibiaoshifu...GEE；随后，依据Google Earth Engine谷歌地球引擎数据导入与筛选显示中内容，我们将GMTED2010数据产品导入GEE；并对上述二者做好重命名。...同时，依据Google Earth Engine谷歌地球引擎矢量数据裁剪栅格数据中内容，将美国中西部堪萨斯州的矢量图层提取出来。...接下来，我们绘制时间序列图。 ...执行代码，稍等片刻即可看到时间序列图绘制完毕。
一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。...1.4 Canvas Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL...常见的材质有如下几种： 基础材质：以简单着色方式来绘制几何体的材质，不受光照影响。 深度材质：按深度绘制几何体的材质。深度基于相机远近端面，离近端面越近就越白，离远端面越近就越黑。...7.1 普通纹理贴图 在这个示例中使用上图左侧的地球纹理，在球形几何体上进行贴图就能制作出一个地球。...代码如下： /* 创建地球 */ function createGeom() { // 球体 var geom = new THREE.SphereGeometry(1, 64, 64)
一、Three.js相关概念 1.1 Three.JS Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。...1.4 Canvas Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL...基础材质：以简单着色方式来绘制几何体的材质，不受光照影响。 深度材质：按深度绘制几何体的材质。深度基于相机远近端面，离近端面越近就越白，离远端面越近就越黑。...在这个示例中使用上图左侧的地球纹理，在球形几何体上进行贴图就能制作出一个地球。...代码如下： /* 创建地球 */ function createGeom() { // 球体 var geom = new THREE.SphereGeometry(1, 64, 64)
文章目录 前言 一、Three.js的使用 1.球体的绘制 二、球体相关js文件 三、效果图 四、总结 ---- 前言 Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景...一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。...Three.js相关文档：http://docs.thingjs.com/ 一、Three.js的使用 安装第三方包：npm i --save threejs-miniprogram 1.球体的绘制...pointLight.position.z = Math.cos(timer * 3) * 300; renderer.render(scene, camera); } } 三、效果图 四、总结 three.js
接上篇：一个基于ThreeJS 实现的漂亮的3D 地球制作过程详解（上篇） 3D 地球成果展示 github仓库地址：https://github.com/RainManGO/3d-earth npm...实现过程 实现步骤分解： ThreeJS环境初始化 星空背景 添加带纹理的地球 世界地图轮廓边界绘制 地球光晕 添加地球云层 城市位置标注和涟漪效果 添加飞线B样条 地球自转和镜头缩放动画 接上篇从第七步骤说起...(longitude * Math.PI) / 180; //转弧度值 var lat = (latitude * Math.PI) / 180; //转弧度值 lon = -lon; // three.js...// 返回球面坐标 return { x: x, y: y, z: z, }; }; 城市位置标注和涟漪效果 城市位置标注添加 这里城市位置是两个长方形几何体加到地球上...一个贴图是是涟漪底图可以更改颜色： 将拿到的经纬度数据转换成xyz坐标 将带有纹理的两个几何体添加到地球上 var cityGeometry = new PlaneBufferGeometry(1,
阿谀奉承而无所图的人极少；爱奉承的话，就免不了要付出代价——佚名 一个js的3D库 git仓库：https://github.com/mrdoob/three.js 官网：https://threejs.org
---- 为什么要使用three.js 要回答为什么要使用three.js？首先我们想想什么是three.js？...而three.js直接支持前3种渲染方式，可以看出three.js的强大。 大多情况下如果是为了展示3D的效果，那么直接用图片就可以了，如果要动起来的话，视频往往可以胜任。...别急，正因为原生的WebGL这么晦涩难懂，所以才有了我们的主角three.js。...现在你可以忘掉上面的内容，因为three.js封装的特别好，根本看不到任何WebGL的影子，你再也不需要去了解什么着色器，更不用写GLSL ES，我们先来看一个更高级且更简单的three.js的例子。...初识three.js three.js可以使用模块化引入，当然也可以直接用script标签来引入。
前言 头一阵子B站，抖音都被 陶大宇大哥的倒转地球刷屏了，终于热度下去了，不用倒转头七了。 真的和地球扛上了，公司的大屏项目需要科技感的地球、飞线图。...目标设计样子： 实现步骤分解： ThreeJS环境初始化 星空背景 添加带纹理的地球 世界地图轮廓边界绘制 地球光晕 添加地球云层 城市位置标注和涟漪效果 添加飞线B样条 地球自转和镜头缩放动画 初始化...threejs 通过 LineLoop 和世界点数据，可以绘制多边形。利用这个原理绘制国家边界。...LineLoop和Line功能一样，区别在于首尾顶点相连，轮廓闭合，但是绘制条数太多会用性能问题，LineSegments 是一条线绘制，提高性能，需要复制顶点。...云层效果不是一个精灵，它是相当于在地球上又套了一个圆球，半径比地球大一点。
组件利用 Three.js Texture() 类，它让我们可以将逼真的纹理映射到引擎盖下的网格表面。 为了演示这个过程，我们将创建一个地球的 3D 模型。...要创建地球，请先清除场景，然后使用 组件创建具有球面几何形状的新网格。...使用此函数，我们可以通过在每一帧上为其旋转属性添加一个值来为我们的地球设置动画。...你可以通过将 x 和 z 属性添加到 ref、onBeforeRender 函数和地球的网格来添加更多旋转动画。...为了演示，我们将添加一个 click 事件，当它被触发时会暂停我们的地球动画。
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击着色器纹理。...image.png 捕57获.PNG 这里我们分别引入三个纹理，分别是地球的表面纹理，对应的海拔灰度图，和云朵的纹理。...使用表面纹理还是地球的外貌，海拔灰度图给地球添加凹凸效果，云朵纹理给地球添加云朵效果。下面我们说一说代码。 1. 绘制几何体，加载贴图 我们只需要在一个球体中进行操作，所以新建一个球体。...顶点着色器 顶点着色器我们只是用地球的灰度图，这里面是用texture2D( texture2, vUv )来获取图片中每个点的颜色值。...time * 0.4) ); gl_FragColor = mix(tcolor1, tcolor3 * 1.3, tcolor3.r / 2.0); } ` 这样就获得了一个动态的地球
Intro 基于r95版本three.js。整理知识点，以及demo。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
