说明：这个不是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）绘制一个球形。
这篇郭先生就来说说使用three.js几何体制作3D地图。...} }, 主要代码部分就是这样，我们也可以在颜色改变时加入一些渐变动画，three.js可以写出各种各样的地图，这是入门级的版本，希望给萌新一些启发。 转载请注明地址：郭先生的博客
No 图 No Code，上面旋转的地球是不是很酷炫，下面就让我们开始说说如何绘制旋转地球吧？绘制旋转地球需要3个步骤： 计算球体顶点数据。 地球纹理贴图。 通过MVP矩阵旋转地球。...在把这些四边形分割为2个三角形，所以绘制球体的关键是计算“经纬度”相交的点的坐标。...最难的顶点坐标和纹理坐标已经获取，下面开始介绍如何绘制地球。...0) Matrix.multiplyMM(mMvpMatrix, 0, projectionMatrix, 0, mTempMvMatrix, 0) } 到此地球的绘制就结束了...，我们经常听说的天空穹、全景（VR）球体模式和地球的绘制基本一样，只不过是相机位置的不同而已。
查看旋转地球效果 主要用到几个知识点 （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 是一个强大的 JavaScript 库，用于在网页上创建和显示 3D 图形。...幸运的是，Three.js的社区中有很多关于性能优化的讨论和分享，这为开发者提供了宝贵的参考。 4. 跨平台与兼容性 Three.js基于WebGL，而WebGL又得到了现代浏览器的大力支持。...此外，随着Web技术的发展和普及，越来越多的设备和平台开始支持WebGL和Three.js，这为Three.js的跨平台应用提供了广阔的空间。 5....社区与生态 Three.js拥有庞大的社区和活跃的生态系统。在社区中，你可以找到各种高质量的教程、插件、工具和库，这些资源可以帮助你更快地学习和使用Three.js。
本文是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,
---- 为什么要使用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标签来引入。
阿谀奉承而无所图的人极少；爱奉承的话，就免不了要付出代价——佚名 一个js的3D库 git仓库：https://github.com/mrdoob/three.js 官网：https://threejs.org
前言 头一阵子B站，抖音都被 陶大宇大哥的倒转地球刷屏了，终于热度下去了，不用倒转头七了。 真的和地球扛上了，公司的大屏项目需要科技感的地球、飞线图。...目标设计样子： 实现步骤分解： ThreeJS环境初始化 星空背景 添加带纹理的地球 世界地图轮廓边界绘制 地球光晕 添加地球云层 城市位置标注和涟漪效果 添加飞线B样条 地球自转和镜头缩放动画 初始化...threejs 通过 LineLoop 和世界点数据，可以绘制多边形。利用这个原理绘制国家边界。...LineLoop和Line功能一样，区别在于首尾顶点相连，轮廓闭合，但是绘制条数太多会用性能问题，LineSegments 是一条线绘制，提高性能，需要复制顶点。...云层效果不是一个精灵，它是相当于在地球上又套了一个圆球，半径比地球大一点。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。...Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。...Three.js的核心五步就是： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染...透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。...正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在Three.js也能够指定透视投影和正投影两种方式的相机。
requestAnimationFrame(render); renderer.render(scene, camera); } } 创建几何体 顶点和面就组合成了几何体 three.js
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
