前言

cylinder() 是 p5.js 中用于繪制3D 圓柱體的函數(shù)。圓柱體由頂部、底部兩個圓形和側(cè)面組成，所有表面由三角形拼接而成（這是 3D 繪圖的常見方式）。

注意：cylinder() 只能在「WebGL 模式」下使用（WebGL 是瀏覽器的 3D 繪圖技術(shù)），普通 2D 模式下無法生效。

基礎(chǔ)語法

cylinder() 的參數(shù)非常靈活，所有參數(shù)都是可選的，按順序傳入即可：

cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap])

• radius（半徑）
  • 作用：設(shè)置圓柱體底部 / 頂部圓形的半徑。
  • 類型：數(shù)字（比如 20、50）。
  • 默認值：50（不填的話，半徑就是 50）。
• height（高度）
  • 作用：設(shè)置圓柱體上下底之間的距離（沿 y 軸方向）。
  • 類型：數(shù)字。
  • 默認值：等于 radius（不填的話，高度和半徑一樣）。
• detailX（水平細分）
  • 作用：控制頂部和底部圓形的「邊數(shù)」。邊數(shù)越少，形狀越像多邊形（比如 4 邊就像盒子）；邊數(shù)越多，越接近圓形。
  • 類型：整數(shù)（比如 4、24）。
  • 默認值：24（默認看起來比較圓）。
• detailY（垂直細分）
  • 作用：控制圓柱體側(cè)面沿高度方向的「三角形細分數(shù)量」。數(shù)值越大，側(cè)面越平滑。
  • 類型：整數(shù)（比如 1、3）。
  • 默認值：1（默認側(cè)面較簡潔）。
• bottomCap（底部開關(guān)）
  • 作用：控制是否繪制底部圓形。
  • 類型：布爾值（true 繪制，false 不繪制）。
  • 默認值：true（默認繪制底部）。
• topCap（頂部開關(guān)）
  • 作用：控制是否繪制頂部圓形。
  • 類型：布爾值（true 繪制，false 不繪制）。
  • 默認值：true（默認繪制頂部）。

動手試試

默認圓柱體

一個半徑 50、高度 50、邊緣平滑（detailX=24）、帶上下底的圓柱體。

function setup() {
  createCanvas(200, 200, WEBGL); // 開啟 WebGL 模式（必須）
  describe('灰色背景上的白色圓柱體');
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允許鼠標拖動旋轉(zhuǎn)視角（3D 必備）
  cylinder(); // 不填參數(shù)，用默認值
}

createCanvas 第三個參數(shù) WEBGL 是 3D 繪圖的開關(guān)；orbitControl() 讓你能拖動鼠標 360° 查看圓柱體。

指定半徑

半徑 30，高度默認等于半徑（也是 30）的圓柱體。

// 其他代碼和示例 1 相同，僅修改 cylinder() 部分
cylinder(30); // 只傳 radius=30

只傳一個參數(shù)時，默認是 radius，height 會自動等于它。

指定半徑和高度

半徑 30、高度 50 的圓柱體（更 “瘦長”）。

cylinder(30, 50); // radius=30，height=50

調(diào)整水平細分（detailX）

頂部和底部只有 5 條邊，看起來像一個 “五角柱”（接近盒子）。

detailX 越小，形狀越 “棱角分明”；越大越接近圓形。

cylinder(30, 50, 6); // detailX=6

調(diào)整垂直細分（detailY）

側(cè)面沿高度方向分成 2 段，比默認（detailY=1）更平滑。

cylinder(30, 50, 24, 2); // detailX=24（默認圓），detailY=2

隱藏底部

cylinder(30, 50, 24, 1, false); // bottomCap=false

隱藏頂部和底部

只剩側(cè)面，像一個 “圓筒”（比如水管）。

cylinder(30, 50, 24, 1, false, false); // 兩個都設(shè)為 false

給圓柱上色

加入顏色和旋轉(zhuǎn)效果。

function setup() {
  createCanvas(400, 400, WEBGL); // 更大的畫布
  describe('會旋轉(zhuǎn)的彩色圓柱體');
}

function draw() {
  background(25); // 深色背景
  orbitControl(); // 允許鼠標旋轉(zhuǎn)
  
  // 設(shè)置顏色（RGB 模式：紅、綠、藍）
  fill(100, 200, 255); // 淺藍色
  
  // 讓圓柱體旋轉(zhuǎn)（隨時間變化角度）
  rotateX(frameCount * 0.01); // 繞 x 軸旋轉(zhuǎn)
  rotateY(frameCount * 0.02); // 繞 y 軸旋轉(zhuǎn)
  
  // 繪制圓柱體：半徑 60，高度 120，較圓（detailX=16），側(cè)面平滑（detailY=3）
  cylinder(60, 120, 16, 3);
}

總結(jié)

到此這篇關(guān)于p5.js用cylinder()繪制3D圓柱體的文章就介紹到這了,更多相關(guān)p5.js繪制3D圓柱體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論