对于three.js不太熟悉的朋友们可以参考这篇文章，threejs官网：https://threejs.org/
首先我们来看下要实现的效果
这个缩小后的图片，下面我们来看下近距离的动态效果。。
效果比较简陋，需要后期再处理。。。
下面进入主题，代码篇。。
HTML部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全球航班</title> <style> html{overflow: hidden;} body { margin: 0;} </style> <script src="https://www.jb51.net/js/jquery.min.js"></script> </head> <body> <!-- 地国 --> <div></div> <!-- 容器 --> <script src="https://www.jb51.net/js/threejs/Detector.js"></script> <!-- webGL浏览器支持检测 --> <script src="https://www.jb51.net/js/threejs/three.min.js"></script> <!-- 核心js --> <script src="https://www.jb51.net/js/threejs/stats.min.js"></script> <!-- 性能测试 --> <script src="https://www.jb51.net/js/threejs/OrbitControls.js"></script> <!-- 地球控制 --> <script src="https://www.jb51.net/js/socketio-1.4.5.js"></script> <!-- socket --> <script src="https://www.jb51.net/js/globe.js"></script> <!-- --> </body> </html>
JS部分(globe.js)
1、实现地球
地球贴图(可以在网上下载)
// 地球 function globe() { var globeTextureLoader = new THREE.TextureLoader(); globeTextureLoader.load('images/textures/earth.jpg', function (texture) { var globeGgeometry = new THREE.SphereGeometry(200, 100, 100); var globeMaterial = new THREE.MeshStandardMaterial({map: texture}); var globeMesh = new THREE.Mesh(globeGgeometry, globeMaterial); group.add(globeMesh); group.rotation.x = THREE.Math.degToRad(35); group.rotation.y = THREE.Math.degToRad(170); }); }
2、添加球面光源(这里使用的是半球光)
// 光 function lights() { var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x333333, 2); hemisphereLight.position.x = 0; hemisphereLight.position.y = 0; hemisphereLight.position.z = -200; group.add(hemisphereLight); }
3、添加星点
// 星点 function stars() { var starsGeometry = new THREE.Geometry(); for (var i = 0; i < 2000; i ++) { var starVector = new THREE.Vector3( THREE.Math.randFloatSpread(2000), THREE.Math.randFloatSpread(2000), THREE.Math.randFloatSpread(2000) ); starsGeometry.vertices.push(starVector); } var starsMaterial = new THREE.PointsMaterial({color: 0x888888}) var starsPoint = new THREE.Points(starsGeometry, starsMaterial); group.add(starsPoint); }
4、添加飞机
这里需要我们把 经纬度坐标 转成 xyz 坐标
// 获取position function getPosition(lng, lat, alt) { var phi = (90-lat)*(Math.PI/180), theta = (lng+180)*(Math.PI/180), radius = alt+200, x = -(radius * Math.sin(phi) * Math.cos(theta)), z = (radius * Math.sin(phi) * Math.sin(theta)), y = (radius * Math.cos(phi)); return {x: x, y: y, z: z}; }
画飞机
// 飞机形状(不想画的，可以下载个 飞机模型 使用加载器加载进来) var planeShape = new THREE.Shape(); planeShape.moveTo( 0, 0); planeShape.lineTo(0.2, -0.2); planeShape.lineTo(0.2, -1.3); planeShape.lineTo(1.6,-2.7); planeShape.lineTo(1.6,-3); planeShape.lineTo(0.2, -2.1); planeShape.lineTo(0.2, -3); planeShape.lineTo(0.5, -3.4); planeShape.lineTo(0.5, -3.7); planeShape.lineTo(0, -3.3); planeShape.lineTo(-0.5, -3.7); planeShape.lineTo(-0.5, -3.4); planeShape.lineTo(-0.2, -3); planeShape.lineTo(-0.2, -2.1); planeShape.lineTo(-1.6,-3); planeShape.lineTo(-1.6,-2.7); planeShape.lineTo(-0.2, -1.3); planeShape.lineTo(-0.2, -0.2); var planeGeometry = new THREE.ShapeGeometry(planeShape); // 飞机材质 var planeMaterial = new THREE.MeshPhongMaterial({color: 0x0FB4DD, side: THREE.DoubleSide, depthTest: true});
depthTest作用是能否透过球体看到飞机，如果是false则旋转到球体另一面也能看到飞机
添加飞机
// 添加飞机 function addPlane(item) { if(item.anum && item.lng && item.lat) { var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 旋转 plane.rotation.z = THREE.Math.degToRad(item.ang); // 定位 var position = getPosition(item.lng, item.lat, 5); plane.position.set(position.x, position.y, position.z); // 显示/隐藏 // plane.visible = false; // 保存 planeMarkers[item.anum] = plane; // 添加到场景 group.add(plane); // 绘制历史轨迹 drawHistoryTrack(item.anum); } }
绘制轨迹(使用socket来获取的飞行轨迹经纬度坐标点)