建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥，今天來說說 WebGL 中的三種圖元。
創(chuàng)新互聯(lián)服務(wù)項目包括宜黃網(wǎng)站建設(shè)、宜黃網(wǎng)站制作、宜黃網(wǎng)頁制作以及宜黃網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，宜黃網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到宜黃省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
在 WebGL 中，圖元有三種：點、線、以及三角形。
繪制的 API 為：
gl.drawArrays(mode, first, count)這里的 mode 就是要繪制的圖元類型。
我們繪制 4 個點，下面是示意圖，并按順序標明繪制方向。
下面來看看這四個頂點在不同圖元類型下的效果。
gl.POINTS
點
一個個繪制頂點，各個頂點之間沒有聯(lián)系。
gl.drawArrays(gl.POINTS, 0, 4);
gl.LINES
線段
每兩個點一組，繪制多條線段。
gl.drawArrays(gl.LINES, 0, 4);
gl.LINE_STRIP
線條（strip）
多個點按順序依次相連，形成一條多個線段組成的折線。
gl.drawArrays(gl.LINE_STRIP, 0, 4);
gl.LINE_LOOP
回路
類似 gl.LINE_STRIP，也是多個點順序相連，但多了一個頭尾頂點相連。
gl.drawArrays(gl.LINE_LOOP, 0, 4);
gl.TRIANGLES
三角形
三個點為一組，繪制一個三角形。如果最后一組湊不夠三個點，會被丟棄不繪制。
gl.drawArrays(gl.TRIANGLES, 0, 4);
gl.TRIANGLE_STRIP
三角帶
有點像 gl.LINE_STRIP，從第二個點開始，會和前兩個點為一組繪制一個三角形，也就是一個點最多會被 3 個三角形共享。所以相比 gl.TRIANGLES，可以用更少的信息去繪制同樣的效果。
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);可以看到，第 1、2 個頂點形成的邊被兩個三角形共用了。
gl.TRIANGLE_FAN
三角扇
從第二個點開始，和它的上一個點，以及第一個點組成一個三角形。
也就是第一個點會被所有三角形共用。
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);適合用來繪制多邊形。
動手試試
demo 地址。
修改最后一行代碼，改為上面的圖元模式，看看效果吧。
或者你可以追加一些頂點坐標看看效果，記得不要忘記改 gl.drawArrays 方法的最后一個參數(shù)，即使用的頂點的個數(shù)。
分享文章：一起學(xué)WebGL：圖元的類型
文章地址：http://www.5511xx.com/article/ccsgepd.html
