github仓库地址：https://github.com/RainManGO/3d-earth
迟到的 2020 年夏季奥运会开幕式于 2021 年 7 月 23 日在东京奥林匹克体育场举行。1824 架无人机在体育场上空以 3D 方式呈现东京奥运会会徽和之后拥有各大洲的地球。我尝试使用 Mathematica 重新创建这些球体。
定义一个div 太阳轨道sunline，边框显示出来，定义position为relative
秋冬降临，北半球气温转凉。欧洲多个国家单日新增病例持续创新高，美国更是成为全球疫情最严重的国家。国内山东青岛、新疆喀什等地也相继发现多例病情。全球第二波疫情已经开始，国内疫情牵动人心，全球抗疫仍在努力。
前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示，这只是数据可视化的一小部分，重要的应该是背后的数据生成及处理等。本文先为大家介绍这简单的部分。 一、 Cesium简介 Github地址：https://github.com/AnalyticalGraphicsInc/cesium。官方介绍如下： An open-source JavaScript library for world-class 3D
Viewer 类是 cesium 的核心类，是地图可视化展示的主窗口，cesium 程序应用的切入口，它提供了基本的虚拟地球显示和众多的控制选项.
1.首先下载Cesium库，地址：https://cesium.com/cesiumjs/
你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可以用 CSS 做些什么。
<canvas> 画布标签常用于绘制图像，但是，<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器，要想通过<canvas>画布标签来绘制图像，还需要调用js方法。其中最常见得方法是getContext()方法，它可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。
前言：大数据，人工智能，工业物联网，5G 已经或者正在潜移默化地改变着我们的生活。在信息技术快速发展的时代，谁能抓住数据的核心，利用有效的方法对数据做数据挖掘和数据分析，从数据中发现趋势，谁就能做到精准控制，实时分析，有的放矢，从而获取更快速、更平稳、更长远地发展。在航空领域，机场、航班和航线信息是至关重要的数据，本文将介绍以 HT 为平台，应用 JavaScript、HTML5、GIS 等技术开发的全球航线实例。
模拟简单的太阳系，如图A.8所示。太阳在中心，地球每365天绕太阳转一周，月球每年绕地球转12周。另外，地球每天24个小时绕它自己的轴旋转。
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文字
VM19:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Viewer是Cesium中用于显示3D场景的组件。它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。
腾讯ISUX isux.tencent.com 社交用户体验设计 01 概述 | Overview 太空鹅手办在六月和七月相继推出标准版及高定限量版后，受到大家的喜爱与热捧，上架即售罄。为了创作更高品质与更具可玩性的Figure，满足更多收藏需求以及弥补爱好者们“抢不到”的遗憾，我们接着推出了“太空鹅联盟潮玩系列”。该系列在上线发布的24小时内便完成了6000件的目标预售，截止9月25号预售已高达9500+件。如此庞大的预售量是我们预想不到的，为此，我们决定为它制作一支宣传视频。 02 概念
Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果
前言：本文将围绕：了解什么是全景 --> 怎么构成全景 --> 全景交互原理来进行讲解，手把手教你从零基础实现一个酷炫的Web全景，并讲解其中的原理。小白也能学习，建议收藏学习,有任何疑问，请在评论区讨论，笔者经常查看并回复。
1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图)，否则你需要清空所有，最简单的方法是使用clearRect方法 2、保存canvas状态 如果你要改变一些会改变canvas状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下 3、绘制动画图形 4、恢复canvas状态 如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧。
复习下 css3 的动画， 都快不会写了，那会儿挺喜欢 flash 的，可惜了时代在前进。写这里就当是文档看吧
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例，如下图： 现在对里面的元素布局进行一个分析： 一个全屏的背景图 ”往届回顾“定位在左上(left, top)，IMWeb.io 文字及向上箭头定位为中下(center bottom) 发光的地球水平铺满，垂直方向定位为bottom 中间的其他内容定位参考就是中间了 内容
中秋佳节即将到来，远在他乡的孩子们马上可以回家和父母一起吃月饼，看月亮，聊聊工作、谈谈理想，想想还挺惬意。
ReactJS应用程序中的动画是一个流行的话题，有很多方法可以创建不同类型的动画。许多开发人员只使用CSS和向HTML标记添加类来创建动画。这是一个好方法，您应该使用它，如果要创建复杂的动画，可以关注GreenSock，GreenSock是最强大的动画平台。还有很多库用于在React中创建动画的组件。
查看旋转地球效果 主要用到几个知识点 （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;
glClearColor(0.0f, 0.0f, 0.0f, 0.8f); //背景为黑色
jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。
(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
【新智元导读】谷歌研究院官方博客（北京时间）今日更新，宣布开源与哈佛大学等高校和机构合作完成的一个交互式可视化 GPS 地球地震周期物理学数据库。不仅如此，本文后附 20+ 更多奇异有趣的数据集，万一哪天用上了呢？ 谷歌希望借开源产品，打造数据数集生态 （文／Jimbo Wilson，Google Big Picture Team 软件工程师；Brendan Meade，哈佛大学地球与行星科学系教授）为了帮助研究人员更好地了解地震周期并探索相关数据，谷歌研究院发布了一种新的交互式数据可视化方法，通过相对于真
近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破，以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及，宇宙空间中那些原本遥不可及的事物离我们越来越近，人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这个物种中的一员，我们理所应当对我们生活的星球、所在的太阳系有一定的认识，对 8 大行星各自的运行轨道、质量、资源存储量甚至是地形有一定的了解。
与地球的实现方法不同，平面地图依赖geojson进行绘制。有什么样的geojson，绘制什么样的地图块。
数据可视化一直是一个很有趣的领域。许多普通人直观上难以感受的数据，如漏洞分布、实时流量分析等，通过数据可视化的手法，可以清晰地看出数据的结构特点和每一个部分之间的内在联系。 著名数据可视化库 D3.js 的部分应用 D3.js 可视化群关系，来自利用 d3.js 对大数据资料进行可视化分析 数据可视化除了常用的图表之类，与地理位置信息系统（GIS）的结合也是其中一个有趣的应用。 首先是数据的准备，要做全球的分布图，得有全网扫描的实力才行哦。HeartBleed 风波的当天晚上，ZoomEye 就给全球
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
本文是three.js系列博文的一篇，第一篇文章是【three.js基础知识】，如果你还没有阅读过，可以从这一篇开始，页面顶部可以切换为中文或英文。
刚刚开源了自己积累的一些2D效果的Shader实现，项目GitHub地址。效果在下面列出，我使用的Unity版本是5.3.5p8（当前已更新到5.6.0f3），可用不低于此版本的unity打开查看。需要注意的是，我的实现初衷在于原理的理解，并未斟酌优化，如果项目中使用请考虑优化。本文会不定期更新，添加新研究的效果。后面如果有时间，我可能会开一系列博客详细写写每个效果的原理和实现细节，欢迎朋友和我一起讨论。（P.S. 如果对你有帮助，别忘了点GitHub右上角的star，谢谢！）
科幻地球首先要保证底图颜色干净，为了突出数据效果，底图不宜使用过多或过亮的色彩，干净即可，陆地和海洋要有一定的颜色或明暗区分，增加画面层次。
Entity类是Cesium中描述和呈现地球上实体对象的核心类。它具有丰富的属性和方法，用于控制和定制地理实体的外观和行为。Entity对象可以表示各种地理实体，如点、线、面等，并具有位置、方向、模型、标牌、折线、多边形等属性，通过设置这些属性可以实现各种类型的地理可视化。此外，Entity类还提供了其他一些常用的方法和属性，如描述信息、可见性和自定义属性等。通过使用Entity类，可以在Cesium中创建并定制地球上的实体对象，以实现复杂的地理可视化和交互效果。
说到地图，大家一定很熟悉，平时应该都使用过百度地图、地图、腾讯地图等，如果涉及到地图相关的开发需求，也有很多选择，比如前面的几个地图都会提供一套js API，此外也有一些开源地图框架可以使用，比如OpenLayers、Leaflet等。
上面显示的界面使用了一个内置的效果来从空白状态过渡到信息填充的屏幕。通过每个元素单独的动画，它迫使用户在其动画出现在屏幕上时一次只关注一个元素。内置的一步一步类型的动画让设计师可以调整用户使用过程中每一秒的的视觉焦点。这也比简单没有任何动画地显示这个界面或者一次对整个界面进行动画要更加有视觉吸引力。这种类型动画不好的一个方面是它展示界面和信息给用户花费了太多时间。这会引起反感，特别是当它一次次地发生的时候。动画时间和迟缓感知会在之后进行讨论。
微信启动界面是这样的，5年都没变过，相信很多人都有疑问，这究竟有什么意味呢？ 今天Super就跟大家八一八，这个启动界面，大概有三个意思。 1、与微信产品气质的映射关系强烈 宇宙浩瀚，人类多么渺小
迄今已有超一亿人次观看，票房达到42.39亿元，超过复联4，跻身中国票房纪录第三名，仅次于《战狼2》和《流浪地球》。
上周实在是太忙了，一个星期的时间我看了三本书，敲了三四千行代码，通了一个宵，翘了一篇更新，写了一份简历，但是现在还没有回复......虽然希望渺茫但还是要微笑面对这惨淡的人生，所以今天继续开始我的文章更新。
为了能够在应用程序中添加3D模型，我们需要一个3D渲染器框架。在本节中，我们将了解SceneKit的场景编辑器。这是一个很好的空间，可以帮助您可视化3D模型，编辑它，播放动画，模拟物理等。
上一篇文章介绍了如何通过纹理渲染绘制地球仪，当然OpenGL的三维图形处理能力是很强大的，只要善于利用OpenGL，就能很方便地虚拟各种现实生活中的动画效果。本文再来谈谈使用OpenGL实现浏览电子书时候的翻书动画。 博主早期的博文《Android开发笔记（十八）书籍翻页动画》已经介绍了如何通过贝塞尔曲线实现翻书动画的过程，不过该方式展示动画时存在卡顿的现象，并且在书页范围之外还会经常拖着长长的影子，实在是有碍观瞻。现在有了OpenGL，借助三维图形技术能够让翻书动画显得更为平滑、更加逼真。正好博主偶然间淘到了一个外国人写的OpenGL翻书动画，感觉显示效果还不错，故而简单改造了一下贡献出来，方便有需要的朋友。 通过OpenGL描绘三维图形的原理，可参见前面几篇文章，这里就不啰嗦了，下面直接观看使用OpenGL实现翻书动画的效果。 首先是从前往后翻页的效果动画：
相对于一般布局方式的笛卡尔坐标系，MotionLayout还拓展了ConstraintLayout中的相对中心布局方式，我们暂且称之为「极坐标布局」方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
