three.js实现世界3d地图

概况如下：

1、THREE.Shape绘制世界地图平面地图；

2、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 }