three.js实现球体地球2018年全球GDP前十国家标记
概况如下:
1、SphereGeometry
实现自转的地球;
2、THREE.Math.degToRad
,Math.sin
,Math.cos
实现地图经纬度与三位坐标x,y,z之间的转换;
3、ImageUtils
加载球体贴图;
4、THREE.CubicBezierCurve3
创建标记立体轨迹,调用getPoints
将轨迹分成需要的段数;
5、轨迹中根据分段数与相应国家gdp值来实现标记。
效果图如下:
预览地址:three.js实现球体地球2018年全球GDP前十国际标记
初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用HemisphereLight
,设置光源位置为场景中心位置,并将光源加入场景中。
// 初始化场景
var scene = new THREE.Scene();
// 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比,
// 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置,对应参数分别表示x,y,z位置
camera.position.set(0, 0, 200);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
// 设置光照
scene.add(new THREE.HemisphereLight('#ffffff', '#ffffff', 1));
设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。
// 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);
定义地球及其材质,地球通过SphereGeometry
来实现,通过ImageUtils
来导入贴图。
// 定义地球材质,earthImg表示地图贴图地址
var earthTexture = THREE.ImageUtils.loadTexture(earthImg, {}, function () {
renderer.render(scene, camera);
});
// 创建地球
earthBall = new THREE.Mesh(new THREE.SphereGeometry(earthBallSize, 50, 50), new THREE.MeshBasicMaterial({
map: earthTexture
}));
scene.add(earthBall);
标记地点经纬度坐标与三维x,y,z坐标转换方法。
// 经纬度转换函数,longitude表示经度,latitude表示唯独,radius表示球体半径
var getPosition = function (longitude, latitude, radius) {
// 将经度,纬度转换为rad坐标
var lg = THREE.Math.degToRad(longitude);
var lt = THREE.Math.degToRad(latitude);
var temp = radius * Math.cos(lt);
// 获取x,y,z坐标
var x = temp * Math.sin(lg);
var y = radius * Math.sin(lt);
var z = temp * Math.cos(lg);
return {
x: x,
y: y,
z: z
}
}
标记分段通过THREE.Group
来将多个分段节点集合成一个,通过getPosition
将标记点的经纬度转换为三维x,y,z坐标。
// 标记函数,marking表示需要标记地点的经纬度信息,标记值
var markingPoint = function (marking) {
// 将经纬度信息转换为三维x,y,z坐标
var pos = getPosition(marking.pos[0] + 90, marking.pos[1], earthBallSize);
var _pos = getPosition(marking.pos[0] + 90, marking.pos[1], earthBallSize + marking.value);
// 根据转换的信息通过三次贝塞尔曲线实现轨迹
var curve = new THREE.CubicBezierCurve3(pos, pos, _pos, _pos);
// 在轨迹中分出100各节点
var points = curve.getPoints(100);
// 创建一个集合,用于存放分段的节点信息
var aGroup = new THREE.Group();
points.forEach(function (pointItem, index) {
var radius = 0.5 - index * 0.005;
// 创建分段节点处的类
var aGeo = new THREE.SphereGeometry(radius, 5, 5);
// 创建分段节点处类的材质
var aMater = new THREE.MeshPhongMaterial({
color: marking.color,
transparent: true,
opacity: 1 - index * 0.01
})
var aMesh = new THREE.Mesh(aGeo, aMater);
// 根据计算出的经纬度信息确认分段节点的位置
aMesh.position.set(pointItem.x, pointItem.y, pointItem.z);
aGroup.add(aMesh);
})
markingGroup.add(aGroup);
}
标记地点通过position
值来实现位置的确认,动画使用requestAnimationFrame
来实现。
// 执行函数
var render = function () {
scene.rotation.y -= 0.01;
renderer.render(scene, camera);
orbitcontrols.update();
requestAnimationFrame(render);
}
three.js实现球体地球2018年全球GDP前十国家标记的更多相关文章
- three.js实现球体地球城市模拟迁徙
概况如下:1.SphereGeometry实现自转的地球:2.THREE.ImageUtils.loadTexture加载地图贴图材质:3.THREE.Math.degToRad,Math.sin,M ...
- [cnbeta]iPhone 2018年全球出货2.25亿部:中国区下滑两成
iPhone 2018年全球出货2.25亿部:中国区下滑两成 2019年01月22日 20:12 501 次阅读 稿源:快科技 0 条评论 https://www.cnbeta.com/artic ...
- 【转帖】2018全球公有云IaaS榜单出炉:阿里、腾讯、中国电信、金山云列前十
2018全球公有云IaaS榜单出炉:阿里.腾讯.中国电信.金山云列前十 https://news.cnblogs.com/n/628391/ 中国电信貌似就是用的华为的技术 阿里 腾讯 华为 金山 百 ...
- [转帖]2018年全球ERP软件行业市场规模与发展趋势分析 云ERP将兴起【组图】
2018年全球ERP软件行业市场规模与发展趋势分析 云ERP将兴起[组图] https://www.qianzhan.com/analyst/detail/220/190215-4b1d6868.ht ...
- 2017全球GDP总量达74万亿美元 各国占比排行榜
全球GDP总量达74万亿美元 各国占比排行榜 2017年公布的2015年全球各国GDP占比,数据图片来源:世界银行报告 2月24日,来自世界银行的最新GDP数字已于2月早些时候公布,现由How ...
- JS计算前一天或后一天,前一月后一月
JS计算前一天或后一天,前一月后一月,上一天下一下,上一月下一月. 方法一: function ktkGetNextMonth(currentDate, scaleStep) { //scaleSte ...
- JS前端三维地球渲染——中国各城市航空路线展示
前言 我还从来没有写过有关纯JS的文章(上次的矢量瓦片展示除外,相对较简单.),自己也学习过JS.CSS等前端知识,了解JQuery.React等框架,但是自己艺术天分实在不过关,不太喜欢前端设计,比 ...
- JS实现环绕地球飞行的3D飞行线动画效果(JS+HTML)
1.项目介绍 JS+HTML实现绕地球飞行的3D飞行线动画效果,且3D地球可以随意拖动和滑动缩放,画面中心是蓝色地球,地球表面上的两点连线之间有光电随机出现沿着抛物线轨迹3D飞行,可使用较好的浏览器打 ...
- Node.js之绝对选择(2018版)
[这篇是很早期的文字,由于引用较广泛,担心误导,故按照现在的情形做一些修改] 几年前,完全放弃Asp.net,彻底脱离微软方向.Web开发,在公司团队中,一概使用Node.js.Mongodb.Git ...
随机推荐
- 一文了解有趣的位运算(&、|、^、~、>>、<<)
1.位运算概述 从现代计算机中所有的数据二进制的形式存储在设备中.即0.1两种状态,计算机对二进制数据进行的运算(+.-.*./)都是叫位运算,即将符号位共同参与运算的运算. 口说无凭,举一个简单的例 ...
- C#中unit
整理的百度百科的一些关于UNIT的资料 中文名UINT 外文名typedef unsigned short UIN 性 质 32位无符号整数 应 用 是unsigned int派生出来的 ...
- sessionID是如何在客户端和服务器端传递的?
sessionID是如何在客户端和服务器端传递的? 服务器初次创建session的时候后返回session到客服端(在返回头(response)中有setCookie),浏览器会把sessionnam ...
- CentOS7 修改PATH环境变量的方法
vim /etc/profile 添加: PATH=/root/.config/composer/vendor/bin:$PATH 保存,退出,运行: source /etc/profile 检查: ...
- web设计_1_思路总览
核心思想:结构和样式分离 HTML与CSS 只有充分将页面核心内容和外观设计相分离而获得的灵活性,才能顺利构建出能够满足每个web用户需要的最佳设计方案. 核心要求:灵活性 适应不同的浏览器,适应各种 ...
- windows下用easybcd引导ubuntu出现grub的解决方案
linux安装时吧boot挂在到单独的分区 如果grub覆盖了mbr的话可以用pe工具箱修复windows的mbr linux引导项选grub 驱动器选安装时挂载了/boot的分区 添加条目 启动即可 ...
- 注解与AOP切面编程实现redis缓存与数据库查询的解耦
一般缓存与数据库的配合使用是这样的. 1.查询缓存中是否有数据. 2.缓存中无数据,查询数据库. 3.把数据库数据插入到缓存中. 其实我们发现 1,3 都是固定的套路,只有2 是真正的业务代码.我们可 ...
- 安装MySQL5.7 安装环境:CentOS7 64位 MINI版,
安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo ...
- 按需制作最小的本地yum源
[需求背景] 有时候客户的环境里面只能离线安装文件,此时可以使用CentOS的ISO光盘作为本地源进行安装,或者是制作一个包含了YUM源服务的虚拟机. 无论上面的哪一种方式都不够轻量,我们自己的组件可 ...
- 详解阿里P7架构师是怎么在Spring中实现事务暂停
摘要 Spring框架是一个流行的基于轻量级控制反转容器的Java/J2EE应用框架,尤其在数据访问和事务管理方面的能力是众所周知的.Spring的声明性事务分离可以应用到任何POJO目标对象,并且包 ...