我如何访问 p5.js 中 obj 模型的顶点坐标？

Question

我希望能够在我导入到 p5 中的 obj 模型的每个单独顶点周围移动。所以我希望能够访问每个单独顶点的坐标。这个可以吗？？

我尝试在控制台记录模型并在那里找到坐标，但没有找到任何东西

Answer 1

p5.Geometry 对象有一个 vertices 属性，它是一个 p5.Vector 对象的列表。您可以修改这些顶点，但是当您进行更改时，您还需要更新 gid 属性以根据原始列表使缓存缓冲区无效。此外，这只允许您修改现有的三角形，添加和删除三角形更复杂，并且还涉及 vertexNormals 和 faces 属性。

//draw a spinning teapot
let teapot;
let version = 0;

function preload() {
  // Load model with normalize parameter set to true
  teapot = loadModel('https://www.paulwheeler.us/files/teapot.obj', true);
}

function setup() {
  createCanvas(400, 400, WEBGL);
  describe('Vertically rotating 3-d teapot with red, green and blue gradient. Double click to mutate vertices.');
}

function doubleClicked() {
  // randomly translate the vertices.
  for (const v of teapot.vertices) {
    v.x *= random(0.95, 1.05);
    v.y *= random(0.95, 1.05);
    v.z *= random(0.95, 1.05);
  }

  teapot.computeNormals();
  
  // Update the geometry id so that the vertex buffer gets recreated
  // Without this p5.js will reused the cached vertex buffer.
  teapot.gid = `teapot-version-${version++}`;
}

function draw() {
  background(200);
  scale(1.6); // Scaled to make model fit into canvas
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  normalMaterial(); // For effect
  model(teapot);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>