在 p5.js 中创建实体 3D 形状答案

【问题标题】：Create solid 3D shape in p5.js在 p5.js 中创建实体 3D 形状
【发布时间】：2020-08-25 08:12:43
【问题描述】：

我正在尝试使用 p5.js 制作一个 3D 的苹果表面，类似于 this page 上的图像（Ctrl+F "Apple Surface"）：

我目前拥有的是（interactive version in p5 editor）：

function setup() {
  createCanvas(500, 500, WEBGL);
  setAttributes('antialias', true);
  fill(237, 34, 93);
  strokeWeight(3);
}

function draw() {
  background(200);
  normalMaterial();
  rotateY(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
  apple();
}


function apple() {
  beginShape(TRIANGLE_FAN);

  size = 20;

  for (let u = 0; u < TWO_PI; u += 0.1) {
      for (let v = -PI; v < PI; v += 0.1) {
    x = cos(u) * (4 + 3.8 * cos(v))
    y = sin(u) * (4 + 3.8 * cos(v))     
    z = (cos(v) + sin(v) -1) * (1+sin(v)) * log(1-PI * v/10)+7.5 * sin(v)
    //point(size * x, size * y, size * z);
    vertex(size * x, size * y, size * z);
      }
  }

  endShape(CLOSE);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"&gt;&lt;/script&gt;

如何使我的形状像上面第二张苹果图片一样坚固？

【问题讨论】：

标签： javascript 3d processing p5.js

【解决方案1】：

只需创建三角形条带图元（TRIANGLE_STRIP - 参见beginShape()）：

0        2       4        6
 +-------+-------+-------+---
 | \     | \     | \     | \
 |   \   |   \   |   \   |   \
 |     \ |     \ |     \ |
 +-------+-------+-------+---
1        3       5        7

function setup() {
  createCanvas(500, 500, WEBGL);
  setAttributes('antialias', true);
  fill(237, 34, 93);
  strokeWeight(3);
}

function draw() {
  background(200);
  normalMaterial();
  rotateY(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
  apple();
}

function apple() {

  size = 20;
  for (let u = 0; u < TWO_PI; u += 0.1) {
      beginShape(TRIANGLE_STRIP);
      for (let v = -PI; v < PI; v += 0.1) {
        x = cos(u) * (4 + 3.8 * cos(v))
        y = sin(u) * (4 + 3.8 * cos(v))     
        z = (cos(v) + sin(v) -1) * (1+sin(v)) * log(1-PI * v/10)+7.5 * sin(v)
        vertex(size * x, size * y, size * z);

        x = cos(u+0.1) * (4 + 3.8 * cos(v))
        y = sin(u+0.1) * (4 + 3.8 * cos(v)) 
        vertex(size * x, size * y, size * z);
      }
      endShape(CLOSE);
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"&gt;&lt;/script&gt;

【讨论】：