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

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

image.png

image.png

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

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

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

image.png

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次

此篇文章效果图:

image.png

结束!后续会随着学习进度持续更新~

分类:
前端
标签: