快捷導航

three.js開發(fā)3d地圖的實現(xiàn)示例

更新時間：2023年07月23日 12:34:17 作者：evomap

本文主要介紹了three.js開發(fā)3d地圖的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.坐標轉(zhuǎn)換

實際地理坐標為經(jīng)度、緯度、高度，而three.js使用的是右手坐標系x、y、z，本來考慮的是將經(jīng)緯度坐標轉(zhuǎn)換成墨卡托，再去和three的坐標系對應(yīng)。而實際項目中，經(jīng)緯度轉(zhuǎn)墨卡托后，墨卡托的值太大，對應(yīng)到three坐標系中，坐標距離原點太遠，用戶交互后，會有精度損失，于是先定義一個中間點，然后將墨卡托的結(jié)果減去這個中間點的值。（我自己是經(jīng)度對應(yīng)z軸，緯度對應(yīng)x軸，高度對應(yīng)y軸）

function lonlatToMercator(lon,lat,height){
    var z = height ? height:0;
    var x = (lon / 180.0) * 20037508.3427892;
    var y = (Math.PI / 180.0) * lat;
    var tmp = Math.PI / 4.0 + y / 2.0;
    y = 20037508.3427892 * Math.log(Math.tan(tmp)) / Math.PI;
    return {x: x,y: y,z: z};
}
var center = lonlatToMercator(lonVal,latVal,heightVal);

function lonlatToThree(lon,lat,height){
    var z = height? height:0;
    var x = (lon / 180.0) * 20037508.3427892;
    var y = (Math.PI / 180.0) * lat;
    var tmp = Math.PI / 4.0 + y / 2.0;
    y = 20037508.3427892 * Math.log(Math.tan(tmp)) / Math.PI;
    var result = {
        x: x - center.x,
        y: y - center.y,
        z: z -center.z
    };
    return result;
}

2.加載模型

three.js支持多種模型加載，我是用草圖大師建的模型，于是直接轉(zhuǎn)成collada模型，然后使用three的collada模型加載器加載模型。因為要和three.js對應(yīng)，而模型默認位于x-z軸上，所以要進行模型翻轉(zhuǎn)等操作。

3.創(chuàng)建標注

three中，創(chuàng)建始終朝向相機的POI標注可以使用Sprite類，也可以使用canvas創(chuàng)建圖標+文字類型的圖形作為Sprite的紋理。sprite默認是有一個固定的3d長度，相機距離sprite越近，sprite在屏幕上越大，反之越小，過大或者過小都會導致sprite的canvas失真模糊，解決方案是計算出該點的屏幕像素與3d坐標長度的比值，然后將sprite縮放到一個合適的3d長度。

var position = sprite.position;
var canvas = sprite.material.map.image;
if(canvas){
	var poiRect = {w:canvas.width,h:canvas.height};
	var scale = getPoiScale(position,poiRect);
	sprite.scale.set(scale[0],scale[1],1.0);
}
function getPoiScale(position,poiRect){
    if(!position) return;
    var distance = camera.position.distanceTo(position);
    var top = Math.tan(camera.fov / 2 * Math.PI / 180)*distance;    //camera.fov 相機的拍攝角度
    var meterPerPixel = 2*top/container.clientHeight;
    var scaleX = poiRect.w * meterPerPixel;
    var scaleY = poiRect.h * meterPerPixel;
    return [scaleX,scaleY,1.0];
}

4.標注碰撞

創(chuàng)建標注之后，放縮時難免會出現(xiàn)標注相互遮蓋的情況，這樣既影響美觀也會遮蓋住地圖信息，這里需要檢測標注間的遮蓋，顯示和不顯示一些標注。

這里主要是將標注點3d坐標轉(zhuǎn)成屏幕坐標，再根據(jù)sprite中canvas的長度和高度，就可以知道sprite在屏幕的矩形范圍。接下來就是計算各個標注點sprite的矩形相交了。

 var sprite1 = {x:x1,y:y1,w:w1,h:h1};	//sprite1左下角x,y,寬度、高度
    var sprite2 = {x:x2,y:y2,w:w2,h:h2};	//sprite2左下角x,y,寬度、高度
  //檢測兩個標注sprite是否碰撞
    function isPOIRect(sprite1,sprite2){
    	var x1 = sprite1.x,y1=sprite1.y,w1=sprite1.w,h1=sprite1.h;
    	var x2 = sprite2.x,y2=sprite2.y,w1=sprite2.w,h1=sprite2.h;
        if (x1 >= x2 && x1 >= x2 + w2) {
            return false;
        } else if (x1 <= x2 && x1 + w1 <= x2) {
            return false;
        } else if (y1 >= y2 && y1 >= y2 + h2) {
            return false;
        } else if (y1 <= y2 && y1 + h1 <= y2) {
            return false;
        }else{
            return true;
        }
    }

5.加載設(shè)備

創(chuàng)建設(shè)備，我同樣使用的是Sprite類，跟創(chuàng)建標注類似，放縮之后，sprite在屏幕上的大小保持不變。

6.設(shè)備點擊

raycaster類用于在3d中被鼠標選中的物體，這同樣可以選中sprite對象，于是用此方法模擬設(shè)備的點擊。其中deviceGroup是保存所有設(shè)備sprite的object3d對象。

 function onDocumentMouseDown(e) {
        e.preventDefault();
        mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
        //新建一個三維單位向量 假設(shè)z方向就是0.5
        //根據(jù)照相機，把這個向量轉(zhuǎn)換到視點坐標系
        var vector = new THREE.Vector3(mouse.x, mouse.y,0.5).unproject(camera);
        //在視點坐標系中形成射線,射線的起點向量是照相機， 射線的方向向量是照相機到點擊的點，這個向量應(yīng)該歸一標準化。
        var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
        //射線和模型求交，選中一系列直線
        var intersects = raycaster.intersectObjects([deviceGroup],true);          
        if (intersects.length > 0) {
            var intersected = intersects[0].object;
            if(intersected instanceof THREE.Sprite){
            	//點擊到設(shè)備圖標
            }  
        }
    }

7.彈出框

設(shè)備點擊之后，一般都會以彈出框形式展示設(shè)備的具體信息，這里需要先定義彈出框的樣式，然后將彈出點設(shè)備的三維坐標轉(zhuǎn)換成屏幕坐標，設(shè)置一定的偏移量，再將彈出框放到偏移后的屏幕位置上。然后每次更改相機，重新計算彈出框的位置。

//three世界坐標轉(zhuǎn)為屏幕坐標
function threeToScreen(position,camera){
    var worldVector = new THREE.Vector3(
            position.x,
            position.y,
            position.z
    );
    var standardVector = worldVector.project(camera);//世界坐標轉(zhuǎn)標準設(shè)備坐標
    var a = window.innerWidth / 2;
    var b = window.innerHeight / 2;
    var x = Math.round(standardVector.x * a + a);//標準設(shè)備坐標轉(zhuǎn)屏幕坐標
    var y = Math.round(-standardVector.y * b + b);//標準設(shè)備坐標轉(zhuǎn)屏幕坐標
    return {
        x: x,
        y: y
    };
}

8.設(shè)備動畫

簡單設(shè)備動畫可以通過更改設(shè)備的材質(zhì)、大小、位置來實現(xiàn)，比如通過定時更改設(shè)備的材質(zhì)來實現(xiàn)設(shè)備圖標的閃爍。

項目中要模擬火情，因此花了些時間網(wǎng)上參考并用粒子系統(tǒng)做了個火焰動畫，這里先用一個循環(huán)通過THREE.Vector3對象創(chuàng)建構(gòu)成火焰的全部的點，放到THREE.Geometry對象的vertices中；再使用canvas創(chuàng)建火焰的紋理圖形，傳給THREE.PointsMaterial對象（并設(shè)置材質(zhì)透明transparent:true和加法混合THREE.AddictiveBlending），最后以前面的THREE.Geometry和THREE.PointsMaterial創(chuàng)建THREE.Points對象，完成該火焰粒子系統(tǒng)的初始化。

每個粒子都有單獨的坐標，最后用一定的規(guī)律驅(qū)動粒子的移動達到動畫的效果。

9.鼠標繪制

在3d中，鼠標的位置對應(yīng)到三維坐標中是一條射線，因此需要添加繪制平面，點擊時獲取鼠標和繪制平面的交點，作為繪制點。繪制時監(jiān)聽鼠標的單擊和移動事件。

繪制線時，鼠標點擊和移動時，直接更改線的geometry中的vertices；繪制面時，不僅僅要更改vertices還要計算所有頂點組合的三角面（我使用的是Earcut.js），作為geometry的faces，最后創(chuàng)建一個以這個geometry為幾何形狀的多邊形mesh。

//positions 三維坐標數(shù)組[[x,y,z],[x,y,z],...]
function createPolygon(positions){
	var shapePositons = [];
     for(var i=0;i<positions.length;i++){
	    var position = positions[i];
	    shapePositons.push(new THREE.Vector3(position[0],position[1],position[2]));
    }
	var data = [];
	for(var i=0;i<positions.length;i++){
	    var position = positions[i];
	    data.push(position[0],position[1]);
    }
	var faces = [];
	var triangles = Earcut.triangulate(data);
	if(triangles && triangles.length != 0){
		for(var i=0;i<triangles.length;i++){
			var length = triangles.length;
			if(i%3==0 && i < length-2){
				faces.push(new THREE.Face3(triangles[i],triangles[i+1],triangles[i+2]));
			}
		}
	}
    var geometry = new THREE.BufferGeometry();
    geometry.vertices = shapePositons;
    geometry.faces = faces;
    var mesh = new THREE.Mesh(geometry,material);
    return mesh;
}