介绍 Floor.prototype.getGeometry =,函数(分、高度){
,var topPoints =, [];
,(var 我=0;i Floor.prototype.addWall =,函数(大小、位置、旋转、漏洞){
,var geometry =, new THREE.BoxGeometry(大小[0],大小[1],[2]);
,var materials =, new THREE.MeshLambertMaterial({颜色:0 xb0cee0,一面:THREE.DoubleSide})
,var result =, new THREE.Mesh(几何、材料);
,如果(孔){
result 才能=,多维数据集;
,,(var 我=0;i
这篇文章给大家分享的是有关three.js如何搭建室内场景的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
公司做商城,消防,用电等项目,需要实现楼层和设备的可视化,以前都是使用其他建模工具创建的整体模型,再使用three.js的加载器加载到场景中,但是这样的加载存在缺陷,比如不能给模型的元素赋属性,不能单个点击元素,渲染单调等,所以本次参考了一些资料,不使用模型倒入,完全使用三个。js搭建场景,代码有些粗燥勿怪。
<强> 1。创建地板
地板是一个类似盒子,有顶部有底部有侧面,但是不一定是规则的盒子,因此我放弃了常用的BoxGeometry的方式,改用顶点+面的形式创建任意多边形地板,已知多边形底部坐标,底部坐标加上高度得到顶部坐标,通过Earcut可以计算出底部和顶部的三角面,侧面的三角面可以直接通过坐标序号得到,由此可以创建一个通用的几何学。
效果:
<强> 2。创建墙体
墙体我使用了BoxGeometry,墙体上的窗户的洞,门洞,我们可以使用ThreeBSP库中差集函数来进行模型相减来实现。
效果:
<强> 3。门框
在添加门之前,为了更加形象一点,我添加了门框。先使用墙体减去门框的洞,再添加减去门洞的门框,跟前面类似,具体代码不放了。
