在Three.js中如何完全用法线贴图替代几何体法线？

工作中给定了法线贴图（normalMap）与几何体（geometry），且无法修改这些文件，目标是仅使用法线贴图的法线替代几何体法线。尝试多种方法后均是几何体法线占主导，三角面效果明显，仅通过自定义着色器实现了用法线贴图替代几何体法线并渲染平滑表面，请问是否有其他方法使用内置着色器仅实现该效果？

现有代码 #

<mesh geometry={geometry}>
  <meshStandardMaterial
    attach="material"
    normalMap={normalMap}
    map={texture}
  />
</mesh>

可以通过以下两种基于Three.js内置着色器的方法实现需求：

• 修改着色器顶点法线逻辑
  利用meshStandardMaterial的onBeforeCompile钩子，替换内置顶点法线计算代码，将几何体顶点法线的贡献完全剔除，只保留法线贴图的影响，同时放大法线缩放确保细节足够明显：

  <mesh geometry={geometry}>
    <meshStandardMaterial
      attach="material"
      normalMap={normalMap}
      map={texture}
      normalScale={new THREE.Vector2(1000, 1000)}
      onBeforeCompile={(shader) => {
        shader.vertexShader = shader.vertexShader.replace(
          '#include <defaultnormal_vertex>',
          'vec3 transformedNormal = vec3(0.0, 0.0, 1.0);'
        );
      }}
    />
  </mesh>
  

  这里将顶点法线固定为Z轴方向，后续片元阶段的法线计算会完全基于法线贴图采样结果，几何体本身的三角面法线被彻底覆盖。

• 临时移除几何体法线属性
  运行时创建几何体副本并删除其法线（及切线）属性，让Three.js自动生成默认的平面法线，此时法线贴图会成为表面法线的主导来源：

  // 创建几何体副本，避免修改原始文件
  const tempGeometry = geometry.clone();
  tempGeometry.deleteAttribute('normal');
  tempGeometry.deleteAttribute('tangent');
  
  <mesh geometry={tempGeometry}>
    <meshStandardMaterial
      attach="material"
      normalMap={normalMap}
      map={texture}
    />
  </mesh>
  

  当几何体无法线属性时，Three.js会为每个面生成统一的面法线，此时法线贴图的细节会完全覆盖几何体原本的三角面特征，实现平滑的表面效果。

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