关于webgl:webglthreejs生成房间楼层

楔子

在很多数字孪生我的项目中,都会波及到楼层的建模。楼层的建模因为构造繁多,如果都是建模师进行手动建模,工作量会比拟大。而楼层自身的构造,能够形象成能够通过门路结构的对象(这和之前的文章提及的的管路以及路线相似),这不便咱们通过代码的形式来生成房间楼层。

墙体几何对象PathCubeGeometry

楼层个别分成墙体和地板两个局部,首先来看下墙体对象。 以threejs为根底,扩大一个几何对象PathCubeGeometry。 该对象通过一个Path3D门路来结构一个墙的几何体,该几何体能够分成start,end,top,bottom,outside,inside等几个外表分组,这样就不便给内外表和外外表,以及顶面等设置不同的材质贴图的成果。 次要代码如下:

    this.vert = vert;
    this.rawUV = rawUV;
    this.pathU = pathU;

    this.indices =  []
    this.vertices = [];
    this.uvs = [],
    this.normals = [];

    this.generateSideWall(vert,inner,outer,innerTop, outerTop, true,closed);
    this.generateSideWall(vert,inner,outer,innerTop, outerTop, false,closed);


    this.generateTopBottom(vert,inner,outer,innerTop,outerTop,true,closed);
    this.generateTopBottom(vert,inner,outer,innerTop,outerTop,false,closed);

    if(!closed) {
        this.generateAZSide(vert,inner,outer,innerTop,outerTop,true);
        this.generateAZSide(vert,inner,outer,innerTop,outerTop,false);
    }

通过PathCubeGeometry,咱们能够不便的构建墙体,比方如下示例代码:

const materials = [m1, m2, m3, m3, m3, m3];
const points = json.outerWall.path;
const p0 = points[0];
const path = new Path3D();
const scale = 20;
path.moveTo(p0.x * scale, p0.y * scale, p0.z * scale);
for (let i = 1; i < points.length; i++) {
let p = points[i];
    path.lineTo(p.x * scale, p.y * scale, p.z * scale);
}
path.closePath();
cosnt patCube = new PathCubeGeometry(path, 10, 50, 32, 500);
const mesh = new dt.Mesh(patCube, materials);

首先通过Path3D结构一个门路(门路来源于传入的一系列点points),而后通过门路结构一个结合体对象PathCubeGeometry,最初生成实体,成果如下图所示:

门和窗

结构门和窗的难度不大,个别都通过立方体 + 贴图的形式就能够生成。比方如下代码能够生成一个双开门:

function createDoor(pos) {
  var cube = new CubeGeometry(200, 400, 5);
  var material = createMaterial(graph, {
    color: 0xffffff,
    flatShading: true,
    map: "./images/glass-wall6.png",
    transparent: true,
  });

  material.map.repeat.set(0.5, 1);
  var leftDoor = new Mesh(cube, material);
  leftDoor.position.copy(pos.clone().sub(new Vec3(100)));
  leftDoor.attr("type", "left_door");
  leftDoor._type = "left_door";
  dataModel.add(leftDoor);

  var rightDoor = new Mesh(cube, material);
  rightDoor.position.copy(pos.clone().add(new Vec3(100)));
  rightDoor._type = "right_door";
  dataModel.add(rightDoor);
}

创立的门的成果如下图所示:

创立单开门和窗户的思路是统一的。不过难点的中央是门窗所在的地位,墙体自身须要挖洞。挖洞须要应用BSP性能。

BSP挖洞

BSP操作能够对模型进行交加 并集 差集的操作。 要在墙上挖洞,能够在墙的几何体上进行差集操作,比方减去一个立方体,这样就能够在墙面上生成一个方型的洞。
在THREEJS下面,有一个开源的BSP包,THREEBSP。

代码如下所示:

var csg = new CSG().setFromGeometry(patCube);
var csg2 = new CSG().setFromGeometry(cubeGeometry);
var csg3 = new CSG().setFromGeometry(cubeGeometry2);
csg.subtractOperand(csg2);
csg.subtractOperand(csg3);
var geometry = csg.toGeometry();
var mesh = new Mesh(geometry, materials);

最初生成的成果如下图所示:

在把创立好的门和窗放到相应的挖洞地位,成果如下所示:

创立地板

在threejs中,通过ExtrudeGeometry能够创立地板的几何体,而后指定地板的材质,既能够创立一个地板对象 代码如下所示:

  var path = new ShapePath();
  var texture = graph.loadTexture("./images/floor.jpg", {
    wrapT: RepeatWrapping,
    wrapS: RepeatWrapping,
  });
  texture.repeat.set(1 / 400, 1 / 400);
  texture.anisotropy = 16;

  let m1 = new BasicMaterial({
    map: texture,
    color: 0xffffff,
    toneMapped: false,
  });
  const simpleShapes = path.toShapes(true);

  var geometry = new ExtrudeGeometry(simpleShapes, {
    depth: 1,
    bevelEnabled: false,
    vertical: true,
  });
  var mesh = new Mesh(geometry, [m1, m1]);
  dataModel.add(mesh);

最终的成果如下所示:

结语

本文介绍了通过代码生成楼层的性能,其中用到了PathCubeGeometry,ExtrudeGeometry,BSP相干技术,其中PathCubeGeometry因为须要本人构建,会稍晚难点; ExtrudeGeometry是threejs自身就存在的对象,BSP也能够找到开源的包能够应用。

如果你有好的思路,也欢送和我交换。关注公号“ITMan彪叔” 能够增加作者微信进行交换,及时收到更多有价值的文章。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据