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

Question

为了在 three.js 中学习更多关于自定义几何的知识，我尝试调整 Paul Bourke's capsule geometry example。

对于我的自定义胶囊几何结构，我目前遇到两个问题：

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

也许还有一个悬而未决的问题：

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

总的来说，我对几何非常满意，但是有人能给我一些解决这些问题的指导吗？感觉中段的正常问题一定是人脸的朝向，下面是相关的人脸构建片段：

  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

那里有 shading/normal 接缝，因为您可能在那里明确定义了硬边。

当您运行循环生成顶点时，您可能会复制起始位置。如果从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() 可以平滑的连续曲面。

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

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

Fixing normals in custom threejs capsule geometry

javascript

geometry

normals

three.js