three.js實現世界3d地圖

概況如下：
1、THREE.Shape繪製世界地圖平面地圖；
2、THREE.ExtrudeGeometry將繪製的平面沿着Z軸拉伸，實現3d效果；

效果圖如下：

預覽地址：three.js實現世界3d地圖

初始化場景、相機、渲染器，設置相機位置，初始化光源，光源採用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, 500);
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);

繪製世界地圖平面方法

// 繪製世界平面地圖函數
var drawShape = function (pos, averageX, averageY) {
	var shape = new THREE.Shape();
	shape.moveTo(pos[0][0] - averageX, pos[0][1] - averageY);
	pos.forEach(function (item) {
		shape.lineTo(item[0] - averageX, item[1] - averageY);
	})
	return shape;
}

將平面地圖沿着z軸拉伸轉換配置參數

// ExturdeGeometry配置參數
var options = {
	depth: 3, // 定義圖形拉伸的深度，默認100
	steps: 0, // 拉伸面方向分爲多少級，默認爲1
	bevelEnabled: true, // 表示是否有斜角，默認爲true
	bevelThickness: 0, // 斜角的深度，默認爲6
	bevelSize: 0, // 表示斜角的高度，高度會疊加到正常高度
	bebelSegments: 0, // 斜角的分段數，分段數越高越平滑，默認爲1
	curveSegments: 0 // 拉伸體沿深度方向分爲多少段，默認爲1
}

將平面地圖沿着z軸拉伸轉換爲3d方法

// 將shape轉換爲ExtrudeGeometry
var transition3d = function (shapeObj, identify) {
	var geometry = new THREE.ExtrudeGeometry(shapeObj, options);
    var material1 = new THREE.MeshBasicMaterial({
    	color: faceColor
    });
    var material2 = new THREE.MeshBasicMaterial({
    	color: sideColor
    });
    // 繪製地圖
    shapeGeometryObj['shapeGeometry' + identify] = new THREE.Mesh(geometry, [material1, material2]);
    // 將地圖加入場景
    scene.add(shapeGeometryObj['shapeGeometry' + identify])
}

世界地圖通過position值來實現位置的確認，動畫使用requestAnimationFrame來實現。

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