three.js創(chuàng)建樓層布局圖的示例代碼

更新時(shí)間：2023年07月23日 12:40:02 作者：evomap

本文主要介紹了three.js創(chuàng)建樓層布局圖的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.調(diào)整光源

燈光有SpotLight、AmbientLight、DirectionalLight等、實(shí)際項(xiàng)目一般都是多個(gè)燈光組合的方式來(lái)創(chuàng)建光源。這里我使用的是DirectionalLight+AmbientLight的方式。

var ambientLight = new THREE.AmbientLight( 0xffffff, 0.8 );    //環(huán)境光
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.3 );       //直射光
directionalLight.position.set( 1, 1, 0 ).normalize();
scene.add( directionalLight );

2.創(chuàng)建地板、房間

網(wǎng)絡(luò)上查的資料，別人都是以boxGeometry的方式創(chuàng)建房間和地板，但實(shí)際中這些不一定是盒子形狀，所以我根據(jù)底部頂點(diǎn)+高度獲取頂部頂點(diǎn)，再根據(jù)各頂點(diǎn)計(jì)算和指定三角面，最終創(chuàng)建任意形狀的盒子模型。

Floor.prototype.getGeometry = function(points,height){
    var topPoints = [];
    for(var i=0;i<points.length;i++){
        var vertice = points[i];
        topPoints.push([vertice[0],vertice[1]+height,vertice[2]]);
    }
    var totalPoints = points.concat(topPoints);
    var vertices =[];           //所有的頂點(diǎn)
    for(var i=0;i<totalPoints.length;i++){
        vertices.push(new THREE.Vector3(totalPoints[i][0],totalPoints[i][1],totalPoints[i][2]))
    }
    var length = points.length;
    var faces = [];
    for(var j=0;j<length;j++){                      //側(cè)面生成三角形
        if(j!=length-1){
            faces.push(new THREE.Face3(j,j+1,length+j+1));
            faces.push(new THREE.Face3(length+j+1,length+j,j));
        }else{
            faces.push(new THREE.Face3(j,0,length));
            faces.push(new THREE.Face3(length,length+j,j));
        }
    }
    var data=[];
    for(var i=0;i<length;i++){
        data.push(points[i][0],points[i][2]);
    }
    var triangles = Earcut.triangulate(data);
    if(triangles && triangles.length != 0){
        for(var i=0;i<triangles.length;i++){
            var tlength = triangles.length;
            if(i%3==0 && i < tlength-2){
                faces.push(new THREE.Face3(triangles[i],triangles[i+1],triangles[i+2]));                            //底部的三角面
                faces.push(new THREE.Face3(triangles[i]+length,triangles[i+1]+length,triangles[i+2]+length));        //頂部的三角面
            }
        }
    }
    var geometry = new THREE.Geometry();
    geometry.vertices = vertices;
    geometry.faces = faces;
    geometry.computeFaceNormals();      //自動(dòng)計(jì)算法向量
    return geometry;
}

3.指定材質(zhì)

為了使房間看起來(lái)更清晰一點(diǎn)，我們頂部指定材質(zhì)不受光照影響，側(cè)面加入光源變化效果。于是創(chuàng)建兩種材質(zhì)，創(chuàng)建三角面的時(shí)候指定面的材質(zhì)。

var material = [
    new THREE.MeshLambertMaterial({color:colorConst[colorIndex].fill,side:THREE.DoubleSide}),         //受光照影響
    new THREE.MeshBasicMaterial({color:colorConst[colorIndex].fill,side:THREE.DoubleSide})            //不受光照影響
];
topface.materialIndex = 1; 
//頂部的三角面 指定材質(zhì)序號(hào)為1，其他默認(rèn)為0

4.創(chuàng)建盒子頂部的邊界線

我們需要添加頂部面界線，來(lái)使各個(gè)盒子之間分界看起來(lái)清晰一點(diǎn)，于是我們根據(jù)頂部的坐標(biāo)創(chuàng)建一條線，添加盒子的同時(shí)添加這條線。

//生成頂部的線
Floor.prototype.getBorderGeometry = function(points,color){
    var geometry = new THREE.Geometry();
    for(var i=0;i<points.length;i++){
        var point = points[i];
        geometry.vertices.push(new THREE.Vector3(point[0],point[1],point[2]));
        if(i== point.length-1){
            geometry.vertices.push(new THREE.Vector3(point[0][0],point[0][1],point[0][2]));
        }
    }
    return geometry;
}

5.創(chuàng)建標(biāo)注

見我的另一篇筆記：使用three.js開發(fā)3d地圖初探_凡事有果必有因-CSDN博客第3、4點(diǎn)。

6.選中效果

raycaster類用于在3d中被鼠標(biāo)選中的物體，這同樣可以選中mesh對(duì)象，于是用此方法模擬設(shè)備的點(diǎn)擊。其中floorGroup是保存所有樓層mesh的object3d對(duì)象。

function onDocumentMouseClick(event){
    var vector = new THREE.Vector3();//三維坐標(biāo)對(duì)象
    vector.set(
            ( event.clientX / container.clientWidth ) * 2 - 1,
            - ( event.clientY / container.clientHeight ) * 2 + 1,
            0.5 );
    vector.unproject( camera );
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
       var intersects = raycaster.intersectObjects(floorGroup.children);        //樓層中的元素
       if (intersects.length > 0) {
        var item = intersects[0].object;
        item.material =  new THREE.MeshBasicMaterial({color: "#f86332",side:THREE.DoubleSide});        //選中的樣式
    }
}