ThreeJS技术问询：如何为3D模型添加随机JPG纹理

嘿，作为ThreeJS新手能搞定材质这一步已经超棒啦！当然可以给模型加随机JPG纹理，我来一步步给你拆解怎么做～

核心思路 #

其实逻辑很简单：先随机选一张JPG图片，用ThreeJS的TextureLoader加载它，再把加载好的纹理赋值给模型材质的map属性就行。你提供的JSON模型里的"textures": []是静态预定义纹理的区域，动态随机纹理咱们在代码里处理更灵活，不用修改这个JSON哦。

具体步骤&代码示例 #

1. 生成随机图片路径并加载纹理 #

首先你得准备一组JPG图片（比如img0.jpg到img4.jpg），用随机数选一张，再用TextureLoader加载：

// 生成随机图片索引（假设你有5张图）
const randomImgIndex = Math.floor(Math.random() * 5);
const texturePath = `img${randomImgIndex}.jpg`;

// 初始化纹理加载器
const textureLoader = new THREE.TextureLoader();

// 加载纹理（异步操作，需在回调里处理后续逻辑）
textureLoader.load(texturePath, (loadedTexture) => {
  // 可选：设置纹理重复模式（如果图片需要重复覆盖模型）
  loadedTexture.wrapS = THREE.RepeatWrapping;
  loadedTexture.wrapT = THREE.RepeatWrapping;
  loadedTexture.repeat.set(1, 1); // 重复次数按需调整

  // 把纹理应用到模型上
  applyTextureToModel(loadedTexture);
});

2. 将纹理绑定到模型材质 #

假设你已经加载好JSON模型，写个函数遍历模型的网格对象，给材质赋值纹理：

function applyTextureToModel(texture) {
  // 遍历模型所有子对象，找到网格(Mesh)
  yourModel.traverse((child) => {
    if (child.isMesh) {
      // 把纹理赋值给材质的map属性
      child.material.map = texture;
      // 划重点！必须设置这个，告诉ThreeJS材质已更新
      child.material.needsUpdate = true;
    }
  });
}

3. 同步加载模型和纹理（避免顺序问题） #

如果模型和纹理都是异步加载的，用Promise确保两者都加载完成再处理，避免找不到模型的情况：

// 封装模型加载函数
function loadModel() {
  return new Promise((resolve) => {
    const jsonLoader = new THREE.JSONLoader();
    jsonLoader.load('你的模型路径.json', (geometry, materials) => {
      const model = new THREE.Mesh(geometry, materials);
      resolve(model);
    });
  });
}

// 封装随机纹理加载函数
function loadRandomTexture() {
  const randomImgIndex = Math.floor(Math.random() * 5);
  const texturePath = `img${randomImgIndex}.jpg`;
  return new Promise((resolve, reject) => {
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load(texturePath, resolve, undefined, reject);
  });
}

// 并行加载模型和纹理
Promise.all([loadModel(), loadRandomTexture()]).then(([model, texture]) => {
  // 设置纹理属性
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;

  // 应用纹理到模型
  model.traverse((child) => {
    if (child.isMesh) {
      child.material.map = texture;
      child.material.needsUpdate = true;
    }
  });

  // 将模型添加到场景
  scene.add(model);
}).catch((error) => {
  console.error('加载出错啦:', error);
});

注意事项 #

• 跨域问题：如果JPG图片来自其他域名，要确保服务器开启了CORS跨域访问权限，否则纹理会加载失败。
• 异步加载特性：必须在纹理加载完成的回调里处理材质赋值，不然会拿到空的纹理对象。
• 材质更新标记：修改材质后一定要设置needsUpdate = true，否则ThreeJS不会重新渲染材质的变化。

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