修復自定義Threejs膠囊幾何中的法線

Question

為了進一步了解Three.js中的自定義幾何，我嘗試改編Paul Bourke的膠囊幾何示例 。

我的自定義膠囊幾何形狀目前存在兩個問題：

1. 中臉法線方向不正確。
2. 側面有硬縫。 （編輯：通過有意計算面部法線來修正。要點中的更新代碼）

也許一個懸念一直困擾着我：

3. 在該中間段中添加頂點環的一般策略是什么？

總的來說，我對幾何很滿意，但是有人能給我一些解決這些問題的指導嗎？ 我覺得中間部分的正常問題一定是臉部的方向，這是相關的臉部構造片段：

  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。 編織三角形時，您可能會告訴至少使用2PI而不是0，即使它們位於同一位置，就三角形而言，它們指向的頂點也不同，因此沒有連接。

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

如果告訴循環中的最后一個三角形指向起始頂點，則將創建一個連續的曲面，使geometry.computeVertexNormals()可以平滑。

您也可以直接計算這些法線。 在這種情況下，可以在擴展原始球體之前從其原始球體的頂點位置獲得所有法線。