three.js实现球体地球2018年全球GDP前十国家标记

three.js实现球体地球2018年全球GDP前十国家标记

概况如下：
1、SphereGeometry实现自转的地球；
2、THREE.Math.degToRad，Math.sin，Math.cos实现地图经纬度与三位坐标x，y，z之间的转换；
3、ImageUtils加载球体贴图；
4、THREE.CubicBezierCurve3 创建标记立体轨迹，调用getPoints将轨迹分成需要的段数；
5、轨迹中根据分段数与相应国家gdp值来实现标记。

效果图如下：

预览地址：three.js实现球体地球2018年全球GDP前十国家标记

初始化场景、相机、渲染器，设置相机位置，初始化光源，光源采用HemisphereLight，设置光源位置为场景中心位置，并将光源加入场景中。

// 初始化场景
var scene = new THREE.Scene();
// 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比，
// 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面
var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
// 设置相机位置，对应参数分别表示x，y，z位置
camera.position.set(0, 0, 200);
var renderer = new THREE.WebGLRenderer({
	  alpha: true,
	  antialias: true
});
// 设置光照
scene.add(new THREE.HemisphereLight('#ffffff', '#ffffff', 1));

设置场景窗口尺寸，并且初始化控制器，窗口尺寸默认与浏览器窗口尺寸保持一致，最后将渲染器加载到dom中。

// 设置窗口尺寸，第一个参数为宽度，第二个参数为高度
renderer.setSize(dom.clientWidth, dom.clientHeight);
// 初始化控制器
var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
// 将渲染器加载到dom中
dom.appendChild(renderer.domElement);

定义地球及其材质，地球通过SphereGeometry来实现，通过ImageUtils来导入贴图。

// 定义地球材质，earthImg表示地图贴图地址
var earthTexture = THREE.ImageUtils.loadTexture(earthImg, {}, function () {
    renderer.render(scene, camera);
});
// 创建地球
earthBall = new THREE.Mesh(new THREE.SphereGeometry(earthBallSize, 50, 50), new THREE.MeshBasicMaterial({
    map: earthTexture
}));
scene.add(earthBall);

标记地点经纬度坐标与三维x，y，z坐标转换方法。

// 经纬度转换函数，longitude表示经度，latitude表示唯独，radius表示球体半径
var getPosition = function (longitude, latitude, radius) {
	// 将经度，纬度转换为rad坐标
	var lg = THREE.Math.degToRad(longitude);
	var lt = THREE.Math.degToRad(latitude);
	var temp = radius * Math.cos(lt);
	// 获取x，y，z坐标
	var x = temp * Math.sin(lg);
	var y = radius * Math.sin(lt);
	var z = temp * Math.cos(lg);
	return {
		x: x,
		y: y,
		z: z
	}
}

标记分段通过THREE.Group来将多个分段节点集合成一个，通过getPosition将标记点的经纬度转换为三维x，y，z坐标。

// 标记函数，marking表示需要标记地点的经纬度信息，标记值
var markingPoint = function (marking) {
	// 将经纬度信息转换为三维x，y，z坐标
	var pos = getPosition(marking.pos[0] + 90, marking.pos[1], earthBallSize);
	var _pos = getPosition(marking.pos[0] + 90, marking.pos[1], earthBallSize + marking.value);
	// 根据转换的信息通过三次贝塞尔曲线实现轨迹
	var curve = new THREE.CubicBezierCurve3(pos, pos, _pos, _pos);
	// 在轨迹中分出100各节点
	var points = curve.getPoints(100);
	// 创建一个集合，用于存放分段的节点信息
	var aGroup = new THREE.Group();
	points.forEach(function (pointItem, index) {
		var radius = 0.5 - index * 0.005;
		// 创建分段节点处的类
		var aGeo = new THREE.SphereGeometry(radius, 5, 5);
		// 创建分段节点处类的材质
		var aMater = new THREE.MeshPhongMaterial({
			color: marking.color,
			transparent: true,
			opacity: 1 - index * 0.01
		})
		var aMesh = new THREE.Mesh(aGeo, aMater);
		// 根据计算出的经纬度信息确认分段节点的位置
		aMesh.position.set(pointItem.x, pointItem.y, pointItem.z);
		aGroup.add(aMesh);
	})
	markingGroup.add(aGroup);
}

标记地点通过position值来实现位置的确认，动画使用requestAnimationFrame来实现。

// 执行函数
var render = function () {
	scene.rotation.y -= 0.01;
    renderer.render(scene, camera);
    orbitcontrols.update();
    requestAnimationFrame(render);
}