three.js實現世界3d地圖

概況以下：

一、THREE.Shape繪製世界地圖平面地圖；

二、THREE.ExtrudeGeometry將繪製的平面沿着Z軸拉伸，實現3d效果；

效果圖以下：

 

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

 

初始化場景、相機、渲染器，設置相機位置，初始化光源，光源採用HemisphereLight，設置光源位置爲場景中心位置，並將光源加入場景中。

 1 // 初始化場景
 2 var scene = new THREE.Scene();
 3 // 初始化相機，第一個參數爲攝像機視錐體垂直視野角度，第二個參數爲攝像機視錐體長寬比，
 4 // 第三個參數爲攝像機視錐體近端面，第四個參數爲攝像機視錐體遠端面
 5 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
 6 // 設置相機位置，對應參數分別表示x，y，z位置
 7 camera.position.set(0, 0, 500);
 8 var renderer = new THREE.WebGLRenderer({
 9       alpha: true,
10       antialias: true
11 });
12 // 設置光照
13 scene.add(new THREE.HemisphereLight('#ffffff', '#ffffff', 1));

設置場景窗口尺寸，而且初始化控制器，窗口尺寸默認與瀏覽器窗口尺寸保持一致，最後將渲染器加載到dom中。

1 // 設置窗口尺寸，第一個參數爲寬度，第二個參數爲高度
2 renderer.setSize(dom.clientWidth, dom.clientHeight);
3 // 初始化控制器
4 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
5 // 將渲染器加載到dom中
6 dom.appendChild(renderer.domElement);

繪製世界地圖平面方法

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

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

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

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

 1 // 將shape轉換爲ExtrudeGeometry
 2 var transition3d = function (shapeObj, identify) {
 3     var geometry = new THREE.ExtrudeGeometry(shapeObj, options);
 4     var material1 = new THREE.MeshBasicMaterial({
 5         color: faceColor
 6     });
 7     var material2 = new THREE.MeshBasicMaterial({
 8         color: sideColor
 9     });
10     // 繪製地圖
11     shapeGeometryObj['shapeGeometry' + identify] = new THREE.Mesh(geometry, [material1, material2]);
12     // 將地圖加入場景
13     scene.add(shapeGeometryObj['shapeGeometry' + identify])
14 }

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

1 // 執行函數
2 var render = function () {
3     scene.rotation.y -= 0.01;
4     renderer.render(scene, camera);
5     orbitcontrols.update();
6     requestAnimationFrame(render);
7 }