1. 首页
  2. IT资讯

使用three.js开发3d地图初探

公司要做智慧消防楼层可视化,需要用到web3d,开源的引擎中先研究了cesium三维地球,但cesium做楼层感觉是大材小用,而且体验也不好,最终选用的是功能强大、更适合小型场景的three。

three是图形引擎,而web二维三维地图都是基于图形引擎的,所以拿three来开发需求简单的三维地图应用是没什么问题的。

1.坐标转换

实际地理坐标为经度、纬度、高度,而three.js使用的是右手坐标系x、y、z,本来考虑的是将经纬度坐标转换成墨卡托,再去和three的坐标系对应。而实际项目中,经纬度转墨卡托后,墨卡托的值太大,对应到three坐标系中,坐标距离原点太远,用户交互后,会有精度损失,于是先定义一个中间点,然后将墨卡托的结果减去这个中间点的值。(我自己是经度对应z轴,纬度对应x轴,高度对应y轴)

  1. function lonlatToMercator(lon,lat,height){
  2. var z = height ? height:0;
  3. var x = (lon / 180.0) * 20037508.3427892;
  4. var y = (Math.PI / 180.0) * lat;
  5. var tmp = Math.PI / 4.0 + y / 2.0;
  6. y = 20037508.3427892 * Math.log(Math.tan(tmp)) / Math.PI;
  7. return {x: x,y: y,z: z};
  8. }
  9. var center = lonlatToMercator(lonVal,latVal,heightVal);
  1. function lonlatToThree(lon,lat,height){
  2. var z = height? height:0;
  3. var x = (lon / 180.0) * 20037508.3427892;
  4. var y = (Math.PI / 180.0) * lat;
  5. var tmp = Math.PI / 4.0 + y / 2.0;
  6. y = 20037508.3427892 * Math.log(Math.tan(tmp)) / Math.PI;
  7. var result = {
  8. x: x - center.x,
  9. y: y - center.y,
  10. z: z -center.z
  11. };
  12. return result;
  13. }

 

2.加载模型

three.js支持多种模型加载,我是用草图大师建的模型,于是直接转成collada模型,然后使用three的collada模型加载器加载模型。因为要和three.js对应,而模型默认位于x-z轴上,所以要进行模型翻转等操作。

3.创建标注

three中,创建始终朝向相机的POI标注可以使用Sprite类,也可以使用canvas创建图标+文字类型的图形作为Sprite的纹理。sprite默认是有一个固定的3d长度,相机距离sprite越近,sprite在屏幕上越大,反之越小,过大或者过小都会导致sprite的canvas失真模糊,解决方案是计算出该点的屏幕像素与3d坐标长度的比值,然后将sprite缩放到一个合适的3d长度。

  1. var position = sprite.position;
  2. var canvas = sprite.material.map.image;
  3. if(canvas){
  4. var poiRect = {w:canvas.width,h:canvas.height};
  5. var scale = getPoiScale(position,poiRect);
  6. sprite.scale.set(scale[0],scale[1],1.0);
  7. }
  8. function getPoiScale(position,poiRect){
  9. if(!position) return;
  10. var distance = camera.position.distanceTo(position);
  11. var top = Math.tan(camera.fov / 2 * Math.PI / 180)*distance; //camera.fov 相机的拍摄角度
  12. var meterPerPixel = 2*top/container.clientHeight;
  13. var scaleX = poiRect.w * meterPerPixel;
  14. var scaleY = poiRect.h * meterPerPixel;
  15. return [scaleX,scaleY,1.0];
  16. }

使用three.js开发3d地图初探

4.标注碰撞

创建标注之后,放缩时难免会出现标注相互遮盖的情况,这样既影响美观也会遮盖住地图信息,这里需要检测标注间的遮盖,显示和不显示一些标注。

这里主要是将标注点3d坐标转成屏幕坐标,再根据sprite中canvas的长度和高度,就可以知道sprite在屏幕的矩形范围。接下来就是计算各个标注点sprite的矩形相交了。

  1. var sprite1 = {x:x1,y:y1,w:w1,h:h1}; //sprite1左下角x,y,宽度、高度
  2. var sprite2 = {x:x2,y:y2,w:w2,h:h2}; //sprite2左下角x,y,宽度、高度
  3. //检测两个标注sprite是否碰撞
  4. function isPOIRect(sprite1,sprite2){
  5. var x1 = sprite1.x,y1=sprite1.y,w1=sprite1.w,h1=sprite1.h;
  6. var x2 = sprite2.x,y2=sprite2.y,w1=sprite2.w,h1=sprite2.h;
  7. if (x1 >= x2 && x1 >= x2 + w2) {
  8. return false;
  9. } else if (x1 <= x2 && x1 + w1 <= x2) {
  10. return false;
  11. } else if (y1 >= y2 && y1 >= y2 + h2) {
  12. return false;
  13. } else if (y1 <= y2 && y1 + h1 <= y2) {
  14. return false;
  15. }else{
  16. return true;
  17. }
  18. }

 

5.加载设备

创建设备,我同样使用的是Sprite类,跟创建标注类似,放缩之后,sprite在屏幕上的大小保持不变。

6.设备点击

raycaster类用于在3d中被鼠标选中的物体,这同样可以选中sprite对象,于是用此方法模拟设备的点击。其中deviceGroup是保存所有设备sprite的object3d对象。

  1. function onDocumentMouseDown(e) {
  2. e.preventDefault();
  3. mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  4. mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  5. //新建一个三维单位向量 假设z方向就是0.5
  6. //根据照相机,把这个向量转换到视点坐标系
  7. var vector = new THREE.Vector3(mouse.x, mouse.y,0.5).unproject(camera);
  8. //在视点坐标系中形成射线,射线的起点向量是照相机, 射线的方向向量是照相机到点击的点,这个向量应该归一标准化。
  9. var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  10. //射线和模型求交,选中一系列直线
  11. var intersects = raycaster.intersectObjects([deviceGroup],true);
  12. if (intersects.length > 0) {
  13. var intersected = intersects[0].object;
  14. if(intersected instanceof THREE.Sprite){
  15. //点击到设备图标
  16. }
  17. }
  18. }

7.弹出框

设备点击之后,一般都会以弹出框形式展示设备的具体信息,这里需要先定义弹出框的样式,然后将弹出点设备的三维坐标转换成屏幕坐标,设置一定的偏移量,再将弹出框放到偏移后的屏幕位置上。然后每次更改相机,重新计算弹出框的位置。

  1. //three世界坐标转为屏幕坐标
  2. function threeToScreen(position,camera){
  3. var worldVector = new THREE.Vector3(
  4. position.x,
  5. position.y,
  6. position.z
  7. );
  8. var standardVector = worldVector.project(camera);//世界坐标转标准设备坐标
  9. var a = window.innerWidth / 2;
  10. var b = window.innerHeight / 2;
  11. var x = Math.round(standardVector.x * a + a);//标准设备坐标转屏幕坐标
  12. var y = Math.round(-standardVector.y * b + b);//标准设备坐标转屏幕坐标
  13. return {
  14. x: x,
  15. y: y
  16. };
  17. }

使用three.js开发3d地图初探

8.设备动画

简单设备动画可以通过更改设备的材质、大小、位置来实现,比如通过定时更改设备的材质来实现设备图标的闪烁。

项目中要模拟火情,因此花了些时间网上参考并用粒子系统做了个火焰动画,这里先用一个循环通过THREE.Vector3对象创建构成火焰的全部的点,放到THREE.Geometry对象的vertices中;再使用canvas创建火焰的纹理图形,传给THREE.PointsMaterial对象(并设置材质透明transparent:true和加法混合THREE.AddictiveBlending),最后以前面的THREE.Geometry和THREE.PointsMaterial创建THREE.Points对象,完成该火焰粒子系统的初始化。

每个粒子都有单独的坐标,最后用一定的规律驱动粒子的移动达到动画的效果。

使用three.js开发3d地图初探

9.鼠标绘制

在3d中,鼠标的位置对应到三维坐标中是一条射线,因此需要添加绘制平面,点击时获取鼠标和绘制平面的交点,作为绘制点。绘制时监听鼠标的单击和移动事件。

绘制线时,鼠标点击和移动时,直接更改线的geometry中的vertices;绘制面时,不仅仅要更改vertices还要计算所有顶点组合的三角面(我使用的是Earcut.js),作为geometry的faces,最后创建一个以这个geometry为几何形状的多边形mesh。

  1. //positions 三维坐标数组[[x,y,z],[x,y,z],...]
  2. function createPolygon(positions){
  3. var shapePositons = [];
  4. for(var i=0;i<positions.length;i++){
  5. var position = positions[i];
  6. shapePositons.push(new THREE.Vector3(position[0],position[1],position[2]));
  7. }
  8. var data = [];
  9. for(var i=0;i<positions.length;i++){
  10. var position = positions[i];
  11. data.push(position[0],position[1]);
  12. }
  13. var faces = [];
  14. var triangles = Earcut.triangulate(data);
  15. if(triangles && triangles.length != 0){
  16. for(var i=0;i<triangles.length;i++){
  17. var length = triangles.length;
  18. if(i%3==0 && i < length-2){
  19. faces.push(new THREE.Face3(triangles[i],triangles[i+1],triangles[i+2]));
  20. }
  21. }
  22. }
  23. var geometry = new THREE.BufferGeometry();
  24. geometry.vertices = shapePositons;
  25. geometry.faces = faces;
  26. var mesh = new THREE.Mesh(geometry,material);
  27. return mesh;
  28. }

使用three.js开发3d地图初探

 

10.未完

买了一本three的书,打算要好好学习一下。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/198431.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code