WebGL3D长江大桥黄鹤楼任意组合房

这个参考之前的一篇文章jsweb_3D模型设计

代码分析

建筑一个房间

参数分析：

dx x偏移量
dy y偏移量
lenght 房屋长
width 房屋宽

Length2 镂空距离
截取部分显示：

var roomfloor=function(HIGHT,dx=0,dy=0,Length=1600,Width=1600,Length2=800){

      wall1 = new ht.CSGShape();
      wall1.setClosePath(true);
      wall1.setTall(240);
      wall1.setElevation(HIGHT+120);
      wall1.setThickness(20);
      wall1.setPoints([
          {x: -1*Length+dx, y: -1*Width+dy},
          {x: Length+dx, y: -1*Width+dy},
          {x: Length+dx, y: Length-Length2+dy},
          {x: Length-Length2+dx, y: Length-Length2+dy},
          {x: Length-Length2+dx, y: Width+dy},
          {x: -1*Length+dx, y: Width+dy}
      ]);
      
      
      door22 = new ht.DoorWindow();
      door22.setTall(200);
      door22.setElevation(HIGHT+100);  
      door22.setWidth(100);
      door22.setHost(wall1);
      door22.s({
          'attach.index': 2,
          'attach.offset': 100,
          'shape.background': 'yellow',
          'all.image': 'door',
          'front.uv': [1,0, 1,1, 0,1, 0,0]
      });                
      dm.add(door22);                
                    
      window11 = new ht.DoorWindow();
      window11.setTall(100);
      window11.setElevation(HIGHT+140);  
      window11.setWidth(Length2/2);                                               
      window11.setHost(wall1);
      window11.s({
          'attach.index': 2,
          'attach.offset': 0.5,
          'attach.offset.relative': true,
          'shape.background': 'yellow',
          'all.color': 'rgba(0, 50, 50, 0.75)',
          'all.transparent': true,
          'all.reverse.cull': true,
          'dw.axis': 'top',
          'dw.end': -Math.PI/6
      });
      window11.setExpanded(true, true);
      dm.add(window11);                                
      

      dm.add(window23);
      var floor21 = new ht.Shape();
          floor21.setClosePath(true);
          floor21.setThickness(-1);
          floor21.setTall(1);
          floor21.setElevation(HIGHT+-0.51);
          floor21.setPoints([
              {x: -1*Length+dx, y: -1*Width+dy},
              {x: Length+dx, y: -1*Width+dy},
              {x: Length+dx, y: Length-Length2+dy},
              {x: Length-Length2+dx, y: Length-Length2+dy},
              {x: Length-Length2+dx, y: Width+dy},
              {x: -1*Length+dx, y: Width+dy}
          ]);
          floor21.s({
              'repeat.uv.length': 40,
              'shape.border.width': 0,
              'shape3d.top.image': './assets/floor.png'
          });
          dm.add(floor21);

  }

建筑房屋数，层高可选

a=prompt("输入房屋数",1)
w=0
for(z=0;z<a;z++){
for(j=0;j<=z;j++){
for(i=0;i<1;i++){
if(w>=a){
    break;
}
w++;
HIGHT=240
Length=800
Width=800
roomfloor(HIGHT*i,Width*z,Length*j,400,400,300)}
}
}

长江大桥和黄鹤楼obj模型载入

模型制作参考我之前的一篇文章。

Fusion360学习笔记

var loadCity=function(){ 
    g3d.setCenter([210, 0, 210])
    dm.clear();

    // 通过 json 对象加载
    var model = {
        "modelType": "obj",
        "obj": "obj2/长江大桥2.obj",
        "mtl": "obj2/长江大桥.mtl",
        "prefix": "obj2/"
    };
    var node2 = new ht.Node();
    node2.setAnchor3d([0.5, 0, 0.5]);
    node2.p3(200, 0, 0);
    node2.s('shape3d', model);
    dm.add(node2);
} 
            var loadcjdq=function(){ 
    g3d.setCenter([210, 0, 210])
    dm.clear();

    // 通过 json 对象加载
    var model = {
        "modelType": "obj",
        "obj": "obj2/长江大桥.obj",
        "mtl": "obj2/长江大桥.mtl",
        "prefix": "obj2/"
    };
    var node2 = new ht.Node();
    node2.setAnchor3d([0.5, 0, 0.5]);
    node2.p3(200, 0, 0);
    node2.s('shape3d', model);
    dm.add(node2);
}