求助：为Three.js自定义形状设置纹理

API 探路者

2026-7-13

给自定义Three.js形状设置纹理的解决方案

步骤1：加载纹理并配置属性

首先用THREE.TextureLoader加载纹理图片，同时设置适配属性确保纹理正确贴合形状：

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const flapTexture = textureLoader.load('你的纹理图片本地路径/在线地址');

// 配置纹理属性
flapTexture.wrapS = THREE.ClampToEdgeWrapping; // 防止纹理边缘重复拉伸
flapTexture.wrapT = THREE.ClampToEdgeWrapping;
flapTexture.minFilter = THREE.LinearFilter; // 优化缩放后的显示清晰度
flapTexture.magFilter = THREE.LinearFilter;

步骤2：修正ShapeGeometry的UV坐标

ShapeGeometry默认生成的UV是0-1的标准化范围，但你的自定义形状实际宽200、高100，需要手动调整UV让纹理和形状精准匹配：

// 获取形状的边界尺寸
const boundingBox = new THREE.Box3().setFromBufferAttribute(flapGeometry.getAttribute('position'));
const width = boundingBox.max.x - boundingBox.min.x;
const height = boundingBox.max.y - boundingBox.min.y;

// 生成自定义UV数组
const uvArray = [];
const positions = flapGeometry.getAttribute('position').array;

for (let i = 0; i < positions.length; i += 3) {
  const x = positions[i];
  const y = positions[i + 1];
  // 将形状坐标映射到0-1的UV范围，v轴反向是因为Three.js纹理Y轴默认朝下
  const u = x / width;
  const v = 1 - (y / height);
  uvArray.push(u, v);
}

// 更新几何体的UV属性
flapGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvArray, 2));

步骤3：创建材质并生成网格

用带纹理的材质创建网格，添加到场景中：

// 创建纹理材质，DoubleSide确保形状正反两面都显示纹理
const flapMaterial = new THREE.MeshBasicMaterial({
  map: flapTexture,
  side: THREE.DoubleSide
});

// 生成网格并添加到场景
const flapMesh = new THREE.Mesh(flapGeometry, flapMaterial);
scene.add(flapMesh);