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);
}