对加载的3D模型纹理做像素处理后丢失纹理坐标，如何保留？

你的问题本质不是纹理坐标丢失，是Canvas尺寸未匹配原图导致纹理被强制拉伸/变形，视觉上呈现出坐标错乱的效果。默认Canvas宽高为300x150，直接调用drawImage会将原图压缩到这个尺寸，生成的新图尺寸与原纹理不符，贴到模型上自然出现错位。

修复核心要点 #

• 必须让Canvas的宽高与原纹理图片完全一致
• 等待新图片加载完成后再更新材质（Image加载是异步操作，直接赋值可能导致纹理加载不完整）
• 保留原纹理的映射属性（如wrapS、wrapT、repeat等），确保新纹理的映射规则和原纹理一致

修改后的代码 #

let img = clothes.material.emissiveMap.image;

const canvas = document.createElement("canvas");
// 关键：同步Canvas与原图的宽高
canvas.width = img.width;
canvas.height = img.height;

const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

// 这里执行你的像素操作逻辑
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 示例：调整红色通道亮度
for (let i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i] = Math.floor(imageData.data[i] * 0.8);
}
ctx.putImageData(imageData, 0, 0);

const new_image = new Image();
new_image.onload = function() {
  // 替换纹理图像
  clothes.material.emissiveMap.image = new_image;
  // 复制原纹理的映射属性，避免规则不一致导致错位
  clothes.material.emissiveMap.wrapS = clothes.material.emissiveMap.wrapS;
  clothes.material.emissiveMap.wrapT = clothes.material.emissiveMap.wrapT;
  clothes.material.emissiveMap.repeat = clothes.material.emissiveMap.repeat.clone();
  
  clothes.material.emissiveMap.needsUpdate = true;
  clothes.material.needsUpdate = true;
};
new_image.src = canvas.toDataURL();

效果对比图 #

原图：

修改后（修复前错位效果）：

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