Three.js中computeVertexNormals与mergeVertices结合时表现异常的原因

首先，我来帮你拆解这个问题——你遇到的现象其实是mergeVertices()改变几何体顶点结构后带来的预期行为，但确实有办法在保留顶点合并优化的同时实现平滑的法线过渡。

为什么会出现异常？ #

mergeVertices()的核心作用是把位置重合的顶点合并为同一个，同时生成**索引缓冲区（index buffer）**来复用这些顶点——这能大幅减少顶点数量，优化性能，但也意味着多个三角面会共享同一个顶点：

• 未合并顶点时，每个三角面的顶点都是独立的，调用computeVertexNormals()时，每个顶点的法线只由所属的单个面计算，过渡自然；
• 合并顶点后，共享顶点的法线是由所有关联它的三角面的法线平均而来的。如果共享顶点关联的多个面在动画中法线变化差异极大，就会导致法线计算出现突变（你看到的末尾突然跳转）；另外，如果没有明确标记几何体属性需要更新，Three.js可能不会把新计算的法线数据上传到GPU，导致法线完全不更新。

解决方案1：确保正确标记几何体属性更新 #

这是合并顶点后最容易遗漏的步骤，必须显式告诉Three.js哪些属性发生了变化：

// 在tick函数更新顶点位置后执行
const geometry = mesh.geometry;
geometry.verticesNeedUpdate = true; // 标记顶点数据已更新
geometry.computeVertexNormals();
geometry.normalsNeedUpdate = true; // 标记法线数据已更新

虽然computeVertexNormals()会自动更新normals数组，但显式设置normalsNeedUpdate = true能确保GPU获取到最新的法线数据，避免出现法线不更新的情况。

解决方案2：通过角度阈值控制法线平滑 #

如果法线突变是因为共享顶点关联的面角度差异过大，可以在计算法线时设置角度阈值，让Three.js只对角度相近的面计算平均法线：

// 在mergeVertices之后，调用带参数的computeVertexNormals
const angleThreshold = Math.PI / 3; // 60度阈值，可根据需求调整
mesh.geometry.computeVertexNormals(angleThreshold);

超过这个阈值的面不会共享同一个顶点的法线，能有效减少法线突变的情况。

解决方案3：自定义着色器控制法线（进阶） #

如果上述方法还无法满足需求，可以放弃依赖computeVertexNormals()，改用顶点着色器动态计算法线。在A-Frame中可以通过自定义组件实现：

AFRAME.registerComponent('custom-normal-shader', {
  init: function () {
    this.el.getObject3D('mesh').material.onBeforeCompile = (shader) => {
      shader.vertexShader = `
        // 在这里添加基于顶点位置的法线计算逻辑
        ${shader.vertexShader}
      `;
    };
  }
});

通过在顶点着色器中根据顶点位置变化实时计算法线，能完全控制法线的过渡效果，但需要一定的GLSL基础。

额外检查点 #

• 确认你在mergeVertices()之后，循环更新顶点时是基于合并后的vertices数组长度，而不是原始顶点数；
• 合并顶点后，几何体的顶点是共享的，单个顶点的变动会影响多个面，动画逻辑可能需要调整来适配这种共享关系。

总的来说，这个现象是预期行为，因为mergeVertices()改变了几何体的顶点存储结构，法线计算逻辑也随之变化。通过上述方法，你可以在保留顶点合并优化的同时，实现平滑的材质过渡效果。

内容的提问来源于stack exchange，提问作者Nick