threejs 绘制球体_web前端入门到实战：threejs 绘制地球、飞机、轨迹

首先我们来看下要实现的效果

这个缩小后的图片，下面我们来看下近距离的动态效果。。

效果比较简陋，需要后期再处理。。。

下面进入主题，代码篇。。

HTML部分：

全球航班

html{overflow: hidden;}

body { margin: 0;}

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

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});

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

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来获取的飞行轨迹经纬度坐标点)

// 时间段

var curTime = Date.parse(ne