2D map +3D earth particle animation effect learning advanced way, the final effect picture is as follows:

(I) Three. js draws the outline of 3D world map with geoJson

  • Basic understanding of Threejs
  • Understand the geoJson

1. Threejs three elements Scene,Renderer,Camera

2. Load the GeoJSON data and analyze it to obtain the longitude and latitude of each country and draw the graph

function initEarth(){ $.getJSON("data/world.json",function(json) { var overlayMaterial = new THREE.MeshPhongMaterial({ The 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); })}Copy the code

3. Rotate animation

function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  controls.update();
}
Copy the code

We use a requestAnimationFrame() method, which belongs to the browser’s Window object and can be called directly, passing in a callback that is executed before the browser’s next redraw, usually 60 times per second

Effect picture of this article:

The end! We will continue to update with the progress of learning