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次
此篇文章效果图: