如何在 three.js 中使用 bufferGeometry 獲得平滑的着色？

Question

我正在用 LOD 制作一個立方體球體，我遇到了一個小問題，我生成的法線是通過這個代碼塊生成的。

// VectorVertices is an array of Vector3
let VectorNormals = new Array(this.VectorVertices.length);

for (let i = 0; i < VectorNormals.length; i++) {
    VectorNormals[i] = new THREE.Vector3();    
}

for (let i = 0; i < this.Triangles.length; i += 3) {
    let vertexIndexA = this.Triangles[i];
    let vertexIndexB = this.Triangles[i + 1];
    let vertexIndexC = this.Triangles[i + 2];

    let pointA = this.VectorVertices[vertexIndexA];
    let pointB = this.VectorVertices[vertexIndexB];
    let pointC = this.VectorVertices[vertexIndexC];

    pointB.sub(pointA);
    pointC.sub(pointA);
    let vertexNormal = new THREE.Vector3().crossVectors(pointB, pointC).normalize();

    VectorNormals[vertexIndexA].add(vertexNormal);
    VectorNormals[vertexIndexB].add(vertexNormal);
    VectorNormals[vertexIndexC].add(vertexNormal);
}

for (let i = 0; i < VectorNormals.length; i++) {
    VectorNormals[i].normalize();
    this.Normals.push(VectorNormals[i].x, VectorNormals[i].y, VectorNormals[i].z);
}

然后將this.Normals設置為bufferGeometry 。 我正在使用MeshPhongMaterial創建網格。

相鄰面之間的法線計算不正確，我不知道出了什么問題。 我為我的語法道歉。 謝謝！

編輯：顯示我的圖像問題這是我得到的結果

Answer 1

您正在嘗試制作一個光滑的球體，但是您正在將三角形的所有法線分配給面法線的值，這是您通過減去和交叉頂點值來計算的值。 （注意：您可能需要注意交叉向量的方向！確保它指向與原始頂點向量相同的方向！）

為了制作光滑的表面，相鄰頂點的法線需要相同。 所以如果你有兩個三角形：

A -- C
|  / |
| /  |
B -- D

然后為了使從ABC到DCB的過渡平滑， B和C處的法線必須相同。 在球體的情況下，它們還應該是所有周圍面法線的平均值，以確保在所有方向上平滑過渡。

實際上對於一個球體來說，如果頂點都起源於幾何原點，那么你所要做的就是對頂點值進行歸一化，這就是該頂點的法線。