javascript - 修复自定义 Threejs 胶囊几何形状中的法线

Question

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

对于我的自定义胶囊几何形状，我目前遇到两个问题:

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

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

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

总的来说，我对几何形状非常满意，但是有人能给我一些如何解决这些问题的指导吗？我觉得中间部分的正常问题一定是面部的方向，这是相关的面部构造片段:

  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。当你编织三 Angular 形时，你可能会告诉最少的人使用2PI而不是0，即使它们处于相同的位置，但就三 Angular 形而言，它们指向不同的顶点，因此不相连。

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

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

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