Three.js/Blender技术咨询：单Mesh多材质与多Mesh无缝贴图

1. 如何在Three.js/Blender中为同一个Mesh应用两种不同材质的两种纹理？ #

Blender实现方式 #

• 添加多材质并通过节点混合：
  1. 在「属性面板-材质」中点击+为Mesh添加两个独立材质，分别为每个材质加载目标纹理。
  2. 进入材质编辑器，使用混合着色器连接两个材质的输出，通过「顶点组权重」「UV范围蒙版」或「灰度纹理蒙版」作为混合因子，控制两种材质在Mesh上的显示区域。比如用顶点组选中Mesh局部区域，将顶点组权重连接到混合着色器的Factor输入，实现区域化材质区分。
  3. 也可为Mesh设置双UV通道，每个材质绑定不同UV通道，配合蒙版实现纹理分区显示。

Three.js实现方式 #

• 方式一：使用材质数组+几何体分组
  通过给几何体划分顶点组，为每个组分配对应材质，示例代码：

  // 给几何体划分两个顶点组，对应不同材质
  geometry.addGroup(0, 1000, 0); // 索引0-999的顶点用第0个材质
  geometry.addGroup(1000, 2000, 1); // 索引1000-2999的顶点用第1个材质
  
  // 创建两个带纹理的材质
  const mat1 = new THREE.MeshStandardMaterial({ map: texture1 });
  const mat2 = new THREE.MeshStandardMaterial({ map: texture2 });
  
  // 实例化Mesh时传入材质数组
  const mesh = new THREE.Mesh(geometry, [mat1, mat2]);
  

• 方式二：自定义着色器混合纹理
  在片元着色器中通过蒙版或UV范围混合两个纹理，示例核心代码：

  uniform sampler2D tex1;
  uniform sampler2D tex2;
  uniform sampler2D mask; // 蒙版纹理，灰度值控制混合比例
  
  varying vec2 vUv;
  
  void main() {
      vec4 colorA = texture2D(tex1, vUv);
      vec4 colorB = texture2D(tex2, vUv);
      float mixRatio = texture2D(mask, vUv).r;
      gl_FragColor = mix(colorA, colorB, mixRatio);
  }
  

  在Three.js中创建ShaderMaterial并传入对应uniforms即可实现。

2. 定制鞋子项目中，如何用fabric.js生成的纹理无缝应用到多个Mesh？ #

核心思路是统一UV布局+共享fabric生成的纹理，步骤如下：

1. 统一Mesh的UV布局
   在Blender中导出鞋子模型前，将需要无缝贴图的多个Mesh（如鞋身、鞋帮）的UV展开到同一UV空间，确保各Mesh的UV边缘对齐，让纹理在不同Mesh上的显示区域连续无断裂。
2. 用fabric.js生成合成纹理
   创建fabric画布并添加文字、图片元素，将画布转为Three.js可用的纹理：

   // 初始化fabric画布
   const fabricCanvas = new fabric.Canvas('customCanvas', { width: 1024, height: 1024 });
   
   // 添加自定义文字
   const customText = new fabric.Text('MY SHOES', {
       left: 300,
       top: 400,
       fontSize: 56,
       fill: '#2c3e50'
   });
   fabricCanvas.add(customText);
   
   // 添加自定义图片
   fabric.Image.fromURL('shoe-pattern.png', img => {
       img.scale(0.6).set({ left: 100, top: 200 });
       fabricCanvas.add(img);
   });
   
   // 转为Three.js纹理
   const canvasTex = new THREE.CanvasTexture(fabricCanvas.getElement());
   canvasTex.needsUpdate = true;
   

3. 将纹理应用到目标Mesh
   创建共享材质并赋值给所有需要无缝显示的Mesh：

   const sharedMat = new THREE.MeshStandardMaterial({ map: canvasTex });
   // 假设shoePart1、shoePart2是需要无缝贴图的部件Mesh
   shoePart1.material = sharedMat;
   shoePart2.material = sharedMat;
   

4. 动态更新纹理
   监听fabric画布的修改事件，实时更新Three.js纹理：

   fabricCanvas.on('object:modified', () => {
       canvasTex.needsUpdate = true;
   });
   

5. 对齐微调
   若纹理在Mesh上有偏移，可通过材质的offset和repeat属性调整，或在fabric画布上移动元素位置匹配UV区域。

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