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


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

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

代码分析

建筑一个房间

  1. 参数分析:
  • 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);
}                 

最终实现结果


文章作者: 万鲲鹏
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 万鲲鹏 !
评论
  目录