修复自定义threejs胶囊几何中的法线

Question

为了更多地了解three.js 中的自定义几何，我尝试调整Paul Bourke's capsule geometry example。

使用我的自定义胶囊几何形状，我目前遇到两个问题：

1. 中间面法线方向不正确。
2. 侧面有硬接缝。 （编辑：通过故意计算面部法线来修复。更新了要点中的代码）

也许还有一个一直萦绕在我脑海中的额外问题：

1. 在中间段添加顶点循环的一般策略是什么？

总的来说，我对几何形状非常满意，但是谁能给我一些关于如何解决这些问题的指导？我觉得中间段的正常问题一定是人脸的方向，这里是相关的人脸构造sn-p：

  for(let i = 0; i <= N/2; i++){
    for(let j = 0; j < N; j++){
      let vec = new THREE.Vector4(
        i         * ( N + 1 ) +   j       ,
        i         * ( N + 1 ) + ( j + 1 ) ,
        ( i + 1 ) * ( N + 1 ) + ( j + 1 ) ,
        ( i + 1 ) * ( N + 1 ) +   j
      );

      let face_1 = new THREE.Face3(vec.x,vec.y,vec.z);
      let face_2 = new THREE.Face3(vec.x,vec.z,vec.w);

      geometry.faces.push(face_1);
      geometry.faces.push(face_2);
    }
  }

---

CapsuleGeometry.js

---

Answer 1

阴影/法线接缝在那里，因为您可能在那里明确定义了硬边。

当您运行循环来生成顶点时，您可能会复制起始位置。如果从 0 开始，一直到 2PI，0==2PI。当你编织三角形时，你可能会告诉 Lest 使用 2PI 而不是 0，即使它们在相同的位置，就三角形而言，它们指向不同的顶点，因此不相连。

for(let i = 0; i <= N/4; i++){ //change to i < N 
for(let j = 0; j <= N; j++){

如果您告诉循环中的最后一个三角形指向起始顶点，您将创建一个geometry.computeVertexNormals() 可以平滑的连续曲面。

您也可以直接计算这些法线。在这种情况下，所有法线都可以在扩展之前从原始球体的顶点位置获得。