threejs 绘制地球、飞机、轨迹

最新推荐文章于 2024-05-16 09:43:08 发布
最新推荐文章于 2024-05-16 09:43:08 发布
阅读量5.2k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingmax54212008/article/details/78200436
版权

threejs官网：https://threejs.org/

对于three.js不太熟悉的朋友们可以参考  

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

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

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

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

HTML部分：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html lang = "en" >
< head >
  < meta charset = "UTF-8" >
  < title >全球航班</ title >
  
  < style >
  html{overflow: hidden;}
  body { margin: 0;}
  </ style >
 
  < script src = "js/jquery.min.js" ></ script >
</ head >
< body >
  <!-- 地国 -->
  < div id = "zh_globe_container" ></ div > <!-- 容器 -->
  
  < script src = "js/threejs/Detector.js" ></ script > <!-- webGL浏览器支持检测 -->
  < script src = "js/threejs/three.min.js" ></ script > <!-- 核心js -->
  < script src = "js/threejs/stats.min.js" ></ script > <!-- 性能测试 -->
  < script src = "js/threejs/OrbitControls.js" ></ script > <!-- 地球控制 -->
  < script src = "js/socketio-1.4.5.js" ></ script > <!-- socket -->
 
  < script src = "js/globe.js" ></ script > <!-- -->
</ body >
</ html >

JS部分(globe.js)

1、实现地球

地球贴图(可以在网上下载)

?
1
2
3
4
5
6
7
8
9
10
11
12
// 地球
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、添加球面光源(这里使用的是半球光)

?
1
2
3
4
5
6
7
8
// 光
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、添加星点

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 星点
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 坐标

?
1
2
3
4
5
6
7
8
9
10
// 获取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};
}

画飞机

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 飞机形状(不想画的，可以下载个 飞机模型 使用加载器加载进来)
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则旋转到球体另一面也能看到飞机

添加飞机

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 添加飞机
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来获取的飞行轨迹经纬度坐标点)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 时间段
var curTime = Date.parse( new Date())/1000;
var depTime = curTime - 30*60;
// 轨迹线质
var trackMaterial = new THREE.LineBasicMaterial({color : 0x1B94B1});
// 绘制历史轨迹
function drawHistoryTrack(anum) {
  socket.emit( "fullPath" , anum, depTime, curTime, function (status, data){
  if (status) {
  var dLength = data.length;
  if (dLength>=2) {
  var trackCoordArr = [];
  for ( var i=0; i<dLength; i++) {
   if (data[i].lng && data[i].alt) {
   trackCoordArr.push({lng: data[i].lng, lat: data[i].lat});
   }
  }
 
  var tcaLength = trackCoordArr.length;
  if (tcaLength>=2) {
   var tcaHalfLength = Math.ceil(tcaLength/2),
   vertexArr = [];
 
   // 这里只取了三个点(起点、中点、终点)
   var p1 = getPosition(trackCoordArr[0].lng, trackCoordArr[0].lat, 0),
   p2 = getPosition(trackCoordArr[tcaHalfLength].lng, trackCoordArr[tcaHalfLength].lat, tcaLength*0.01),
   p3 = getPosition(trackCoordArr[tcaLength-1].lng, trackCoordArr[tcaLength-1].lat, 0);
 
   var trackCurve = new THREE.CatmullRomCurve3([
   new THREE.Vector3(p1.x, p1.y, p1.z),
   new THREE.Vector3(p2.x, p2.y, p2.z),
   new THREE.Vector3(p3.x, p3.y, p3.z)
   ]);
 
   var trackGeometry = new THREE.Geometry(),
   verticesArr = trackCurve.getPoints(tcaLength);
 
   trackGeometry.vertices = verticesArr;
   
   var trackLine = new THREE.Line(trackGeometry, trackMaterial);
   group.add(trackLine);
 
   // 动画点
   addLightPoint(p1, tcaLength, verticesArr);
  }
  }
  }
  });
}

如果要绘制所有点，且头尾是在球面上的曲线，则需要两次循环

?
1
2
3
4
5
6
7
8
9
10
11
var tcaRemainLength = tcaLength-tcaHalfLength
for ( var j=0; j<tcaHalfLength; j++) { // 前一半
  var p1 = getPosition(trackCoordArr[j].lng, trackCoordArr[j].lat, j*0.05);
  vertexArr.push( new THREE.Vector3(p1.x, p1.y, p1.z));
}
for ( var k=tcaRemainLength; k>0; k--) { // 后一半
  var p2 = getPosition(trackCoordArr[tcaLength-k].lng, trackCoordArr[tcaLength-k].lat, k*0.05);
  vertexArr.push( new THREE.Vector3(p2.x, p2.y, p2.z));
}
 
var trackCurve = new THREE.CatmullRomCurve3(vertexArr);

这个部分看看就行了。。

光点动画

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 点动画
var pointGeometry = new THREE.SphereGeometry(0.2, 20, 20);
var pointMaterial = new THREE.MeshBasicMaterial({color: 0x40E0D0});
function addLightPoint(pos, coordsNum ,verArr) {
  var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
  pointMesh.position.set(pos.x, pos.y, pos.z);
  group.add(pointMesh);
 
  var index = 0;
  function pointAnimate() {
  index++;
  if (index>coordsNum) {
  index = 0;
  }
  pointMesh.position.set(verArr[index].x, verArr[index].y, verArr[index].z);
  requestAnimationFrame(pointAnimate);
  }
  pointAnimate();
}

这个点使用的是sphere，，当然也可以用顶点来实现，如下

?
1
2
3
4
5
6
7
8
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(0, 0, 0))
geometry.colors.push( new THREE.Color(0xffffff));
 
var material = new THREE.PointsMaterial({size: 1, vertexColors: THREE.VertexColors, opacity: 0.75, sizeAttenuation: true , transparent: true });
var point = new THREE.Points(geometry, material);
point.position.set(x, y, z);
group.add(point);

另外不想用光点动画的话，也可以用线动画，实现原理是不断更新顶点坐标，如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var curveGeometry = new THREE.Geometry();
var curveData = new THREE.CatmullRomCurve3(verArr.slice(0, 10));
curveGeometry.vertices = curveData.getPoints(10);
 
var curveMaterial = new THREE.LineBasicMaterial({color: 0x40E0D0});
var curveLine = new THREE.Line(curveGeometry, curveMaterial);
group.add(curveLine);
 
var index = 0;
function lineAnimate() {
  index++;
  if (index>coordsNum-10) {
  index = 0;
  }
  var offsetData = verArr.slice(index, 10+index);
  if (offsetData.length > 0) {
  curveData = new THREE.CatmullRomCurve3(offsetData);
  curveLine.geometry.vertices = curveData.getPoints(10);
  curveLine.geometry.verticesNeedUpdate = true ;
  }
  requestAnimationFrame(lineAnimate);
}
lineAnimate();

最后就是布置场景和事件了

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 初始化
function init() {
  container = document.getElementById( 'zh_globe_container' );
 
  scene = new THREE.Scene();
  var bgTexture = new THREE.TextureLoader().load( "images/textures/starfield.jpg" );
  scene.background = bgTexture;
 
  camera = new THREE.PerspectiveCamera(50, winWth/winHgt, 1, 2000);
  camera.up.x = 0;
  camera.up.y = 1;
  camera.up.z = 0;
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 400;
  camera.lookAt(0,0,0);
 
  group = new THREE.Group();
  scene.add(group);
 
  // 地球
  globe();
 
  // 飞机
  plane();
 
  // 星点
  stars();
 
  // 半球光
  lights();
 
  // 渲染器
  renderer = new THREE.WebGLRenderer({antialias: true , preserveDrawingBuffer: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(winWth, winHgt);
  container.appendChild(renderer.domElement);
 
  // 盘旋控制
  var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControl.minDistrance = 20;
  orbitControl.maxDistrance = 50;
  orbitControl.maxPolarAngle = Math.PI/2;
 
  // 性能测试
  stats = new Stats();
  container.appendChild(stats.dom);
 
  // resize事件
  window.addEventListener( 'resize' , onWindowResize, false );
}
 
// 窗口大小改变
function onWindowResize() {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
 
// 渲染
function render() {
  group.rotation.y -= 0.0005;
  renderer.render(scene, camera);
}
 
// 动画
function animate() {
  requestAnimationFrame(animate);
  render();
  stats.update();
}
 
init();
animate();

完整代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
var log = console.log.bind(console);
 
var globeObj = ( function () {
  'use strict' ;
 
  // 判断浏览器是否支持webgl
  if (!Detector.webgl) Detector.addGetWebGLMessage();
 
  var container, stats;
  var camera, scene, renderer;
  var group;
  var mouseX = 0, mouseY = 0;
  var winWth = window.innerWidth, winHgt = window.innerHeight;
 
  // 获取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};
  }
 
  // 飞机
  function plane() {
  var socket = io( 'https://loc.variflight.com/*****此处接口地址不能给了' , {transports: [ 'websocket' ]});
 
  var clientBounds = [52.793056,72.427908,2.970897,135.181814];
 
  // 连接
  socket.on( 'connect' , function () {
  socket.emit( "sub" , clientBounds, -1, '' , function (){});
  });
 
  // 飞机标记
  var planeMarkers = {};
 
  // 飞机形状
  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 });
  // 添加飞机
  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);
  }
  }
 
  // 时间段
  var curTime = Date.parse( new Date())/1000;
  var depTime = curTime - 30*60;
  // 轨迹线质
  var trackMaterial = new THREE.LineBasicMaterial({color : 0x1B94B1});
  // 绘制历史轨迹
  function drawHistoryTrack(anum) {
  socket.emit( "fullPath" , anum, depTime, curTime, function (status, data){
  if (status) {
   var dLength = data.length;
   if (dLength>=2) {
   var trackCoordArr = [];
   for ( var i=0; i<dLength; i++) {
   if (data[i].lng && data[i].alt) {
   trackCoordArr.push({lng: data[i].lng, lat: data[i].lat});
   }
   }
 
   var tcaLength = trackCoordArr.length;
   if (tcaLength>=2) {
   var tcaHalfLength = Math.ceil(tcaLength/2),
   tcaRemainLength = tcaLength-tcaHalfLength,
   vertexArr = [];
 
   /* 所有点
   for ( var j=0; j<tcaHalfLength; j++) {
   var p1 = getPosition(trackCoordArr[j].lng, trackCoordArr[j].lat, j*0.05);
   vertexArr.push( new THREE.Vector3(p1.x, p1.y, p1.z));
   }
   for ( var k=tcaRemainLength; k>0; k--) {
   var p2 = getPosition(trackCoordArr[tcaLength-k].lng, trackCoordArr[tcaLength-k].lat, k*0.05);
   vertexArr.push( new THREE.Vector3(p2.x, p2.y, p2.z));
   }
   
   var trackCurve = new THREE.CatmullRomCurve3(vertexArr);
   */
 
   // 三个点
   var p1 = getPosition(trackCoordArr[0].lng, trackCoordArr[0].lat, 0),
   p2 = getPosition(trackCoordArr[tcaHalfLength].lng, trackCoordArr[tcaHalfLength].lat, tcaLength*0.01),
   p3 = getPosition(trackCoordArr[tcaLength-1].lng, trackCoordArr[tcaLength-1].lat, 0);
 
   var trackCurve = new THREE.CatmullRomCurve3([
   new THREE.Vector3(p1.x, p1.y, p1.z),
   new THREE.Vector3(p2.x, p2.y, p2.z),
   new THREE.Vector3(p3.x, p3.y, p3.z)
   ]);
 
   var trackGeometry = new THREE.Geometry(),
   verticesArr = trackCurve.getPoints(tcaLength);
 
   trackGeometry.vertices = verticesArr;
   
   var trackLine = new THREE.Line(trackGeometry, trackMaterial);
   group.add(trackLine);
 
   // 动画点
   addLightPoint(p1, tcaLength, verticesArr);
   }
   }
  }
  });
  }
 
  // 点动画
  var pointGeometry = new THREE.SphereGeometry(0.2, 20, 20);
  var pointMaterial = new THREE.MeshBasicMaterial({color: 0x40E0D0});
  function addLightPoint(pos, coordsNum ,verArr) {
  var pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);
  pointMesh.position.set(pos.x, pos.y, pos.z);
  group.add(pointMesh);
 
  var index = 0;
  function pointAnimate() {
  index++;
  if (index>coordsNum) {
   index = 0;
  }
  pointMesh.position.set(verArr[index].x, verArr[index].y, verArr[index].z);
  requestAnimationFrame(pointAnimate);
  }
  pointAnimate();
 
  /*var curveGeometry = new THREE.Geometry();
  var curveData = new THREE.CatmullRomCurve3(verArr.slice(0, 10));
  curveGeometry.vertices = curveData.getPoints(10);
 
  var curveMaterial = new THREE.LineBasicMaterial({color: 0x40E0D0});
  var curveLine = new THREE.Line(curveGeometry, curveMaterial);
  group.add(curveLine);
 
  var index = 0;
  function lineAnimate() {
  index++;
  if(index>coordsNum-10) {
   index = 0;
  }
  var offsetData = verArr.slice(index, 10+index);
  if(offsetData.length > 0) {
   curveData = new THREE.CatmullRomCurve3(offsetData);
   curveLine.geometry.vertices = curveData.getPoints(10);
   curveLine.geometry.verticesNeedUpdate = true;
  }
  requestAnimationFrame(lineAnimate);
  }
  lineAnimate();*/
  }
 
  // 监听数据(添加并更新)
  socket.on( '~' , function (res) {
  if ($.isEmptyObject(planeMarkers)) {
  $.each(res, function (i, item) {
   addPlane(item);
  });
  } else {
  $.each(res, function (i, item) {
   if (planeMarkers[item.anum]) {
   if (item.lng && item.lat) {
   var pos = getPosition(item.lng, item.lat, 5);
   planeMarkers[item.anum].position.set(pos.x, pos.y, pos.z);
   }
   } else {
   addPlane(item);
   }
  });
  }
  });
  }
 
  // 地球
  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);
  });
  }
 
  // 星点
  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);
  }
 
  // 光
  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);
  }
 
  // 初始化
  function init() {
  container = document.getElementById( 'zh_globe_container' );
 
  scene = new THREE.Scene();
  var bgTexture = new THREE.TextureLoader().load( "images/textures/starfield.jpg" );
  scene.background = bgTexture;
 
  camera = new THREE.PerspectiveCamera(50, winWth/winHgt, 1, 2000);
  camera.up.x = 0;
  camera.up.y = 1;
  camera.up.z = 0;
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 400;
  camera.lookAt(0,0,0);
 
  group = new THREE.Group();
  scene.add(group);
 
  // 地球
  globe();
 
  // 飞机
  plane();
 
  // 星点
  stars();
  
  // 半球光
  lights();
 
  // 渲染器
  renderer = new THREE.WebGLRenderer({antialias: true , preserveDrawingBuffer: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(winWth, winHgt);
  container.appendChild(renderer.domElement);
 
  // 盘旋控制
  var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControl.minDistrance = 20;
  orbitControl.maxDistrance = 50;
  orbitControl.maxPolarAngle = Math.PI/2;
 
  // 性能测试
  stats = new Stats();
  container.appendChild(stats.dom);
 
  // resize事件
  window.addEventListener( 'resize' , onWindowResize, false );
  }
 
  // 窗口大小改变
  function onWindowResize() {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  // 渲染
  function render() {
  group.rotation.y -= 0.0005;
  renderer.render(scene, camera);
  }
 
  // 动画
  function animate() {
  requestAnimationFrame(animate);
  render();
  stats.update();
  }
 
  init();
  animate();
})();

场景背景图

总结

以上就是关于利用three.js绘制地球、飞机、轨迹的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

kingmax54212008
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
threejs-earth:基于react-three-fiber绘制的地球
05-01
react-r3f-earth 基于react-r3f-threejs绘制的地球 lib React: v17 r3f: v5.3 threejs: v122 Setup $ https://github.com/flowers1225/threejs-earth/tree/react-r3f-earth $ npm install $ npm start
Cesium和Three.js结合的5个方案
三维网格
12-07 1万+
Cesium和Three.js结合的5个方案PK，哪个胜出？ CesiumJS是一个开源、免费的三维地图开发框架，Three.js是一个也开源、免费的3D渲染框架，两者都是基于WebGL技术、使用JavaScript开发的Web前端三维可视化框架，在国内外应用非常广泛。本篇我们来聊聊Cesium+Three.js的几种方案，结合实际应用效果来分析各个方案的优点和缺点，以便项目中快速做出技术路线和方案选择。 1、Cesium和Three.js简单对比 Cesium可视化内容以地理空间数据为主，如卫星影像、地形
探索三维世界：PyThreeJS —— 一个强大的Python与ThreeJS桥梁
最新发布
gitblog_00072的博客
05-16 452
探索三维世界：PyThreeJS —— 一个强大的Python与ThreeJS桥梁 项目地址:https://gitcode.com/jupyter-widgets/pythreejs 在数据可视化和科学计算的领域中，交互式三维图形的呈现能力对于理解复杂数据至关重要。PyThreeJS是一个出色的开源项目，它将Python的强大功能与JavaScript的ThreeJS库无缝连接，为Jupyter...
Three.js地球开发—3D经纬度等比地图，3D飞行航线最终效果
weixin_43787178的博客
05-11 2373
大致原理： 一. 3D经纬度等比地图思路： 通过读取解析json格式存储的世界地图坐标信息，实现3D球面的地图经纬度等比映射，基于此还可以进行更多的开发。 二. D动态航线思路： 2.1 先绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线 借助Three.js的ArcCurve创建圆弧曲线，绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线； 2.2 三维空间中绘制任意两点的飞行圆弧轨迹线 在三维空间中绘制任意两点的飞行圆弧轨迹线，借助之前在XOY平面的绘制的关于Y轴对称的轨迹线，通过一系列旋转得到任意三
threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画（上篇）
星宇大前端
01-07 7045
一个基于threejs实现的漂亮的3d地球，干货，干的你咽不下去。
three.js绘制地球、飞机与轨迹的效果示例
10-20
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建...下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。
基于threejs实现的地球酷炫3D飞行轨迹线.zip
09-13
在本项目中，"基于threejs实现的地球酷炫3D飞行轨迹线"是一个使用JavaScript库Three.js创建的互动3D场景。Three.js是WebGL的一个强大框架，它简化了在浏览器中创建复杂的3D图形的过程。这个项目的核心目标是展示如何...
threejs之3D飞行线
08-19
在本文中，我们将深入探讨如何使用three.js库创建一个3D飞行线的特效，这个特效适用于展示地球上的飞行路径，给用户带来极具视觉冲击力的体验。three.js是一个流行的JavaScript库，专门用于在Web浏览器中进行3D图形...
Three.js地球模型
08-09
在本项目中，"Three.js地球模型"是一个利用JavaScript库Three.js创建的交互式3D地球展示。Three.js是WebGL的一个强大框架，用于在浏览器中实现三维图形渲染。这个项目可能包含一个3D地球的视觉表现，允许用户从不同...
Three+Shader 生成3D地球高度地图
stonerao
03-17 2487
通过three.js + shader 生成高度地图 使用自定义着色器读取到当前位置信息的颜色值来生成当前高度。 准备 两张图，一张展示材质，一张生成高度的材质 高度是黑白构成的一张图，通过图片的灰度来生成高度。 开始 生成地球 生成地球模型 // threejs const options = { radius: 100, // 地球的半径 segments: 640, // 地...
飞行轨迹 js实现飞行轨迹
08-11
js实现飞行轨迹　
three.js流动道路
A873054267的博客
07-07 3574
此前探索过流动线的实现方式，看到另一个案例，学习了另一种实现流动道路的方法 用到了一个开源计算库 https://github.com/yszhao91/xtorcga
（转）使用Three.js制作一个基本的3D飞行游戏
qq_21222737的博客
02-20 2029
今天，我们将使用Three.js创建一个简单的3D飞机，使WebGL更简单。由于GLSL的复杂性和语法，WebGL对许多开发人员来说是一个相当陌生的世界。但是通过Three.js，浏览器中的3D变得非常容易实现。 在本教程中，我们将创建一个简单的3D场景，并在两个主要部分中进行一些交互。 在第一部分，我们将解释Three.js的基础知识，以及如何建立一个非常简单的场景。 第二部分详细介绍了如...
VUE2+THREE.JS 设定巡航行动轨迹
c_x_m的博客
12-04 1116
我们写3D时，常常会有按照一定轨迹去浏览模型，所以,我们要先确认行动轨迹，渲染出行动轨迹以后，再让人物按照行动轨迹去移动。
基于ThreeJS的3D地球
张_优秀的博客
06-16 6334
标记点、动画、旋转、标记点点击事件、信息弹窗
three.js 地球与卫星绕地飞行【真实三维数据】
︶￣城南花已开
08-09 626
three.js 地球与卫星绕地飞行
Three.js+GeoJSON实现三维地图显示
热门推荐
damadashen的博客
08-07 1万+
Three+GeoJSON实现对地理坐标转换并生成中国三维地图。
Threejs实现3d地球记录（1）
qq_41051239的博客
08-04 1033
Threejs实现3d地球
threejs绘制剖面
05-01
threejs是一款非常强大的3D图形库，可以用来绘制各种各样的3D图形。在使用threejs绘制剖面时，需要先确定需要绘制的剖面对象的形状、位置和旋转角度等参数，再根据这些参数来创建一个剖面对象并添加到场景中。 要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值