经过前面几个章节的介绍，我们对Threejs已经有了一个相对深入的了解，下面我们通过Threejs来做一个旋转的地球效果。 1.首先在电脑上创建一个earth文件夹，在earth文件夹中创建images文件夹用于存放图片文件；创建一个js文件夹用于存放JavaScript代码；创建一个css文件用于存放css样式表文件； 2.拷贝资源，将Threejs源码中的three.module.js拷贝到js文件夹，将地图的贴图文件拷贝到images文件夹 3.用vscode打开earth文件夹，在根目录下新建index.html文件，在index.html中引入three.module.js，在index.html中创建一个id为webgl的div
中秋佳节即将到来，远在他乡的孩子们马上可以回家和父母一起吃月饼，看月亮，聊聊工作、谈谈理想，想想还挺惬意。
本文是three.js系列博文的一篇，第一篇文章是【three.js基础知识】，如果你还没有阅读过，可以从这一篇开始，页面顶部可以切换为中文或英文。
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
该文章介绍了如何通过设备方向事件和设备运动事件来简单实现摇一摇功能。首先，介绍了设备方向事件和设备运动事件的定义和区别，然后通过示例代码展示了如何使用这两个事件。最后，总结了如何使用设备运动事件来实现摇一摇功能。
<canvas> 画布标签常用于绘制图像，但是，<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器，要想通过<canvas>画布标签来绘制图像，还需要调用js方法。其中最常见得方法是getContext()方法，它可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。
Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。随着一些运营商推出大王卡等
创建Vue 3项目： 使用vite构建工具创建一个新的Vue项目，运行以下命令：
查看旋转地球效果 主要用到几个知识点 （1）显示文字是使用了three.js 的精灵（Sprite），精灵的文字方向始终面向相机，文字是在canvas中画的，精灵的材质就是加载的带有文字的canvas function showText(){ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.canvas.width =256; const x =0;
github仓库地址：https://github.com/RainManGO/3d-earth
作者|天元浪子 来源|Python作业辅导员 无言相守45亿年，太阳、地球和月球这三个好基友究竟是怎样的关系呢？从孩提时代我就一直在想，要是能有一个可以直观演示太阳、地球和月球运行轨迹的模型就好了。今天，我终于实现了小时候的梦想：用WxGL画出了太阳、地球和月球的动态轨道模型。配上简单的解说，小朋友也可以秒懂四季更迭、日蚀月蚀、黄赤交角。 在开始绘制模型前，让我们先来了解一下太阳、地球和月球的起源，以及它们的大小、远近和行踪路线。 1、主流的大爆炸理论认为，宇宙大爆炸发生在138.17亿年前。 2、约66亿
模拟简单的太阳系，如图A.8所示。太阳在中心，地球每365天绕太阳转一周，月球每年绕地球转12周。另外，地球每天24个小时绕它自己的轴旋转。
笔者认为Three.js是一个伟大的框架，为什么这样说，因为它可以让我们轻易创造三维世界，甚至好像笔者写这遍教程，可以创造一个太阳系，在这个三维世界里你就是创世主。哈哈！好像说得有点夸！！
方向的理解和习得一直是人类长大过程中不断学习和加深体会的内容。在我们还很小的时候，妈妈就会教我们，这是左手，那是右手；长大一点，地理老师说地球是“自西向东"转的，又教我们认了地图，记住了口诀“上北下南，左西右东”；后来也遇到过一些面试题，为什么镜子里的左右是反的，而上下并不反？以及学车的时候，用身体去体会，在往前开还是倒车的时候，往左和右打方向盘分别会使得车往什么方向前进？
Earth 是一个可视化全球天气实况的项目。该项目以可视化的方式展示了全球的天气情况，提供了风、温度、相对湿度等多种天气数据，以及风、洋流和波浪的动画效果。
前言 话说上一篇文章结尾讲到这一篇要做一个地球自转以及月球公转的三维动画，提笔，不对，是提键盘开始写的时候脑海中突然出现了几年前春晚风靡的那首歌：蒙古族小丫头唱的快乐的一家。闲言莫提，进入正题。 一、 原理分析 场景涉及两个对象，一个是地球、一个是月球，当然这基本是废话，不过还可以再添加一个对象，月球的公转轨迹。地球和月球都可以用一个球来模拟（Sphere），稍微困难的是公转轨迹，公转轨迹是一个圆，PhiloGL貌似没有直接提供圆的封装，但是有画线段的API，细细想来，什么是圆？祖冲之早就告诉我们了，所
最近手里有个Phaser游戏工程，上面让转化为微信小游戏，由于对这块儿不了解，所以上网查了很多资料，终于让我找到了案例，在此要感谢下 作者；下面是我转载的他的文章
除了传统的街道图地图外，默认的一般都是街道图，还有卫星图、三维图等，其中又有叠加层，比如叠加路况图层和路网图层等，最近去了多家的地图官网看对应的api接口，总体上感觉现在都往2.5D或者3D这块发展，估计这也是未来的一个大趋势，记得有个长辈程序员，花了很多年专门研究opengl之类的玩意，将现有的电网系统换成了3D的，甚至取了个高大上的名字叫世界电网互联系统，直接可以旋转一个球体，查看各种电网路线等，而且现在的安防行业好像也在往3D方向发展，甚至和物联网结合，以3D的模式呈现一栋大楼或者一个小区的三维场景，报警点也是三维呈现，这个效果非常惊艳，一不小心就把大领导震撼了，然后经费就来了。
效果简直不要太酷炫，我只能直呼太牛逼！那么这样一个酷炫的操作是怎么做出来的呢？我们接着往下看。
(function() { var canvas = document.getElementById('quakeCanvas'); // Create our Planetary.js planet and set some initial values; // we use several custom plugins, defined at the bottom of the file var planet = planetaryjs.planet(); planet.loadPlugin(autocenter({extraHeight: -120})); planet.loadPlugin(autoscale({extraHeight: -120})); planet.loadPlugin(planetaryjs.plugins.earth({ topojson: { file: 'https://101.43.39.125/HexoFiles/js/planetaryjs/world-110m.json' }, oceans: { fill: '#001320' }, land: { fill: '#06304e' }, borders: { stroke: '#001320' } })); planet.loadPlugin(planetaryjs.plugins.pings()); planet.loadPlugin(planetaryjs.plugins.zoom({ scaleExtent: [50, 5000] })); planet.loadPlugin(planetaryjs.plugins.drag({ onDragStart: function() { this.plugins.autorotate.pause(); }, onDragEnd: function() { this.plugins.autorotate.resume(); } })); planet.loadPlugin(autorotate(5)); planet.projection.rotate([100, -10, 0]); planet.draw(canvas); // Plugin to resize the canvas to fill the window and to // automatically center the planet when the window size changes function autocenter(options) { options = options || {}; var needsCentering = false; var globe = null; var resize = function() { var width = window.outerWidth /2 + (options.extraWidth || 0); var height = window.outerHeight/2 + (options.extraHeight || 0); globe.canvas.width = width; globe.canvas.height = height; globe.projection.translate([width / 2, height / 2]); }; return function(planet) { globe = planet; planet.onInit(function() { needsCentering = true; d3.select(window).on('resize', function() { needsCentering = true; }); }); planet.onDraw(function() { if (needsCentering) { resize(); needsCentering = false; } }); }; }; // Plugin to automatically scale the planet's projection based // on the window size when the planet is initia
在这个教程中，我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型（DEM）数据，使用的工具包括Three.js、geotiff、webpack和QGIS。
在小程序日常开发中，我们可能会遇到需要通过旋转手机等方式来触发某种事件，为此，就需要调用手机当中的加速度计来为我们获取手机的当前状态了。
为了能够在应用程序中添加3D模型，我们需要一个3D渲染器框架。在本节中，我们将了解SceneKit的场景编辑器。这是一个很好的空间，可以帮助您可视化3D模型，编辑它，播放动画，模拟物理等。
什么是RevolverMaps Revolver Maps 2.0是一个非常有创意和新意的网站博客免费统计，采用Revolver Maps Graphics Engine图形引擎，除了提供Java 版本，另一个为Flash 版本，即使你的访问者的浏览器没有安装Flash也可以用Java来观看3D地球仪统计。 与普通的统计不一样的是，Revolver Maps 2.0 3D地球仪统计的左下方会有一个方向按钮，你可以用它来控制地球仪的旋转和导航等等。访问者是以一个小点在地球仪上显示的，并且最近的访
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
前言：本文将围绕：了解什么是全景 --> 怎么构成全景 --> 全景交互原理来进行讲解，手把手教你从零基础实现一个酷炫的Web全景，并讲解其中的原理。小白也能学习，建议收藏学习,有任何疑问，请在评论区讨论，笔者经常查看并回复。
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
SceneKit_入门01_旋转人物 SceneKit_入门02_如何创建工程 SceneKit_入门03_节点 SceneKit_入门04_灯光 SceneKit_入门05_照相机 SceneKit_入门06_行为动画 SceneKit_入门07_几何体 SceneKit_入门08_材质 SceneKit_入门09_物理身体 SceneKit_入门10_物理世界 SceneKit_入门11_粒子系统 SceneKit_入门12_物理行为 SceneKit_入门13_骨骼动画 SceneKit_中级01_模型之间的过渡动画 SceneKit_中级02_SCNView 详细讲解 SceneKit_中级03_切换照相机视角 SceneKit_中级04_约束的使用 SceneKit_中级05_力的使用 SceneKit_中级06_场景的切换 SceneKit_中级07_动态修改属性 SceneKit_中级08_阴影详解 SceneKit_中级09_碰撞检测 SceneKit_中级10_滤镜效果制作 SceneKit_中级11_动画事件 SceneKit_高级01_GLSL SceneKit_高级02_粒子系统深入研究 SceneKit_高级03_自定义力 SceneKit_高级04_自定义场景过渡效果 SceneKit_高级05 检测手势点击到节点 SceneKit_高级06_加载顶点、纹理、法线坐标 SceneKit_高级07_SCNProgram用法探究 SceneKit_高级08_天空盒子制作 SceneKit_高级09_雾效果 SceneKit_大神01_掉落的文字 SceneKit_大神02_弹幕来袭 SceneKit_大神03_navigationbar上的3D文字
地球表面并不是一个标准的正球体，根据2020年的测量成果，珠穆朗玛峰高程为8848.86m，而地球上最深的海沟——马里亚纳海沟深度为11034 m。两者相差了将近 20 km！由于地球的自然表面凹凸不平，形态复杂，显然不能作为测量的基准面。所以人们开始寻求一种与地球自然表面接近的规则曲面来代替不规则的地球表面。地球表面积中海洋面积约占71%，陆地面积仅占29%。于是利用水准面表示地球的物理表面，简单说就是假设有一个静止的海水面（一个无波浪、无潮汐、无水流、无大气压变化，处于流体平衡状态的静止海平面），向陆地延伸形成的一个封闭曲面来表示地球的物理表面。
简而言之，3D模型就是三维的、立体的模型，D是英文Dimensions的缩写。
No 图 No Code，上面旋转的地球是不是很酷炫，下面就让我们开始说说如何绘制旋转地球吧？绘制旋转地球需要3个步骤：
iPhone在静止时会受到地球引力，以屏幕中心为坐标原点，建立一个三维坐标系（如右图），此时iPhone收到的地球引力会分布到三个轴上。 iOS开发者可以通过CoreMotion框架获取分布到三个轴的值。如果iPhone是如图放置，则分布情况为x=0,y=-1.0,z=0。 在CoreMotion中地球引力（重力）的表示为1.0。
glTF（Graphics Library Transmission Format）是一种用于存储3D模型和场景的格式。它是一种开放的标准格式，可用于在不同的3D引擎和软件之间传输和交换3D模型和场景数据。
地理位置也就是坐标说是 GIS 的灵魂不为过吧，像天气预报、火箭发射包括地震、火山等事故发生时，新闻媒体就会说东经 XX 度、北纬 YY 度发生了什么什么，还有高德百度的地图导航、定位等等都需要用到坐标系统，因为没有准确的位置信息就无法表达地物的位置关系，地图查询分析等等也就无从谈起了
人类从未停止仰望星空，无论是中国古代的牛郎织女、嫦娥奔月，还是古希腊神话中月亮女神的故事，无一不透露着人类对星空的向往。
glClearColor(0.0f, 0.0f, 0.0f, 0.8f); //背景为黑色
在上一篇文章中，我们聊到了方向的基础，以及地球上描述方向方法选择的两个线索，自转方向基准和球坐标系，相关内容请戳：
现在 web 设计是最有趣的了，做好 web 设计不仅要熟练使用 Javascript，css 和 html 等，还要有自己的创意设计。为了方便大家发挥自己的创意，就产生了很多 JS 框架，Node.js 扩展等等。有了这些工具，开发者们就能专注于创意设计了，而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库，都是一些很基础功能很强大的库。有了这些库，开发者们可以节省很多时间，大大提高开发的效率，所以大家赶紧收藏起来吧：） 1) Headroom.js H
今天我们接着上一篇留下的问题，来看看东西南北这样的方位描述，和前后左右的区别和联系。
谷歌地球(Google Earth)是一款Google公司开发的虚拟地球仪软件，它把卫星图像、地图、百科全书和飞行模拟器整合在一起，布置在一个地球的三维模型上。通过它我们可以找到你想找到的地方，当你定位到一个具体的地方的时候，再点击的时候，你都能看清那个地方的建筑，特别真实，有种身临其境的感觉。当你打开谷歌地球(Google Earth)，首先映入眼帘的是地球在宇宙中的画面，画面特别好看，使用起来特别舒服。喜欢的小伙伴们快点下载吧~
本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。
迟到的 2020 年夏季奥运会开幕式于 2021 年 7 月 23 日在东京奥林匹克体育场举行。1824 架无人机在体育场上空以 3D 方式呈现东京奥运会会徽和之后拥有各大洲的地球。我尝试使用 Mathematica 重新创建这些球体。
1.几何体顶点索引数据 经过前面两节的介绍，我们对BufferGeometry有了更深入的了解，但是，在我们之前创建面、线或点的时候，我们给的顶点坐标数据是不同的，考虑下面的场景，如果我们给的顶点坐标数据有重复的坐标（比如有两个点都是0,0,0）的时候我们需要重复输入两次吗？答案当然是不用的，我们可以借助Threejs提供的几何体顶点索引geometry.index来实现。 比如我们通过下面一组数据来创建一个几何体
几何深度学习是个很令人兴奋的新领域，但是它的数学运算逐渐转移到代数拓朴和理论物理的范围。
科学界已经知道鸟类可以利用地磁场进行导航，除此之外，科学家在自然界许多物种中都发现了磁感应能力，生物的磁感受能力也一直在业内被称作生物“第六感”。但作为进化如此高级的人类，却似乎意外地没有证据表明我们可以感应磁场。昨天，来自加州理工学院的团队发表在eNeuro上的一项研究给出了答案：我们不仅能感应到磁场，并且大脑会对磁场变化作出强烈反应。在下面这篇文章中，研究团队亲自为我们讲述了“第六感”磁觉在人脑中被证实的精彩过程。
Cesium的Camera案例，展示了其关于漫游器镜头的控制，能够调整视图的位置。这里改进了一下这个实例，使之能够展示一些自己关注的兴趣点的情况，并总结遇到的问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
