js 地球全景 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Planetary.js 旋转地球插件

Planetary.js 是一款生成可交互地球模型的插件。简介 Planetary.js 可以生成一个性能（UI）良好可交互的地球。...与 json 文件下载核心 js 有三个，名字叫 d3.v3.min.js、topojson.v1.min.js 和 planetaryjs.min.js 需要使用的文件名字叫 world-.../d3.v3.min.js'> js.org/topojson.v1.min.js'></script.../dist 使用方法拿到文件后可以放在静态网页的某个文件夹，也可以放到自己的图床里，也可以直接引用原始的 js 文件，总之可以访问到就可以注意：直接本地运行是不能显示地球的，需要在 web...planet.projection.rotate(rotation); lastTick = now; } }); }; };})(); 之后可以加入数据来让他展示指定地球上的位置

5.4K3 0

Node.js 事件循环全景图

2.1K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

three.js 带更新文字的旋转地球

查看旋转地球效果主要用到几个知识点（1）显示文字是使用了three.js 的精灵（Sprite），精灵的文字方向始终面向相机，文字是在canvas中画的，精灵的材质就是加载的带有文字的canvas...DOCTYPE html> 旋转地球 js"> js/controls/OrbitControls.js..."> js/libs/stats.min.js"> <style type="text...scene.remove(sprite) showSprite(); controls.update(); //stats.update(); // 地球自转

11K11 3

GPU地球进展

进展实现地球表面随时间变化的日夜贴图实现在地球表面实现任意线条（如行政边界、经纬线等）使用最简单的赤纬公式。晨昏线过渡是两侧5°线性过渡。风场是随便找的一个时刻。

1071 0

纯CSS实现720全景？不用Three.js 也可以

前段时间时间呢，我写了一个我给鸿星尔克写了一个720°全景看鞋展厅，看大家挺赶兴趣的，当时我是用 Three.js 来写的，但是 JS 实现可能在一些非常非常老旧的机型上兼容性可能没有那么完美。...作者：羽飞链接：https://juejin.cn/post/6997697496176820255 通过H5实现3D全景是挺平常的事情了，通过three.js可以很容易实现一个全景图。...可以这个链接来查看，three.js来实现的，戳three.js全景图DEMO链接[1]。其实我们通过CSS3也能实现类似的效果，而且性能上更好，兼容性更好，支持低端机型。...可以长按二维码查看这个，CSS全景图DEMO链接[2]。或者通过如上CSS全景图DEMO二维码进行尝试。...| by Neel Dedhia | Medium | Medium[28] 参考资料 [1] three.js全景图DEMO链接: https://threejs.org/examples/?

4.3K3 1

HTML5+JS 可交互360°&柱状全景图浏览

/three.min.js"> js/lib/D.min.js"> js"...> js"> js...根据官方示例的代码修改一下即可实现全景浏览的功能。 ---- 柱状全景图但我写这篇文章并不只是为了推荐一个库，还有我刚趟过的一个坑——如何实现柱状全景图。...通常，全景图片都是用专门仪器拍摄的几乎360° x 180°照片。...真正的全景照片的宽高比应该是2:1 这种照片无法制作360°全景，但是可以退而求其次做个柱状全景图。例如下面这张图↓ ?

3.5K3 2

JS前端三维地球渲染——中国各城市航空路线展示

前言我还从来没有写过有关纯JS的文章（上次的矢量瓦片展示除外，相对较简单。）...，自己也学习过JS、CSS等前端知识，了解JQuery、React等框架，但是自己艺术天分实在不过关，不太喜欢前端设计，比较喜欢后台的逻辑处理。...昨天整理自己收藏的东西，无意中看到一个3维地球展示的开源框架，非常漂亮，怎么自己当时仅是收藏并未研究呢？于是喜欢技术无法自拔的我不分三七二十一，立马开始研究。...这段时间我一直在做GIS方向，于是看到3维地球就无法自拔，DEMO位置http://www.senchalabs.org/philogl/PhiloGL/examples/worldFlights/。...加载线路获取到城市数据、航线数据等之后，通过每条航线的起点和终点在三维地球中绘制出三维航线。

3.8K6 0

B流浪地球

中途改了题意没看到瞎做半天hhh #include <bits/stdc++.h> #define ll long long using namespace ...

9943 0

地球与生命的诞生 -- 前寒武纪地球历史

周末闲来无事，反复查阅着维基百科，在一个个链接间跳转，总结出这篇博客，记述地球的起源与地质的变迁地球诞生 — 46亿年前 138亿年前，宇宙从大爆炸中诞生，此时的宇宙充满了高密度、高温高压的物质...地壳与原始大气和海洋的诞生 — 冥古宙(46亿年前 ~ 38.4亿年前) 接下来，我们就将目光聚焦到宇宙中的地球上 46亿年前，地球伴随着太阳系的诞生而诞生，这之后的不久，一个名为“忒伊亚”的小行星飞速向地球飞来...，在这个火星般大小的星球与地球撞击之后，月球形成了后期重轰击期(41亿年前 ~ 38.4亿年前) 起初，地球是一个岩浆球，炽热的岩浆不断聚合、冷却然而，刚刚诞生的地球并非如同一个婴儿般享受着刚刚来到这世上的平静...以月球的东海撞击事件为标志，后期重轰炸期结束，38.4亿年前，横跨900公里的月球东方海形成后，太阳系中的撞击事件显著减少，地球形成稳定总结起初人们都认为，整个冥古宙地球都处于融化态，直到冥古宙末期...，极地冰盖扩展到赤道，很多地质学家相信当时的地球成为了一个雪球，海洋也完全冻结火山喷发的二氧化碳因地球生物不能光合作用而逐步累积，最终形成的温室效应才使得地球走出冰封埃迪卡拉纪(6.35亿年前 ~

2.2K1 1

【公益】4.22世界地球日：关注地球之癌

大数据文摘·公益行动项目名称：一亿棵梭梭项目地点：内蒙古阿拉善盟项目官网：http://suosuo.see.org.cn/ 一、项目介绍一亿棵梭梭是...

7543 0

Three.js 实现 360 度全景浏览的最简单方式

用 Three.js 做这样的一个全景图浏览工具，是再简单不过的事情，只需要几行代码，但却很有用。那我们就来学一下 Three.js 怎么做全景图浏览吧。...这就是 Three.js 的 3D 场景的创建和渲染成 2D 的流程。简单回顾了下基础，那全景图改怎么浏览呢？...我们需要 360 度的看，用 OrbitsControls 来做交互就行，他叫轨道控制器，也就是卫星绕地球的那种轨道的感觉。.../js/three.js"> <script src="....总结一般的照片只是一个方向的画面，而全景图是上下左右前后 360 度的画面，它能立体的记录拍照位置的场景。全景图需要专门的工具来浏览，我们可以用 Three.js 来实现。

5.9K5 1

用OpenGL绘制地球

逛啊逛，让我找到了另一种方法，仅仅几行代码： // 画地球 void OpenGL::DrawEarth(void) ...{ GLUquadricObj *quadObj = gluNewQuadric

3.4K10 1

基于Three.js的360度全景--photo-sphere-viewer--简介

这个是基于three.js的全景插件 photo-sphere-viewer.js ———————————————————————————————————————— 1、能添加热点； 2、能调用陀螺仪...；使用方法： 1、这个插件的用法很简单，引入如下2个js js/three.min.js"> js/photo-sphere-viewer.min.js...container：必填参数，放置全景图的div元素。 autoload：可选，默认值为true，true为自动调用全景图，false为在后面加载全景图（通过.load()方法）。...> js/photo-sphere-viewer.min.js"> js/demo01.js"> <!

7.1K9 0

地球和宇宙之战：卫星网络会“制霸”地球吗？

引言地球上，McClain对着自己被入侵的银行账一脸懵，因为对方来自NASA网络。...从“真正防黑客”到“太空黑入地球” 卫星曾一度因其遥远和不可控性被称为“真正的防黑客技术”。但是，这个离我们很遥远，甚至有些神秘的东西，为什么会带来安全风险呢？...当黑客在地球上，自己的电脑键盘按下鼠标，在银河系游离的卫星真的那么容易被控制吗？...建议尽早布局，抢占地球低轨道和通信频道资源。...对于国家来说，由于地球的卫星轨道资源是有限的。过多的企业和他国在卫星轨道上布置互联网技术，势必会对我国的卫星轨道资源构成侵害。

8592 0

给地球把脉！我国首个地球系统模拟大科学装置启用

虽然给整个地球做实验不现实，但科学家仍有办法为地球把脉。...新装置的核心软件自主研发地球系统模拟装置，又称地球模拟实验室，简而言之，就是对地球系统进行数值模拟，即以地球系统观测数据为基础，利用描述地球系统的物理、化学和生命过程及其演化的规律在超级计算机上进行大规模科学计算...，科学家们由此得以重现地球的过去、模拟地球的现在、预测地球的未来。...地球系统数值模拟装置是我国首个具有自主知识产权，以地球系统各圈层数值模拟软件为核心，软、硬件协同设计，规模及综合技术水平位于世界前列的专用地球系统数值模拟装置。...曹军骥表示，新落成启用的地球模拟实验室整体性能与国际先进水平相当，具备地球表层各圈层的模拟能力，能够更全面地考虑地球系统的各种过程，特别是全球生态和生物地球化学过程及其与气候系统的相互作用，并在此基础上建立起

5801 0

现在做 Web 全景合适吗？

先看一下实例 gif： tl;dr; 使用 three.js 实现全景技术 UV 映射原理简介 3D 坐标原理和移动控制 Web 陀螺仪简介 iv-panorama 简单库介绍基于 Three.js...为了简化，这里就直接采用 Three.js 库。具体的工作原理就是将正在播放的 video 元素，映射到纹理(texture) 空间中，通过 UV 映射，直接贴到一个球面上。...下面是最简代码：这里主要模拟地球坐标： lat 代表维度（latitude）: 用户上下滑动改变的值，或者手机上下旋转 lon 代表经度（lontitude）: 用户左右滑动改变的值，或者手机左右旋转...简单来说，陀螺仪的参数在标准情况下，手机有两份坐标：地球坐标 x/y/z：在任何情况下，都是恒定方向手机平面坐标 x/y/z：相当于手机屏幕定义的方向以手机本身为坐标点，地球坐标如图所示： x：...其主要特性为：依赖于 Three.js，需要预先挂载到 window 对象上灵活配置，内置支持陀螺仪和 touch 控制。

5.4K8 0

不到30行代码实现一个酷炫H5全景

ThreeJS是Three（3D）+JS（JavaScript），它封装了底层的WebGL接口，使得我们能够在不了解图形学知识的前提下，也能用简单的代码实现三维场景的渲染。...称为地理坐标系统，它是一种利用三度空间的球面来定义地球上的空间的球面坐标系统，能够标示地球表面上的任何一个位置。 ?...Jietu20210527-172203-HD.gif 至此，我们全景制作已经完成了，（只统计js代码：共_28行_代码,我才不是标题党呢？?）。...三、全景交互原理 3.1 手势交互之旋转手势交互之旋转指单指滑动操作，这与滑动地球仪的交互是一致的。...H5有两份坐标：地球坐标 x/y/z：在任何情况下，都是恒定方向手机平面坐标 x/y/z：相对于手机屏幕定义的方向取值范围： X轴：上下旋转Beta(X) ,取值范围：[ -180° ～ 180°

3.2K4 0

mapboxGL实现旋转的地球

概述许久未更新，这一篇是凑数的，用最新的mapboxGL2.10的版本实现一个旋转的地球的效果。...ctx.beginPath(); ctx.arc(half, half, half, 0, Math.PI * 2); ctx.fill(); } } 旋转的地球的实现比较简单

1.8K3 0

利用JS实现的根据经纬度计算地球上两点之间的距离

最近用到了根据经纬度计算地球表面两点间距离的公式，然后就用JS实现了一下。计算地球表面两点间的距离大概有两种办法。...第一种是默认地球是一个光滑的球面，然后计算任意两点间的距离，这个距离叫做大圆距离(The Great Circle Distance)。...公式如下：使用JS来实现为： var EARTH_RADIUS = 6378137.0; //单位M var PI = Math.PI; function getRad...当然，我们都知道，地球其实并不是一个真正的圆球体，而是椭球，所以有了下面的公式： /** * approx distance between two points on earth ellipsoid

4.4K3 0

现在做 Web 全景合适吗？

tl;dr; 使用 three.js 实现全景技术 UV 映射原理简介 3D 坐标原理和移动控制 Web 陀螺仪简介 iv-panorama 简单库介绍基于 Three.js 全景视频是基于 3D 空间...为了简化，这里就直接采用 Three.js 库。具体的工作原理就是将正在播放的 video 元素，映射到纹理(texture) 空间中，通过 UV 映射，直接贴到一个球面上。...因为，Three.js 中 geometry.faceVertexUvs 在划分物理空间时，定义的面分解三角形的顺序是根据逆时针方向，按序号划分，如下图所示： ?...简单来说，陀螺仪的参数在标准情况下，手机有两份坐标：地球坐标 x/y/z：在任何情况下，都是恒定方向手机平面坐标 x/y/z：相当于手机屏幕定义的方向以手机本身为坐标点，地球坐标如图所示： ?...其主要特性为：依赖于 Three.js，需要预先挂载到 window 对象上灵活配置，内置支持陀螺仪和 touch 控制。

3K4 0

点击加载更多

Planetary.js 旋转地球插件

Node.js 事件循环全景图

three.js 带更新文字的旋转地球

GPU地球进展

纯CSS实现720全景？不用Three.js 也可以

HTML5+JS 可交互360°&柱状全景图浏览

JS前端三维地球渲染——中国各城市航空路线展示

B流浪地球

地球与生命的诞生 -- 前寒武纪地球历史

【公益】4.22世界地球日：关注地球之癌

Three.js 实现 360 度全景浏览的最简单方式

用OpenGL绘制地球

基于Three.js的360度全景--photo-sphere-viewer--简介

地球和宇宙之战：卫星网络会“制霸”地球吗？

给地球把脉！我国首个地球系统模拟大科学装置启用

现在做 Web 全景合适吗？

不到30行代码实现一个酷炫H5全景

mapboxGL实现旋转的地球

利用JS实现的根据经纬度计算地球上两点之间的距离

现在做 Web 全景合适吗？

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐