<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          玩轉HTML5 下 WebGL 的 3D 模型交并補

          時間:?2017-11-10閱讀:?1118標簽:?WebGL

          建設性的立體幾何具有許多實際用途,它用于需要簡單幾何對象的情況下,或者數學精度很重要的地方,幾乎所有的工程 CAD 軟件包都使用 CSG(可以用于表示刀具切削,以及零件必須配合在一起的特征)。CSG 是 Constructive Solid Geometry 建模技術的簡稱,通過裁剪 subtract、融合 union 和相交 intersect 的運算,組合出復雜模型效果,HT 封裝了 ht.CSGNode 和 ht.CSGShape 等圖元類型來支持 CSG 的組合功能,常用于墻面的門窗挖空鑿洞的應用場景。

          CSG 對象可以用二叉樹表示,其中葉子表示基元,節點表示操作。在這個圖中,節點被標記 ∩ 為交集,∪ 為并集,- 為差集。CSG 提供的模型或表面看起來很復雜,但實際上不過是巧妙組合或分解對象。
          ht.CSGNode 繼承于 ht.Node,當 style 的 shape3d 屬性為空時顯示為六面體效果,CSGNode 如果通過 setHost 吸附到 宿主 CSGNode 或 CSGShape 后,宿主 CSGNode 或 CSGShape 可與吸附的 CSGNode 圖元進行 CSG 的組合建模。詳情請參考 HT for Web 建模手冊 CSGNode 章節。這里我用 CSG 的概念寫了一個例子,讓大家能更好地理解這個概念。
          本例 Demo 地址: http://hightopo.com/guide/gui...
          先來看下效果圖:

          從上面效果圖可以看到,我們將界面分為三個部分,這三個部分先是右邊部分上下分割,然后將整個界面左右分割,HT 用封裝好的 ht.widget.SplitView 進行界面的分割,然后將分割組件添加進底層 div 中:

          dm = new ht.DataModel();// 數據模型 
          treeView = new ht.widget.TreeView(dm); //樹組件
          gv1 = new ht.graph3d.Graph3dView(dm); //3D 組件 
          gv2 = new ht.graph3d.Graph3dView(dm);
          splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割組件 
          mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27); 
          
          view = mainSplit.getView();
          view.className = 'main';
          document.body.appendChild(view); 
          window.addEventListener('resize', function (e) {
              mainSplit.invalidate();
          }, false);  

          上面代碼是一種非常常見的在 HTML 中添加 HT 組件的方法,詳情可參考 HT for Web 入門手冊組件章節。這種方法進行添加 HT 組件有一個需要注意的點,因為 HT 一般都以設置 position 為 absolute 的絕對定位方式,必須設置 left、right、top、bottom 等等基礎 css 樣式,像這樣:

          .main {
               margin: 0px;
               padding: 0px;
               position: absolute;
               top: 0px;
               bottom: 0px;
               left: 0px;
               right: 0px;
          }

          所以為了最外層組件加載填充滿窗口的方便性,HT 的所有組件都有 addToDOM 函數,其思想邏輯如下,其中 iv 是 invalidate 的縮寫:

          addToDOM = function(){   
              var self = this,
              view = self.getView(),   
              style = view.style;
              document.body.appendChild(view);            
              style.left = '0';
              style.right = '0';
              style.top = '0';
              style.bottom = '0';      
              window.addEventListener('resize', function () { self.iv(); }, false);            
          }  

          以后我們在代碼中就可以直接調用 addToDOM 函數,而不用寫一大堆代碼了,上面代碼用 addToDOM 取代之后的代碼如下,而且不用描繪 css 樣式:

          dm = new ht.DataModel();// 數據模型             
          treeView = new ht.widget.TreeView(dm); //樹組件                                                             
          gv1 = new ht.graph3d.Graph3dView(dm); //3D 組件  
          gv2 = new ht.graph3d.Graph3dView(dm);
          splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割組件 
          mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   
          mainSplit.addToDOM();

          界面分配好之后我們就要對其添加內容了,界面的左邊部分是 HT 封裝的樹組件,我在之前的文章寫到過,樹組件是一個非常方便的繪制樹形關系的組件,開發人員能夠輕松地從數據模型 DataModel 中獲取數據和節點之間的關系放到樹上,只需要在樹組件聲明的過程中,將對應的數據模型 DataModel 放進樹組件的參數即可,當然我們還擴展了很多跟樹組件有關的函數,非常方便實用,這里我們只用了 expandAll 函數,將所有對象展開:

          treeView = new ht.widget.TreeView(dm); //樹組件   
          treeView.expandAll();

          右邊部分上下分為兩部分,都是 3D 場景,就是設置顯示有點不同,其他完全相同,上面的 3D 場景重載了 getVisibleFunc 函數,如果元素的 showMe 屬性為 true,則可視;如果節點為 ht.CSGNode 類型并且節點的 getHost 函數的參數為空,則不可視;其他情況均可視:

          gv1.setVisibleFunc(function(data){
              if(data.showMe){
                  return true;
              }
              if(data instanceof ht.CSGNode && data.getHost()){
                  return false;
              }
              return true;
          });

          我們先向 3D 場景中添加元素對象,我們先解釋中間的書架,對兩邊的書架有缺的再進行補充。首先我們添加了一個 ht.CSGNode 節點 shelf,作為書架的主節點,其他的節點都是依附于這個節點的,對這個節點設置了位置、大小、名稱以及六個面的顏色,然后添加進數據模型 DataModel:

          var shelf = new ht.CSGNode();
          shelf.s3(500, 400, 120);
          shelf.p3(0, 200, 0);
          shelf.setName('shelf1');
          shelf.s({
              'all.color': '#E5BB77'
          });
          dm.add(shelf);

          接著向這個 shelf 中添加 10 個節點,做書架的格子效果,并設置依附關系和父子關系添加進數據模型中:

          for(var i=0; i<2; i++){
              for(var j=0; j<5; j++){
                  var clipNode = new ht.CSGNode();
                  clipNode.setHost(shelf);
                  clipNode.s3(80, 100, 120);
                  clipNode.p3(-200+j*100, 340-i*120, 20);
                  clipNode.setName('substract-'+i+'-'+j);
                  clipNode.s('batch', 'tt');
                  clipNode.setParent(shelf);
                  dm.add(clipNode);
              }
          }

          為了讓書架變得更美觀一點,我們在書架的上下左右都加上了 ht.CSGNode,最后為了更加具象化,我們還添加了一本書,實現方式也差不多,都非常簡單:

          var book = new ht.Node();
          book.setName('CSS3: The Missing Manual');
          book.s3(60, 80, 8);
          book.p3(-100, 210, 20);
          book.r3(-Math.PI/6, Math.PI/5, 0);
          book.setIcon('book');
          book.s({
              'front.image': 'book',
              'back.color': 'white',
              'left.color': 'white',
              'all.color': 'gray'
          });
          book.setHost(shelf);
          book.setParent(shelf);
          dm.add(book);    

          接著左邊的書架也是類似的構建方法,有一點不同的是,這邊有一個 ht.CSGBox 類型,繼承于 ht.CSGNode,其除具備父類 CSGNode 的挖空等功能外,還可對六個面進行旋轉展開關閉的操作,這里我們的節點只設置了前面的能夠旋轉展開,并且設置了一系列的樣式:

          clipNode = new ht.CSGBox();
          clipNode.setName('CSGBox-Expand-Left');
          clipNode.s3(100, 100, 120);
          clipNode.p3(0, 65, 0.1);
          clipNode.setHost(shelf);
          clipNode.showMe = true;
          clipNode.s({
              'all.visible': false,//6面均不可見
              'front.visible': true,//前面可見
              'front.toggleable': true,//允許前面雙擊展開                    
              'front.reverse.flip': true,//前面的反面顯示正面的內容
              'front.transparent': true,//前面透明
              'front.end': Math.PI * 0.7,//前面展開狀態的結束旋轉弧度
              'front.color': 'rgba(0, 50, 50, 0.7)'//前面顏色
          });

          可能你們還想知道下面的地球是怎么做到的?還記得之前的文章寫到過 HT 中設置了 shape3d 屬性,設置這個屬性實際上就是在操作 setShape3dModel(name, model) 和 getShape3dModel(name),可以通過這個屬性設置為 box|sphere|cylinder|cone|torus|star|rect|roundRect|triangle|rightTriangle|parallelogram|trapezoid 等等模型,這些模型也都是 HT 封裝好的,要使用時直接設置 shape3d 為其中的一個值即可,如這個例子中用到 “shape3d: sphere” 就是設置為球體。我們簡單地用一張地圖圖片包裹在這個球體的外側,當然,這張地圖圖片是先通過 ht.Default.setImage 注冊過的,然后通過 shape3d.image 將圖片附到這個節點上:

          earth = new ht.Node();
          earth.setName('earth');
          earth.s3(70, 70, 70);
          earth.p3(0, 50, 0);
          earth.s({
              'shape3d': 'sphere',
              'shape3d.image': 'earth'
          });
          earth.setHost(shelf);  
          earth.setParent(shelf);
          dm.add(earth);

          右邊的書架,同樣也是有一個主節點,其他節點依附于它,但是我們看到這邊換了一個新的節點類型 ht.DoorWindow,ht.DoorWindow繼承于 ht.CSGNode,其除具備父類 CSGNode 的挖空等功能外,還可進行整體的旋轉展開關閉的操作, 常用于作為門或窗的業務對象,吸附于 CSGNode 或 CSGShape 的 host 作為墻面的圖元。這個節點類型就是 ht.CSGNode 的延展,相對來說就是區分了實際應用而添加了不同的 style 參數,更多的屬性請到 HT for Web 建模手冊 DoorWindow 章節 查看然后添加到節點中玩玩:

          photos = new ht.DoorWindow();
          photos.setName('DoorWindow-Photos');
          photos.setIcon('ben12');
          photos.s3(110, 100, 130);
          photos.p3(5, 180, 0);                
          photos.setHost(shelf);  
          photos.showMe = true;
          photos.s({                    
              'bottom.uv': [1,1, 1,0, 0,0, 0,1],
              'bottom.uv.scale': [1, 1],
              'left.uv.scale': [3, 3],
              'top.uv.scale': [2, 2],
              'dw.s3': [0.8, 0.9, 0.05],
              'dw.t3': [0, -5, 0],
              'dw.axis': 'v',
              'dw.toggleable': false,
              'front.image': 'ben1',
              'back.image': 'ben2',
              'all.color': '#F8CE8B'
          });
          photos.setParent(shelf);
          dm.add(photos);

          最后,我們將左側的地球 earth 和右側的照片 photo 旋轉起來:

          var angle = 0;
          setInterval(function(){
              angle += Math.PI/40;
              earth.r3(0, angle, 0);
              photos.s('dw.angle', angle);
          }, 50);

          我們看到,其實雖然 HT 封裝了很多不同的 CSG 節點類型,但是實際應用都差不多,而且內容也沒有差特別多,差別都是在 style 參數上,但是真的在實際開發中,這種區分就會很大程度上加快開發速度,畢竟名稱一目了然,就知道要運用哪些 style 屬性了。

          原文:http://www.cnblogs.com/xhload3d/p/7806438.html  

          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/81

          WebGL 紋理顏色原理

          WebGL繪制圖像時,往著色器中傳入顏色信息就可以給圖形繪制出相應的顏色,現在已經知道頂點著色器和片段著色器一起決定著向顏色緩沖區寫入顏色信息并最終呈現出來,那么這個過程是什么樣

          WebGL的3D框架比較 Three.js和ThingJS

          隨著flash的沒落,瀏覽器的原生能力的興起。在3D方面WebGL不管從功能還是性能方面都在逐漸加強。2D應用變為3D應用的需求也越來越強烈。 win10的畫圖板支持3D圖片,2d工具photoshop也開始逐步集成了3D工具。

          快速開發 HTML5 WebGL 的 3D 斜面拖拽生成模型

          3D 場景中的面不只有水平面這一個,空間是由無數個面組成的,所以我們有可能會在任意一個面上放置物體,而空間中的面如何確定呢?我們知道,空間中的面可以由一個點和一條法線組成。這個 Demo 左側為面板,從面板中拖動物體到右側的 3D 場景中

          基于 HTML5 WebGL 的 3D 網絡拓撲結構圖

          前端開發者覺得如果我們可以不用學習 unity3d 或者其他游戲開發工具就能實現 3D 效果,而且能夠精準的靠代碼來控制移動或者方向就好了,于是我利用 HT For Web 中的3D組件 來實現了一個小例子

          ht.js基于 HTML5 WebGL 的 3D “彈力”布局

          使用彈力布局功能需要在引入 ht.js 核心庫之后,再引入一個 ht-forcelayout.js 的彈力布局插件庫,因為還用到了 form 表單,所以要引入 ht-form.js 的表單插件庫。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网