Three.js - 细分几何时生成新的 faceVertexUvs

Question

总结

我目前正在研究不同类型的细分算法。

当我细分几何体时，无法正确生成 UV，导致面没有材质，即网格中的孔。

这是我练习的link。

（我需要更多声望才能发布图片..）

https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape.png

https://raw.githubusercontent.com/larryzodiac/Generative-Jewellery/master/images/shape-gaps.png

Three.js 使用Loop subdivision。我一直在基于找到的 Three.js 示例进行编码 here。

作为我研究的一部分，我编写了一个 Catmull-Clark 细分的工作（几乎）示例

问题

在一个面上使用 Catmull-Clark 会产生三个新的面（quads）来代替源面。

由于不推荐使用 THREE.Face4，我选择简单地创建两个三角形 (Face3) 来代替每个四边形。我知道这很奇怪而且不是最优的，但请尽量忽略它。

因此，将创建六个新面孔来代替源面孔。

有些面有 UV。在将 UV 映射到所有新创建的面时，我不知道哪里出了问题。

代码摘录

Here 是 Github 上练习代码的链接。

Catmull-Clark.js：

  ...

  /*
  Step 4
  Redraw geometry
  */

  // Throwing together all new/old vertices for the new geometry
  const newVertices = vertexPoints.concat(edgePoints,facePoints);
  const newFaces = [];
  const newUVs = [];

  let uv, x0, x1, x2; // Source triangle face points
  let xe0 = new THREE.Vector2(); // Edge points (mid-points)
  let xe1 = new THREE.Vector2();
  let xe2 = new THREE.Vector2();
  let xf = new THREE.Vector2(); // Face point of face (centre-ish)

  // Loop through each face, create sudivided faces from found algorithm points
  for (let i = 0; i < sourceFaces.length; i++) {
    const face = sourceFaces[i];

    const edgePoint1 = getEdgePoint(face.a, face.b, sourceEdges, edgePoints) + sourceVertices.length;
    const edgePoint2 = getEdgePoint(face.b, face.c, sourceEdges, edgePoints) + sourceVertices.length;
    const edgePoint3 = getEdgePoint(face.c, face.a, sourceEdges, edgePoints) + sourceVertices.length;

    const facePoint = getFacePoint(face.a, face.b, face.c, sourceEdges, facePoints) + sourceVertices.length + edgePoints.length;

    /*
    Catmull for ARBITRARY shapes, all faces after the first iteration become quads.
    THREE.Face4 has been depreciated in the new Three.js build
    Solution will be to draw a quad using two triangles.
    */

    createNewFace(newFaces, face.a, edgePoint1, edgePoint3, facePoint);
    createNewFace(newFaces, face.b, edgePoint2, edgePoint1, facePoint);
    createNewFace(newFaces, face.c, edgePoint3, edgePoint2, facePoint);

    // create 4 new uv's
    uv = sourceUvs[i];
    x0 = uv[0];
    x1 = uv[1];
    x2 = uv[2];


    // xe0.set(midpoint(x0.x, x1.x), midpoint(x0.y, x1.y));
    // xe1.set(midpoint(x1.x, x2.x), midpoint(x1.y, x2.y));
    // xe2.set(midpoint(x0.x, x2.x), midpoint(x0.y, x2.y));
    // xf.set( ((x0.x + x1.x + x2.x)/3) , ((x0.y + x1.y + x2.y)/3) );

    xe0.set(newVertices[edgePoint1].x, newVertices[edgePoint1].y);
    xe1.set(newVertices[edgePoint2].x, newVertices[edgePoint2].y);
    xe2.set(newVertices[edgePoint3].x, newVertices[edgePoint3].y);
    xf.set(newVertices[facePoint].x, newVertices[facePoint].y);

    createNewUv(newUVs, x0, xe0, xf);
    createNewUv(newUVs, x0, xe2, xf);
    createNewUv(newUVs, x1, xe0, xf);
    createNewUv(newUVs, x1, xe1, xf);
    createNewUv(newUVs, x2, xe1, xf);
    createNewUv(newUVs, x2, xe2, xf);
  }

  geometry.vertices = newVertices;
  geometry.faces = newFaces;
  geometry.faceVertexUvs[0] = newUVs;

这是我的工作方式，请原谅糟糕的图表：

    // ------------------------------------------------- //
    //                          x0
    //                         / \
    //                       /    \
    //                     /       \
    //                   /          \
    //               xe0  \        / xe2      // Creates three quads
    //               /      \ xf /    \
    //             /          |        \
    //           /           |          \
    //         /            |            \
    //      x1 - - - - - - xe1 - - - - - - x2
    // ------------------------------------------------- //

    // ------------------------------------------------- //
    //                          x0
    //                         / \
    //                       /  | \
    //                     /   |   \
    //                   /     |    \
    //               xe0  \   |    / xe2      // Need to divide quads into  two triangles
    //               /      \ xf /    \
    //             /       /  |  \     \
    //           /      /    |      \   \
    //         /    /       |         \  \
    //      x1 - - - - - - xe1 - - - - - - x2
    // ------------------------------------------------- //

结构查询函数.js：

// THREE.Face4 depreciated
// Need to draw two triangles to emulate quad

const createNewFace = (newFaces, a, b, c, d, materialIndex) => {
  newFaces.push(new THREE.Face3(
    a, b, d, undefined, undefined, materialIndex
  ));
  newFaces.push(new THREE.Face3(
    a, c, d, undefined, undefined, materialIndex
  ));
}

const createNewUv = (newUvs, a, b, c) => {
  newUvs.push( [ a.clone(), b.clone(), c.clone() ] );
}

const midpoint = (a, b) => (Math.abs(b - a) / 2) + Math.min(a, b);

我是否错过或忽略了什么？我一直在 Stack 和 Three 网站上研究不同的问题，但无济于事。无论如何，为花时间阅读、提供反馈和帮助而欢呼。

我希望我说得通。

声音，爸爸保佑。

Answer 1

在您的演示中，我可以从另一侧看到缺失的面孔。 好像遇到了backface culling。

添加新面孔时，请检查其方向是否符合预期。在您的示例中，您拥有正确排序顶点所需的所有信息。

在更一般的情况下，您可以查看dotProduct(crossProduct(B-A, C-A), supposedFaceNormal) > 0。如果面的方向不正确，只需通过重新排列顶点（ABC -> ACB）来翻转它。

要使绘制的两个三角形边设置material.side 属性为THREE.DoubleSide。

看不到单一红色的 uv 生成问题。如果有 - 请以某种方式绘制 uvs 的示例进行演示。