js室内地图开发_three.js搭建室内场景教程

公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。

1.创建地板

地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的BoxGeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过Earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接通过坐标序号得到，由此可以创建一个通用的Geometry。

Floor.prototype.getGeometry = function(points,height){

var topPoints = [];

for(var i=0;i

var vertice = points[i];

topPoints.push([vertice[0],vertice[1]+height,vertice[2]]);

}

var totalPoints = points.concat(topPoints);

var vertices =[]; //所有的顶点

for(var i=0;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

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

data.push(points[i][0],points[i][2]);

}

var triangles = Earcut.triangula