<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>

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

          時間:?2017-11-23閱讀:?8527標簽:?WebGL作者:?hightopo

          分子力(molecular force),又稱分子間作用力、范得瓦耳斯力,是指分子間的相互作用。當二分子相距較遠時,主要表現為吸引力,這種力主要來源于一個分子被另一個分子隨時間迅速變化的電偶極矩所極化而引起的相互作用;當二分子非常接近時,則排斥力成為主要的,這是由于各分子的外層電子云開始重疊而產生的排斥作用。

          HT for Web 提供了彈力布局(也稱為力導向布局)的功能,即根據節點之間存在互斥力,相互連接的節點間存在引力, 彈力布局運行一段時間后,整體拓撲網絡結構會逐漸達到收斂穩定的平衡狀態。這個功能很有趣,今天我們就將它的魅力展現出來。

          本例地址:http://www.hightopo.com/demo/...


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

          <script src="../../guide/lib/core/ht.js"></script>
          <script src="../../guide/lib/plugin/ht-forcelayout.js"></script>
          <script src="../../guide/lib/plugin/ht-form.js"></script>

          ht.layout.Force3dLayout 類提供 3D 彈力布局,構造函數可傳入 DataModel 和 Graph3dView 兩種參數。 默認僅對未選中圖元進行布局,如果構造函數參數為 Graph3dView 時,則視圖組件的 isMovable 和 isVisible 函數將影響圖元是否可布局, 圖元 style 上的 layoutable 屬性也可設為 false 阻止圖元參與布局。

          介紹完 HT 封裝的彈力布局的背景之后,接下來就是幫助你們也能輕松地實現這個效果。

          首先我們定義一個顏色數組變量,存儲各個彈力球的顏色,還定義了一個隨機函數,用來生成數隨機的數組中的顏色:

          var colorList = ['#FFAFA4', '#B887C5', '#B9EA9C', '#CFD9E7', '#4590B8', '#FF9C30'], 
              colorLen = colorList.length;
          var randomColor = function() {
              var ran = Math.random() * colorLen;
              return colorList[Math.floor(ran)];//隨機6種顏色
          };

          接著創建彈力球,簡單生成一個 3D 節點,通過設置這個節點的 style 樣式屬性來控制節點的顯示方式,其中將“shape3d”設置為“sphere”即可將 ht.Node 六面體變成 3D 球體模型,再設置“shape3d”屬性為前面定義的隨機顏色,s3 是 HT 封裝的設置 3D 節點大小的 setSize3d 函數的簡寫,最后將這個節點添加進數據模型 dataModel 中:

          var createNode = function(dm) {//創建node節點 圓
              var node = new ht.Node();
              node.s({//設置樣式為 setStyle 的簡寫
                  'shape3d': 'sphere',
                  'shape3d.color': randomColor()//設置隨機顏色
              });
              node.s3(40, 40, 40);
              dm.add(node);
              return node;
          };

          現在效果圖上出現的還有各個彈力球之間的連線,這個連線我們一看就覺得很不一般,也是通過構造一個一個節點,這個節點是通過 HT for Web 建模手冊 setShape3dModel函數自定義的 ht.Default.createRingModel 根據 xy 平面的曲線,環繞一周形成的 3D 環形模型,將其命名為‘custom’:

          ht.Default.setShape3dModel(//創建模型 根據xy平面的曲線,環繞一周形成3D模型。
              'custom', ht.Default.createRingModel( [0.5, 0.5, -0.2, 0, 0.5, -0.5], [1, 3] )
          );

          HT 將用戶自定義的屬性和 HT 默認的屬性調用方法分為 node.a 和 node.s 這樣就能將兩者有效地區分開來(具體參照 HT for Web 入門手冊 style 章節),我們在創建管線的時候就用了這種方法:

          var updatePipeline = function(edge) {//重新設置edge的樣式
              var pipeline = edge.a('pipeline');
              pipeline.s3(1, 1, 1);//設置大小
              pipeline.p3(0, 0, 0);//設置坐標
          
              var node1 = edge.getSourceAgent(),//獲取圖形上連接的起始節點
              node2 = edge.getTargetAgent();//獲取圖形上連接的目標節點
              pipeline.s('mat', createMatrix(node1.p3(), node2.p3(), 20));//3d整體圖形矩陣變化
          };

          最神秘的是如何能做出讓兩個節點“若即若離”的效果?

          我們知道,矩陣能描述任意線性變換。線性變換保留了直線和平行線,線性變換保留直線的同時,其他的幾何性質如長度、角度、面積和體積可能被變換改變了。簡單的說,線性變換可能“拉伸”坐標系,但不會“彎曲”或“卷折”坐標系。這個函數主要是將我們的連接線在拖動彈力球后被拖拉的連接線的進行一個“變化矩陣”的操作,變化矩陣也是 HT 封裝的 ht.Default.createMatrix 函數,通過將節點的 style 屬性 mat 設置為一個自定義的函數,就是將這個節點的坐標乘上在“mat”屬性對應的值,也就是說如果當前這個管線的旋轉角為 [Math.PI/6, 0, 0],假設我們在 createMatrix 函數中設置 r3 為 [Math.PI/3, 0, 0],那么這個節點會旋轉 90 度。非常輕松地創建出變化矩陣:

          var createMatrix = function(p1, p2, width) {//createMatrix(array, matrix)將一組JSON描述的縮放、移動和旋轉等操作轉換成對應的變化矩陣
              var vec = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]],
                  dist = ht.Default.getDistance(p1, p2);//獲取兩點之間距離,或向量長度
              return ht.Default.createMatrix({
                  s3: [width, dist, width],
              r3: [Math.PI/2 - Math.asin(vec[1]/dist), Math.atan2(vec[0], vec[2]), 0],
              rotationMode: 'xyz',
              t3: [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2, (p1[2]+p2[2])/2]
              });
          };

          基礎配件全部定義完畢,接著就是將“shape3d”屬性設置為自定義的 3D 模型“custom” ,并將“layoutable”屬性設置為“false”阻止圖元參與布局,并將點之間的連線通過edge.a('pipeline', node)重新刷新,并添加進數據模型 dataModel 中:

          var createEdge = function(dm, node1, node2) {//創建‘custom’模型的edge
              var node = new ht.Node();
              node.s({
                  'shape3d': 'custom',
                  'shape3d.color': '#ECE0D4',
                  'layoutable': false
              });
              dm.add(node);
          
              var edge = new ht.Edge(node1, node2);
              edge.a('pipeline', node);
              edge.s('edge.color', 'rgba(0, 0, 0, 0)');
              dm.add(edge);
              return edge;
          };

          插:我們還可以在工業上用 HeatMap 熱圖上做文章,效果依舊很炫,具體地址http://hightopo.com/guide/gui...

          界面上的圖形全部繪制完畢,剩下的就只有 form 表單,首先將 form 表單添加進 HTML 頁面,用的是 HT 封裝的 ht.widget.FormPane 函數:

          var formPane = new ht.widget.FormPane();
          formPane.setWidth(230);
          formPane.setHeight(125);
          formPane.addToDOM();

          記住,form 表單要設置寬高,不然不顯示。

          form 表單添加行是通過 addRow 函數,我們重點來說一下下面的幾行,Color、Range 和 Intensity,這三個名字主要是用來控制“頭燈”的。在 HT 中直接通過 setHeadlightColor/setHeadlightRange/setHeadlightIntensity 三個函數來控制“頭燈”的顏色、范圍以及燈的強度,onValueChanged 屬性,顧名思義屬性值改變之后觸發的事件:

          ['Color', 'Range', 'Intensity'].forEach(function(name) {
              var obj = { id: name },
              func = function(oV, nV) {
                  g3d['setHeadlight' + name](nV);// === g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity(nV)
              };
              if (name === 'Color')
                  obj.colorPicker = {//ht.widget.ColorPicker為顏色選擇框 
                  instant: true,
                  value: g3d['getHeadlight' + name](),// === g3d.getHeadlightColor()
                  onValueChanged: func
              };
              else 
                  obj.slider = {//滑動條
                      min: 0,
                  max: name === 'Range' ? 20000 : 3,
                  step: 0.1,
                  value: g3d['getHeadlight' + name](),
                  onValueChanged: func
                  };
              formPane.addRow([ name, obj ], [ 70, 0.1 ]);
          });

          slider 和 colorPicker 都是 HT 自定義的滑動條和顏色選擇器,詳情請參考 HT for Web 表單手冊。

          如果還有不懂的請咨詢我,或者可以直接上 HT for Web 官網查閱手冊。

          轉載來源:https://segmentfault.com/a/1190000012120729


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

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

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

          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組件 來實現了一個小例子

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

          建設性的立體幾何具有許多實際用途,它用于需要簡單幾何對象的情況下,或者數學精度很重要的地方,幾乎所有的工程 CAD 軟件包都使用 CSG(可以用于表示刀具切削,以及零件必須配合在一起的特征)。

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

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

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

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