p5.js 用 cylinder() 绘制 3D 圆柱体

点赞 + 关注 + 收藏 = 学会了

cylinder() 是 p5.js 中用于绘制3D 圆柱体的函数。圆柱体由顶部、底部两个圆形和侧面组成,所有表面由三角形拼接而成(这是 3D 绘图的常见方式)。

注意cylinder() 只能在「WebGL 模式」下使用(WebGL 是浏览器的 3D 绘图技术),普通 2D 模式下无法生效。

基础语法

cylinder() 的参数非常灵活,所有参数都是可选的,按顺序传入即可:

js 复制代码
cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap])
  • radius(半径)
    • 作用:设置圆柱体底部 / 顶部圆形的半径。
    • 类型:数字(比如 20、50)。
    • 默认值:50(不填的话,半径就是 50)。
  • height(高度)
    • 作用:设置圆柱体上下底之间的距离(沿 y 轴方向)。
    • 类型:数字。
    • 默认值:等于 radius(不填的话,高度和半径一样)。
  • detailX(水平细分)
    • 作用:控制顶部和底部圆形的「边数」。边数越少,形状越像多边形(比如 4 边就像盒子);边数越多,越接近圆形。
    • 类型:整数(比如 4、24)。
    • 默认值:24(默认看起来比较圆)。
  • detailY(垂直细分)
    • 作用:控制圆柱体侧面沿高度方向的「三角形细分数量」。数值越大,侧面越平滑。
    • 类型:整数(比如 1、3)。
    • 默认值:1(默认侧面较简洁)。
  • bottomCap(底部开关)
    • 作用:控制是否绘制底部圆形。
    • 类型:布尔值(true 绘制,false 不绘制)。
    • 默认值:true(默认绘制底部)。
  • topCap(顶部开关)
    • 作用:控制是否绘制顶部圆形。
    • 类型:布尔值(true 绘制,false 不绘制)。
    • 默认值:true(默认绘制顶部)。

动手试试

默认圆柱体

一个半径 50、高度 50、边缘平滑(detailX=24)、带上下底的圆柱体。

js 复制代码
function setup() {
  createCanvas(200, 200, WEBGL); // 开启 WebGL 模式(必须)
  describe('灰色背景上的白色圆柱体');
}

function draw() {
  background(200); // 灰色背景
  orbitControl(); // 允许鼠标拖动旋转视角(3D 必备)
  cylinder(); // 不填参数,用默认值
}

createCanvas 第三个参数 WEBGL 是 3D 绘图的开关;orbitControl() 让你能拖动鼠标 360° 查看圆柱体。

指定半径

半径 30,高度默认等于半径(也是 30)的圆柱体。

js 复制代码
// 其他代码和示例 1 相同,仅修改 cylinder() 部分
cylinder(30); // 只传 radius=30

只传一个参数时,默认是 radius,height 会自动等于它。

指定半径和高度

半径 30、高度 50 的圆柱体(更 "瘦长")。

js 复制代码
cylinder(30, 50); // radius=30,height=50

调整水平细分(detailX)

顶部和底部只有 5 条边,看起来像一个 "五角柱"(接近盒子)。

detailX 越小,形状越 "棱角分明";越大越接近圆形。

js 复制代码
cylinder(30, 50, 6); // detailX=6

调整垂直细分(detailY)

侧面沿高度方向分成 2 段,比默认(detailY=1)更平滑。

js 复制代码
cylinder(30, 50, 24, 2); // detailX=24(默认圆),detailY=2

隐藏底部

js 复制代码
cylinder(30, 50, 24, 1, false); // bottomCap=false

隐藏顶部和底部

只剩侧面,像一个 "圆筒"(比如水管)。

js 复制代码
cylinder(30, 50, 24, 1, false, false); // 两个都设为 false

给圆柱上色

加入颜色和旋转效果。

js 复制代码
function setup() {
  createCanvas(400, 400, WEBGL); // 更大的画布
  describe('会旋转的彩色圆柱体');
}

function draw() {
  background(25); // 深色背景
  orbitControl(); // 允许鼠标旋转
  
  // 设置颜色(RGB 模式:红、绿、蓝)
  fill(100, 200, 255); // 浅蓝色
  
  // 让圆柱体旋转(随时间变化角度)
  rotateX(frameCount * 0.01); // 绕 x 轴旋转
  rotateY(frameCount * 0.02); // 绕 y 轴旋转
  
  // 绘制圆柱体:半径 60,高度 120,较圆(detailX=16),侧面平滑(detailY=3)
  cylinder(60, 120, 16, 3);
}

以上就是本文的全部内容啦,想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》

也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了

相关推荐
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf3 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊3 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel3 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260853 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室5 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart5 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级5 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang5 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang5 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构