Three.js中如何选用Blender制作的第二套UV用于凹凸贴图？

嘿，作为刚接触Three.js和JavaScript的新手，你遇到的这个UV切换问题我之前也踩过坑，给你一步步捋清楚怎么解决：

第一步：确认模型确实包含第二套UV #

首先得确保你从Blender导出的模型里，第二套UV被正确导出了。加载完模型后，先打印检查一下几何体的属性：

// 假设你用JSONLoader加载完的模型几何体是geometry
console.log(geometry.attributes.uv2);

如果控制台能看到带数据的BufferAttribute，说明第二套UV已经成功加载；如果是undefined，那得回到Blender，检查导出设置里有没有勾选UV选项，并且第二套UV层处于启用状态。

第二步：修改材质让它用第二套UV采样凹凸贴图 #

Three.js的内置材质（比如MeshStandardMaterial、MeshPhongMaterial）默认会用第一套UV（uv属性）来采样凹凸贴图，我们需要手动修改着色器让它换成第二套UV：

示例代码 #

// 先加载你的凹凸贴图
const bumpTexture = new THREE.TextureLoader().load('你的凹凸贴图路径.jpg');

// 创建材质，这里用MeshStandardMaterial为例
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  bumpMap: bumpTexture,
  bumpScale: 0.1 // 调整凹凸强度，根据你的需求修改
});

// 检查几何体是否有第二套UV
if (geometry.attributes.uv2) {
  // 启用UV2的定义，让顶点着色器传递第二套UV到片段着色器
  material.defines.USE_UV2 = '';
  
  // 修改材质的着色器代码，替换凹凸贴图的采样UV
  material.onBeforeCompile = (shader) => {
    // 把片段着色器里默认的vUv（第一套UV）替换成vUv2（第二套UV）
    shader.fragmentShader = shader.fragmentShader.replace(
      'vec4 texel = texture2D( bumpMap, vUv );',
      'vec4 texel = texture2D( bumpMap, vUv2 );'
    );
  };
}

// 最后把几何体和材质组合成网格添加到场景
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

额外注意事项 #

• 如果你的模型是用旧版Geometry（不是BufferGeometry）加载的，先转换成BufferGeometry再检查uv2：

  const bufferGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
  

• 要是你用的是位移贴图（displacementMap）而不是凹凸贴图，同样的逻辑，把片段着色器里对应采样的vUv换成vUv2就行。

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