THREE.JS实现地图+地球粒子效果之路

2D地图+3D地球粒子动画效果学习进阶之路， 最终效果图如下：

（一）three.js结合geoJson绘制3D世界地图轮廓

• 对threejs有基本的了解
• 了解geoJson

1. threejs的三要素Scene,Renderer,Camera

2. 加载geojson数据并解析，获取每个国家的经纬度绘制图形

function initEarth(){
  $.getJSON("data/world.json",function(json) {
    var overlayMaterial = new THREE.MeshPhongMaterial({
      map: THREE.ImageUtils.loadTexture("images/colormap5.png" ),
      transparent: true, 
      opacity: 0.6,
      blending: THREE.AdditiveBlending
    });
    var globe = new THREE.Object3D();
    var overlaySphere = new THREE.Mesh(new THREE.SphereGeometry(globeSize+2, 32,32 ), overlayMaterial);
    overlaySphere.rotation.y = -Math.PI/2;
    globe.add(overlaySphere);
    var temp = drawThreeGeo(json, globeSize*1.43, 'sphere', scene, {
      color: 0x7e7e7e,
      linewidth: 2,
      blending: THREE.AdditiveBlending,
      transparent:true,
      opacity:0.5
    });
    globe.add(temp[0]);
    globe.updateMatrix();
    scene.add(globe);
    controls = new THREE.TrackballControls(camera);
    renderer.render(scene, camera);
  })
}
复制代码

3.旋转动画

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  controls.update();
}
复制代码

这里用到一个requestAnimationFrame()的方法，该方法属于浏览器的window对象可以直接调用，需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，执行次数通常是每秒60次

此篇文章效果图：

结束！后续会随着学习进度持续更新～