自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
<canvas> 画布标签常用于绘制图像，但是，<canvas> 元素本身并没有绘制能力，它仅仅是图形的容器，要想通过<canvas>画布标签来绘制图像，还需要调用js方法。其中最常见得方法是getContext()方法，它可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可在画布上绘制文本、线条、矩形、圆形等等。今天就利用<canvas> 画布来绘制一下地球轨道的效果。
jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。
github仓库地址：https://github.com/RainManGO/3d-earth
VM19:1 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
前言 最近折腾了一下三维地球，本文简单为大家介绍一款开源的三维地球软件——Cesium，以及如何快速上手Cesium。当然三维地球重要的肯定不是数据显示，这只是数据可视化的一小部分，重要的应该是背后的数据生成及处理等。本文先为大家介绍这简单的部分。 一、 Cesium简介 Github地址：https://github.com/AnalyticalGraphicsInc/cesium。官方介绍如下： An open-source JavaScript library for world-class 3D
中秋佳节即将到来，远在他乡的孩子们马上可以回家和父母一起吃月饼，看月亮，聊聊工作、谈谈理想，想想还挺惬意。
1.首先下载Cesium库，地址：https://cesium.com/cesiumjs/
Cesium官网中提供了基于webpack配置Cesium的方法，但是这种方法太繁琐，而且使用webpack时程序启动没有Vite启动快，因此，这里选择vite创建vue3+cesium构建项目，先看下完成后的效果
Earth 是一个可视化全球天气实况的项目。该项目以可视化的方式展示了全球的天气情况，提供了风、温度、相对湿度等多种天气数据，以及风、洋流和波浪的动画效果。
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。
一般来说，活动宣传页都是全屏的滑动，而移动端的视窗大小确实是有点零碎化，于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例，如下图： 现在对里面的元素布局进行一个分析： 一个全屏的背景图 ”往届回顾“定位在左上(left, top)，IMWeb.io 文字及向上箭头定位为中下(center bottom) 发光的地球水平铺满，垂直方向定位为bottom 中间的其他内容定位参考就是中间了 内容
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。
(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
查看旋转地球效果 主要用到几个知识点 （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;
Cesium Widget这个案例展示了一个Cesium的简化窗体。在之前的案例中使用的都是Cesium.Viewer这个窗体组件，包含了非常丰富的组件内容。Cesium.CesiumWidget可以说是其简化版本，不包含动画、图层选择等等其他组件内容，仅仅显示一个三维数字地球。并且，默认情况下也不会包含Cesium地形的图层。之前网上很多的问题是关于如何在Cesium.Viewer组件中隐藏所有的元素，现在似乎直接用Cesium.CesiumWidget这个组件就可以了。
科幻地球首先要保证底图颜色干净，为了突出数据效果，底图不宜使用过多或过亮的色彩，干净即可，陆地和海洋要有一定的颜色或明暗区分，增加画面层次。
说到地图，大家一定很熟悉，平时应该都使用过百度地图、地图、腾讯地图等，如果涉及到地图相关的开发需求，也有很多选择，比如前面的几个地图都会提供一套js API，此外也有一些开源地图框架可以使用，比如OpenLayers、Leaflet等。
模拟简单的太阳系，如图A.8所示。太阳在中心，地球每365天绕太阳转一周，月球每年绕地球转12周。另外，地球每天24个小时绕它自己的轴旋转。
相信从事过数据可视化开发的你对大屏并不陌生，那么开发一个酷炫的大屏一定是很多数据可视化开发者想要做的事情。
上一级我们实现了第一个三维地球，但是在这个页面上有很多小部件，我们不想让其显示，应该如何设置呢？这一节我们通过两种方式来隐藏小部件;先看下最终效果
数据可视化一直是一个很有趣的领域。许多普通人直观上难以感受的数据，如漏洞分布、实时流量分析等，通过数据可视化的手法，可以清晰地看出数据的结构特点和每一个部分之间的内在联系。 著名数据可视化库 D3.js 的部分应用 D3.js 可视化群关系，来自利用 d3.js 对大数据资料进行可视化分析 数据可视化除了常用的图表之类，与地理位置信息系统（GIS）的结合也是其中一个有趣的应用。 首先是数据的准备，要做全球的分布图，得有全网扫描的实力才行哦。HeartBleed 风波的当天晚上，ZoomEye 就给全球
上面显示的界面使用了一个内置的效果来从空白状态过渡到信息填充的屏幕。通过每个元素单独的动画，它迫使用户在其动画出现在屏幕上时一次只关注一个元素。内置的一步一步类型的动画让设计师可以调整用户使用过程中每一秒的的视觉焦点。这也比简单没有任何动画地显示这个界面或者一次对整个界面进行动画要更加有视觉吸引力。这种类型动画不好的一个方面是它展示界面和信息给用户花费了太多时间。这会引起反感，特别是当它一次次地发生的时候。动画时间和迟缓感知会在之后进行讨论。
VtKLoader是一种用于加载和解析VTK（Visualization Toolkit）文件格式的JavaScript加载器。VTK是一个用于科学可视化和图形处理的开源软件系统，广泛应用于医学影像处理、地球科学、工程和计算流体动力学等领域。
本文是three.js系列博文的一篇，第一篇文章是【three.js基础知识】，如果你还没有阅读过，可以从这一篇开始，页面顶部可以切换为中文或英文。
1、清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图)，否则你需要清空所有，最简单的方法是使用clearRect方法 2、保存canvas状态 如果你要改变一些会改变canvas状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下 3、绘制动画图形 4、恢复canvas状态 如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧。
【新智元导读】谷歌研究院官方博客（北京时间）今日更新，宣布开源与哈佛大学等高校和机构合作完成的一个交互式可视化 GPS 地球地震周期物理学数据库。不仅如此，本文后附 20+ 更多奇异有趣的数据集，万一哪天用上了呢？ 谷歌希望借开源产品，打造数据数集生态 （文／Jimbo Wilson，Google Big Picture Team 软件工程师；Brendan Meade，哈佛大学地球与行星科学系教授）为了帮助研究人员更好地了解地震周期并探索相关数据，谷歌研究院发布了一种新的交互式数据可视化方法，通过相对于真
前言：本文将围绕：了解什么是全景 --> 怎么构成全景 --> 全景交互原理来进行讲解，手把手教你从零基础实现一个酷炫的Web全景，并讲解其中的原理。小白也能学习，建议收藏学习,有任何疑问，请在评论区讨论，笔者经常查看并回复。
素材来自：煎蛋网、爱范儿 煎蛋：http://jandan.net/ 爱范儿：http://www.ifanr.com/ 面对日益繁杂的数据和洪流般的信息，数据可视化以有趣、甚至充满艺术气息的方式呈现，无疑是筛选并表现复杂数据的有效方式。面对浩瀚的宇宙，我们同样可以用可视化的方式展现它冰山一角。大数据文摘精选了两个宇宙可视化的例子，相信看完这两个视频，大家更能感受到宇宙的眩目、蕴含的隐忧或者生命的渺小。 宇宙生命可视化 如果地外生命和地球生命类似的话，那么它们很可能居住在距离太阳系几千甚至几百万光年之外的类
你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可以用 CSS 做些什么。
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
在小程序日常开发中，我们可能会遇到需要通过旋转手机等方式来触发某种事件，为此，就需要调用手机当中的加速度计来为我们获取手机的当前状态了。
现在 web 设计是最有趣的了，做好 web 设计不仅要熟练使用 Javascript，css 和 html 等，还要有自己的创意设计。为了方便大家发挥自己的创意，就产生了很多 JS 框架，Node.js 扩展等等。有了这些工具，开发者们就能专注于创意设计了，而不用为某个功能而花费太多精力。这里我们介绍的是 12 个开发者们必备的 JavaScript 库，都是一些很基础功能很强大的库。有了这些库，开发者们可以节省很多时间，大大提高开发的效率，所以大家赶紧收藏起来吧：） 1) Headroom.js H
前言 上一篇文章中介绍了如何创建三维对象及加载皮肤，本文为大家介绍如何为场景添加光源。 一、 原理分析 光在任何地方都是非常重要的，无论在哪里都说是要发光发热，光和热也是分不开的。光线分为点光源和线光源，所谓点光源和线光源也是个相对的概念，站在地球上我们可以认为太阳光是线光源，其实从更大的尺度来看太阳光也是个点光源，只是我们站在地球上来看光线基本上是平行的了，所以可以认为是线光源。所有问题，站在不同的角度来看就会发生变化。 光线还有另外几个概念，环境光（ambient light）、漫反射光（diffuse
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
秋冬降临，北半球气温转凉。欧洲多个国家单日新增病例持续创新高，美国更是成为全球疫情最严重的国家。国内山东青岛、新疆喀什等地也相继发现多例病情。全球第二波疫情已经开始，国内疫情牵动人心，全球抗疫仍在努力。
glClearColor(0.0f, 0.0f, 0.0f, 0.8f); //背景为黑色
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文字
为了能够在应用程序中添加3D模型，我们需要一个3D渲染器框架。在本节中，我们将了解SceneKit的场景编辑器。这是一个很好的空间，可以帮助您可视化3D模型，编辑它，播放动画，模拟物理等。
上周实在是太忙了，一个星期的时间我看了三本书，敲了三四千行代码，通了一个宵，翘了一篇更新，写了一份简历，但是现在还没有回复......虽然希望渺茫但还是要微笑面对这惨淡的人生，所以今天继续开始我的文章更新。
要说2019年首个全球瞩目的新晋头牌网红，非下面这颗妖娆多姿风头无两的“甜甜圈”莫属了。 黑洞人生首张写真可谓来之不易。选中成像的这颗黑洞是M87星系中心的黑洞，它的质量是太阳的65亿倍，距离地球5500万光年。科学家使用位于四大洲的8台亚毫米射电望远镜同时对黑洞展开观测，北至西班牙，南至南极，连接起来相当于一台和地球大小相当的望远镜。 事实上，亚毫米波段和我们非常熟悉的可见光有着天壤之别。这个波段我们是无法直接看到的，所以，利用亚毫米波段给黑洞拍照，其实就是得到黑洞周围辐射的空间分布图。
迟到的 2020 年夏季奥运会开幕式于 2021 年 7 月 23 日在东京奥林匹克体育场举行。1824 架无人机在体育场上空以 3D 方式呈现东京奥运会会徽和之后拥有各大洲的地球。我尝试使用 Mathematica 重新创建这些球体。
如果把他放到自己的博客首页，相信一定会惊艳浏览者，今天就为大家带来一份 地球上最通用的JavaScript动画打字实用程序——typeit
定义一个div 太阳轨道sunline，边框显示出来，定义position为relative
微信启动界面是这样的，5年都没变过，相信很多人都有疑问，这究竟有什么意味呢？ 今天Super就跟大家八一八，这个启动界面，大概有三个意思。 1、与微信产品气质的映射关系强烈 宇宙浩瀚，人类多么渺小
最近手里有个Phaser游戏工程，上面让转化为微信小游戏，由于对这块儿不了解，所以上网查了很多资料，终于让我找到了案例，在此要感谢下 作者；下面是我转载的他的文章
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
相对于一般布局方式的笛卡尔坐标系，MotionLayout还拓展了ConstraintLayout中的相对中心布局方式，我们暂且称之为「极坐标布局」方式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
