p5.js 掌握圆锥体 cone

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

cone() 是 p5.js 中用于绘制三维圆锥体的函数。它属于 p5.js 的 3D 绘图功能，允许你在 3D 空间中创建圆锥形状。对于初学者来说，这是进入 3D 绘图世界的绝佳起点。

基本语法

cone() 函数的基本语法有两种形式：

最简化形式（使用默认参数）：

javascript 复制代码

cone();

完整参数形式：

javascript 复制代码

cone(radius, height, detailX, detailY);

radius（可选）：圆锥底部的半径，默认值为 50。
height（可选）：圆锥的高度，默认值为 100。
detailX（可选）：圆锥圆周方向的分段数，决定了圆锥的平滑度，默认值为 24。
detailY（可选）：圆锥高度方向的分段数，默认值为 1。

绘制一个简单的圆锥

要使用 3D 函数，我们需要在 setup() 中创建一个 3D 画布，并在 draw() 中设置相机视角。

javascript 复制代码

function setup() {
  // 创建 3D 画布
  createCanvas(600, 400, WEBGL);
}

function draw() {
  background(220);
  
  // 旋转以便从不同角度看到圆锥
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  // 设置填充色和边框色
  fill(100, 200, 255);
  stroke(0);
  strokeWeight(1);
  
  // 绘制圆锥 - 使用默认参数
  cone();
}

createCanvas(600, 400, WEBGL)：创建一个 600x400 像素的 3D 画布
rotateX() 和 rotateY()：让圆锥随时间旋转，便于从多角度观察
fill(100, 200, 255)：设置圆锥的填充色为浅蓝色
stroke(0) 和 strokeWeight(1)：设置圆锥边框为黑色，粗细为 1px
cone()：绘制一个默认大小的圆锥

你也可以通过下面这个示例了解各个参数的作用。

通过拖动滑块，你可以直观地看到：

半径增大，圆锥底部变得更宽
高度增加，圆锥变得更高
水平分段数（detailX）越多，圆锥侧面越平滑
垂直分段数（detailY）增加，圆锥会被分成多个水平切片

javascript 复制代码

let radius = 50;
let height = 100;
let detailX = 24;
let detailY = 1;

function setup() {
  createCanvas(800, 600, WEBGL);
  
  // 创建简单的控制面板
  createP('半径: ').position(10, 10);
  let rSlider = createSlider(10, 100, 50);
  rSlider.position(80, 20);
  rSlider.input(() => radius = rSlider.value());
  
  createP('高度: ').position(10, 50);
  let hSlider = createSlider(20, 200, 100);
  hSlider.position(80, 60);
  hSlider.input(() => height = hSlider.value());
  
  createP('水平分段数: ').position(10, 90);
  let dxSlider = createSlider(3, 48, 24);
  dxSlider.position(120, 100);
  dxSlider.input(() => detailX = dxSlider.value());
  
  createP('垂直分段数: ').position(10, 130);
  let dySlider = createSlider(1, 20, 1);
  dySlider.position(120, 140);
  dySlider.input(() => detailY = dySlider.value());
}

function draw() {
  background(220);
  
  // 添加简单的光照效果
  ambientLight(150);
  pointLight(255, 255, 255, 200, -150, 300);
  
  // 旋转
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  // 绘制圆锥
  fill(100, 200, 255);
  stroke(0);
  cone(radius, height, detailX, detailY);
}

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

也可以➕我 green bubble 吹吹水咯

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