three.js 绘制3d地图
通过地图数据配合three可以做出非常酷炫的地图,在大数据展示中十分常见。
这篇郭先生就来说说使用three.js几何体制作3D地图。在线案例点击原文地址。
地图的数据是各个地图块的点数组,通过THREE.ExtrudeGeometry方法挤压出地图的版块,然后通过THREE.Line方法画出地图的分割线。地图的数据参见DATAV.GeoAtlas,鼠标悬浮到地图版块高亮,效果如图
1. 得到数据,遍历数据,处理数据
rawMap() {
this.worldGeometry = mapJson; //mapJson就是地图的json数据
this.worldGeometry.features.forEach((worldItem, worldItemIndex) => {
worldItem.geometry.coordinates.forEach(worldChildItem => {
worldChildItem.forEach(countryItem => { //每个版块的点数组
this.drawExtrude(this.drawShape(countryItem)) //传递数据画出地图的shape,返回结果再传到drawExtrude方法得到ExtrudeGeometry网格
this.drawLine(countryItem); //传递数据画出地图边线
});
});
});
group.scale.y = 1.2; //group里面包含所有版块网格
scene.add(group);
lineGroup.scale.y = 1.2; //lineGruop里面包含所有线的网格
scene.add(lineGroup);
this.render();
}
2. 传递数据画出地图的shape,返回结果再传到drawExtrude方法得到ExtrudeGeometry网格。
drawShape(posArr) {
var shape = new THREE.Shape();
shape.moveTo(posArr[0][0] - this.offsetX, posArr[0][1] - this.offsetY);
posArr.forEach(item => {
shape.lineTo(item[0] - this.offsetX, item[1] - this.offsetY);
});
return shape;
}
drawExtrude(shapeObj) {
var geometry = new THREE.ExtrudeGeometry(shapeObj, this.options);
var material1 = new THREE.MeshPhongMaterial({
color: this.bgColor,
specular: this.bgColor
});
var material2 = new THREE.MeshBasicMaterial({
color: 0x008bfb
});
let shapeGeometryObj = new THREE.Mesh(geometry, [material1, material2]);
shapeGeometryObj.name = 'board';
group.add(shapeGeometryObj);
}
3. 传递数据画出地图边线
drawLine(posArr) {
let geometry1 = new THREE.Geometry();
let geometry2 = new THREE.Geometry();
posArr.forEach(item => {
geometry1.vertices.push(
new THREE.Vector3(
item[0] - this.offsetX,
item[1] - this.offsetY,
1.01
)
);
geometry2.vertices.push(
new THREE.Vector3(
item[0] - this.offsetX,
item[1] - this.offsetY,
-0.01
)
);
});
let lineMaterial = new THREE.LineBasicMaterial({ color: 0x008bfb });
let line1 = new THREE.Line(geometry1, lineMaterial);
let line2 = new THREE.Line(geometry2, lineMaterial);
lineGroup.add(line1);
lineGroup.add(line2);
}
4. 鼠标悬浮后高亮版块
handleMousemove(event) {
event.preventDefault();
let mouse = new THREE.Vector2(0, 0);
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
this.raycaster.setFromCamera(mouse, camera);
let intersects = this.raycaster.intersectObjects(group.children);
this.previousObj.material[0].color = new THREE.Color(this.bgColor);
if(intersects[0] && intersects[0].object) {
intersects[0].object.material[0].color = new THREE.Color(0xffaa00);
this.previousObj = intersects[0].object; //previousObj保存悬浮的对象,鼠标移开后恢复颜色。
}
}
主要代码部分就是这样,我们也可以在颜色改变时加入一些渐变动画,three.js可以写出各种各样的地图,这是入门级的版本,希望给萌新一些启发。
转载请注明地址:郭先生的博客
three.js 绘制3d地图的更多相关文章
- Three.js实现3D地图实例分享
本文主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习 ...
- Javascript实战开发:教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
- 使用three.js开发3d地图初探
three是图形引擎,而web二维三维地图都是基于图形引擎的,所以拿three来开发需求简单的三维地图应用是没什么问题的. 1.坐标转换 实际地理坐标为经度.纬度.高度,而three.js使用的是右手 ...
- 利用d3.js绘制中国地图
d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...
- three.js实现世界3d地图
概况如下: 1.THREE.Shape绘制世界地图平面地图: 2.THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果: 效果图如下: 预览地址:three.js实现世界3 ...
- js基于谷歌地图API绘制可编辑圆形与多边形
之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...
- 绘制3D的js库
有哪些值得推荐的绘制3D的js库? 4 个回答 默认排序 草皮子 HTML5/GAME 4 人赞同了该回答 只用过three.js,所以推荐这个.不清楚你打算用来做什么,总的来说,得看你的运 ...
- Threejs 开发3D地图实践总结
前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂直于我们想要照亮的物体表面的向量.法线代表 ...
- Threejs 开发3D地图实践总结【转】
Threejs 开发3D地图实践总结 前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...
随机推荐
- 三角函数与缓入缓出动画及C#实现(图文讲解)
日常经常能看到缓入缓出的动画效果,如: 1,带缓入缓出效果的滚动条: 2,带缓入缓出效果的呼吸灯: 像上面这种效果,就是用到了三角函数相关的知识,下面将从头开始一步步去讲解如何实现这种效果. 一.基础 ...
- JavaWeb的登陆与注销功能
JavaWeb 登录与注销 大致流程 一般我们在Web应用中 登录页面一般是以 login.jsp的首页 大致流程如下: 当我们在前台写入用户名和密码之后,点击登录按钮 会将表单提交给一个LoginS ...
- 详述@Responsebody和HTTP异步请求的关系
Map.ModelAndView.User.List等对象都可以作为返回值.上述这两种对象都可以使用此注解.使用此注解即表示是在同一次请求的响应体里返回.浏览器以异步http的方式来接收.比如后端的M ...
- Redis高级特性介绍以及实例分析
Redis基础类型回顾 转自:http://www.jianshu.com/p/af7043e6c8f9 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的Stri ...
- python实用笔记——IO编程
打开文件 f = open('/Users/michael/test.txt', 'r') 再读取 >>> f.read() 'Hello, world!' 最后关闭 >> ...
- Python实用笔记 (11)高级特性——迭代器
这些可以直接作用于for循环的对象统称为可迭代对象:Iterable. 可以使用isinstance()判断一个对象是否是Iterable对象: >>> from collectio ...
- 分享一个与jQuery相关的TypeError: $ is not a function问题解决过程
最近碰到一个比较奇葩的问题,估计很多人也遇到过,就是jQuery可能会遇到的‘$ is not a function’,不过我碰到的这个问题比较怪异,解决该问题也颇费了一番周折,现在给大家分享一下. ...
- C#实现快速查找(递归,非递归)
原文件: http://pan.baidu.com/share/link?shareid=2838344856&uk=3912660076 我英语很烂...哎,我正在努力... 效果图:
- 微信h5页面下拉露出网页来源的解决办法
微信h5页面下拉露出网页来源的解决办法:将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', functio ...
- CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法
:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...