Three.js实现T恤图案贴合及去除图案黑底技术求助

一、去除设计图的黑色背景 #

要去掉黑色背景，核心是利用Three.js的透明材质特性，步骤如下：

1. 预处理图片：先把你的设计图转换成带透明alpha通道的PNG格式（把黑色背景替换为透明区域），这是最直接可靠的方式。
2. 修改材质配置：加载设计纹理时，给MeshBasicMaterial添加透明相关参数：

var material = new THREE.MeshBasicMaterial({ 
  map: texture,
  transparent: true, // 开启透明
  alphaTest: 0.5 // 可选，过滤半透明锯齿，数值按需调整
});

如果暂时无法修改图片格式，也可以通过自定义着色器过滤黑色像素，但不如带alpha的PNG高效，推荐优先处理图片。

二、让图案更真实贴合T恤 #

当前两个Plane叠加的方式是完全平面的，无法模拟T恤的形态，推荐两种优化方案：

方案1：合并纹理到单个Plane（快速实现） #

不用创建独立的设计Plane，把设计图和T恤纹理叠加到同一个材质上，这样设计图会和T恤完全贴合：

// 用Promise.all简化双纹理加载逻辑
Promise.all([
  new Promise(resolve => textureLoader.load("/t-shirt data url/", resolve)),
  new Promise(resolve => designTextureLoader.load("/design data url/", resolve))
]).then(([tShirtTexture, designTexture]) => {
  tShirtTexture.colorSpace = THREE.SRGBColorSpace;
  designTexture.colorSpace = THREE.SRGBColorSpace;

  const material = new THREE.MeshBasicMaterial({ map: tShirtTexture });

  // 通过自定义着色器叠加设计图
  material.onBeforeCompile = (shader) => {
    shader.uniforms.designMap = { value: designTexture };
    // 控制设计图的位置与缩放：x=偏移X, y=偏移Y, z=缩放X, w=缩放Y（UV范围0-1）
    shader.uniforms.designTransform = { value: new THREE.Vector4(0.2, 0.3, 0.5, 0.5) };
    
    shader.fragmentShader = `
      uniform sampler2D designMap;
      uniform vec4 designTransform;
      ${shader.fragmentShader}
    `.replace(
      '#include <map_fragment>',
      `#include <map_fragment>
      vec2 designUV = (vUv - designTransform.xy) / designTransform.zw;
      // 只显示UV范围内的设计图
      if (designUV.x >= 0.0 && designUV.x <= 1.0 && designUV.y >= 0.0 && designUV.y <= 1.0) {
        vec4 designColor = texture2D(designMap, designUV);
        diffuseColor = mix(diffuseColor, designColor, designColor.a);
      }
      `
    );
  };

  const mesh = new THREE.Mesh(new THREE.PlaneGeometry(700, 700), material);
  scene.add(mesh);
});

方案2：带褶皱的真实贴合（进阶效果） #

如果需要模拟T恤的褶皱形态，需要用细分几何体+位移贴图，配合光照增强真实感：

Promise.all([
  new Promise(resolve => textureLoader.load("/t-shirt data url/", resolve)),
  new Promise(resolve => designTextureLoader.load("/design data url/", resolve)),
  // 额外加载一张褶皱灰度图作为位移贴图
  new Promise(resolve => textureLoader.load("/wrinkle-map-url/", resolve))
]).then(([tShirtTexture, designTexture, displacementTexture]) => {
  tShirtTexture.colorSpace = THREE.SRGBColorSpace;
  designTexture.colorSpace = THREE.SRGBColorSpace;
  displacementTexture.colorSpace = THREE.LinearSRGBColorSpace;

  // 创建带细分的平面，让褶皱更平滑
  const geometry = new THREE.PlaneGeometry(700, 700, 32, 32);
  // 使用MeshStandardMaterial支持光照和位移效果
  const material = new THREE.MeshStandardMaterial({
    map: tShirtTexture,
    alphaMap: designTexture, // 用设计图的alpha控制显示区域
    displacementMap: displacementTexture,
    displacementScale: 20, // 褶皱强度
    displacementBias: -10,
    transparent: true
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  // 添加灯光增强褶皱的光影效果
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(50, 50, 100);
  scene.add(directionalLight);
});

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