概况如下:

1、SphereGeometry实现自转的地球;

2、THREE.CatmullRomCurve3实现球体线条地图点确定;

3、THREE.Math.degToRadMath.sinMath.cos实现地图经纬度与三位坐标x,y,z之间的转换;

4、MeshLine用于绘制线条;

5、canvas用于绘制球体世界地图贴图,通过THREE.CanvasTexture引入。

效果图如下:

预览地址:three.js通过canvas实现球体世界平面地图

初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用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);

通过canvas定义地球材质。

 // canvas画地图函数,因为性能问题,线条不再canvas中实现,w表示宽度,h表示高度,worldPos表示世界地图经纬度信息
var createCanvas = function (w, h, worldPos) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var context = canvas.getContext('2d');
var centerX = w / 2;
var centerY = h / 2;
var average = w / 360;
// 绘制背景颜色
context.fillStyle = earthBallColor;
context.fillRect(0, 0, w, h);
// canvas中绘制地图方法
function canvasLineFun (childrenPosition) {
context.fillStyle = earthBallPlaneColor;
context.moveTo(centerX + childrenPosition[0][0] * average, centerY - childrenPosition[0][1] * average);
childrenPosition.forEach(function (posItem) {
context.lineTo(centerX + posItem[0] * average, centerY - posItem[1] * average);
})
context.closePath();
context.fill();
}
worldPos.forEach(function (item) {
canvasLineFun(item);
})
return canvas;
}

定义地球及其材质,地球通过SphereGeometry来实现,通过THREE.CanvasTexture来引入canvas创建的贴图。

 // 创建地球
earthBall = new THREE.Mesh(new THREE.SphereGeometry(earthBallSize, 50, 50), new THREE.MeshBasicMaterial({
map: new THREE.CanvasTexture(createCanvas(2048, 1024, worldGeometry)),
side: THREE.FrontSide
}));
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
}
}

绘制世界地图线条方法

 // 绘制世界地图线条函数
var drawWorldLine = function (pos, identify) {
var posArray = [];
pos.forEach(function (item) {
var pointPosition = getPosition(item[0] + 90, item[1], earthBallSize);
posArray.push(new THREE.Vector3(pointPosition.x, pointPosition.y, pointPosition.z));
})
// 绘制的线条需要关闭,第二个参数默认为false,表示不关闭
var curve = new THREE.CatmullRomCurve3(posArray, true);
var points = curve.getPoints(500);
var geometry = new THREE.Geometry().setFromPoints(points);
// 定义线条
var line = new MeshLine();
line.setGeometry(geometry);
// 定义线条材质
var material = new MeshLineMaterial({
color: worldLineColor,
lineWidth: worldLineWidth
})
// 绘制地图
lineGeometryObj['lineGeometry' + identify] = new THREE.Mesh(line.geometry, material);
// 将地图加入场景
scene.add(lineGeometryObj['lineGeometry' + identify])
}

获取世界地图经纬度信息及计算绘制球体地图参数方法

 // 获取世界经纬度信息函数
var getWorldGeometry = function () {
$.ajax({
type : "GET", //提交方式
url : "./code/world.json",
async: false,
success : function(response) {//返回数据根据结果进行相应的处理
worldGeometry = [];
// 绘制世界地图
response.features.forEach(function (worldItem, worldItemIndex) {
var length = worldItem.geometry.coordinates.length;
var multipleBool = length > 1 ? true : false;
worldItem.geometry.coordinates.forEach(function (worldChildItem, worldChildItemIndex) {
if (multipleBool) {
// 值界可以使用的经纬度信息
if (worldChildItem.length && worldChildItem[0].length == 2) {
worldGeometry.push(worldChildItem);
}
// 需要转换才可以使用的经纬度信息
if (worldChildItem.length && worldChildItem[0].length > 2) {
worldChildItem.forEach(function (countryItem, countryItenIndex) {
worldGeometry.push(countryItem);
})
}
} else {
var countryPos = null;
if (worldChildItem.length > 1) {
countryPos = worldChildItem;
} else {
countryPos = worldChildItem[0];
}
if (countryPos) {
worldGeometry.push(countryPos);
}
}
})
})
}
})
}

球体地图线条通过position值来实现位置的确认,动画使用requestAnimationFrame来实现。

 // 执行函数
var render = function () {
scene.rotation.y -= 0.01;
renderer.render(scene, camera);
orbitcontrols.update();
requestAnimationFrame(render);
}

three.js通过canvas实现球体世界平面地图的更多相关文章

  1. three.js实现世界3d地图

    概况如下: 1.THREE.Shape绘制世界地图平面地图: 2.THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果: 效果图如下: 预览地址:three.js实现世界3 ...

  2. Three.js - 走进3D的奇妙世界

    本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<three. ...

  3. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  4. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  5. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  6. Qt的QWebChannel和JS、HTML通信/交互驱动百度地图

    Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...

  7. Python 绘制2016世界GDP地图

    2016世界GDP地图 从https://datahub.io/core/gdp#data下载得到json文件. # country_code.py 获取国家二字代码 # 从pygal.maps.wo ...

  8. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  9. three.js学习:纹理Texture之平面纹理

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. AQS系列(三)- ReentrantReadWriteLock读写锁的加锁

    前言 前两篇我们讲述了ReentrantLock的加锁释放锁过程,相对而言比较简单,本篇进入深水区,看看ReentrantReadWriteLock-读写锁的加锁过程是如何实现的,继续拜读老Lea凌厉 ...

  2. 管程(Moniter): 并发编程的基本心法

    JavaStorm 关注公众号获取更多并发 在吃透 Syncchronized 原理 中介绍了关于 Synchronize的实现原理,无论是同步方法还是同步代码块,无论是ACC_SYNCHRONIZE ...

  3. SpringMVC生成的验证码图片不显示

    近期用SSM框架写一个项目,登录模块需要生成验证码图片,我把相关的代码写好了之后传到 jsp ,但是图片不显示,查看控制台显示404,反复查询了一下代码并没有发现任何问题,代码如下: @Control ...

  4. FastJson中JSONString与各个对象的的转换关系及API示例

    前言 JSON作为一种轻量级的数据交换格式,在我们日常的开发中使用十分广泛,就Java后端的开发工作中,JSON字符串与Java对象之间相互转换是常常遇到的操作. 虽然平时用到的挺多的,但是因为用于J ...

  5. tp5.1 无限极分类前台展示

    商城前台的多级分类展示,如图所示,一般是三级.所以代码只组装到第三级. 数据库设计,共5个字段.level字段是方便用来显示级别的.pid是父级分类id,pid等于0说明它是一级分类.path字段,举 ...

  6. Python爬虫实战:爬取腾讯视频的评论

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 易某某 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  7. NPOI 获取单元格的值

    1.日期格式的坑 var cell = row.GetCell(i);//获取某一个单元格 var value = ""; if (cell != null) { if (cell ...

  8. Spring基础——IOC九种bean声明方式

    Spring简介 Spring不是服务于开发web项目的功能,或业务.而是服务于项目的开发,方便各层间的解耦调用,方便对类的批量管理,是提高软件开发效率,降低后期维护成本的框架. Spring的核心思 ...

  9. Sql: Oracle paging

    --书分类目录kind --涂聚文 Geovin Du create table geovindu.BookKindList ( BookKindID INT PRIMARY KEY, BookKin ...

  10. (转)LSTM神经网络介绍

    原文链接:http://www.atyun.com/16821.html 扩展阅读: https://machinelearningmastery.com/time-series-prediction ...