三.js 使用 JSONLoader 重复 UV 纹理答案

【问题标题】：THREE.js repeating UV texture using JSONLoader三.js 使用 JSONLoader 重复 UV 纹理
【发布时间】：2017-04-19 15:36:21
【问题描述】：

我需要帮助才能在 three.js 中正确渲染 UV 纹理。我在 Blender 中创建了一个具有重复瓷砖纹理的模型。平铺纹理是使用 UV 映射应用的，如果渲染正确，它看起来像这样： Render image using Blender .然而，当它由three.js使用JSONLoader加载时，瓷砖只是被拉伸以填充每个多边形，产生如下奇怪的结果：Screenshot of render using three.js .我尝试在我的代码中设置 THREE.RepeatWrapping 但没有任何改变：

bodyLoader = new THREE.JSONLoader();
bodyLoader.load('./starofthesea_threejs.json', function(geometry, materials) {
  mainBodyMaterials = new THREE.MeshFaceMaterial(materials);
  console.log(materials);
  mainBodyMaterials.wrapS = THREE.RepeatWrapping;
  mainBodyMaterials.wrapT = THREE.RepeatWrapping;
  mainBodyMaterials.needsUpdate = true;
  mainBody = new THREE.Mesh(geometry, mainBodyMaterials);
  mainBody.traverse ( function (child) {
    if (child instanceof THREE.Mesh) {
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
  mainBody.scale.x = mainBody.scale.y = mainBody.scale.z = 1;
  geometry.computeBoundingBox();
  geometry.computeFaceNormals();
  geometry.computeFlatVertexNormals();
  scene.add(mainBody);

});

我的代码中是否有任何问题，或者解决方法以使其正确呈现？非常感谢所有帮助。

【问题讨论】：

想一想，是否需要设置mainBodyMaterials.repeat.set(10, 10);纹理是否需要为 2 宽高的幂？
在材质上设置重复只会引发“未定义”错误，并且纹理的所有维度都已设置为 2 的幂

标签： three.js blender

【解决方案1】：

最后我自己解决了问题，Blender 模型和 JS 都配置错误。 RepeatWrapping 应该应用于纹理，而不是材质。我需要研究 THREE.MeshFaceMaterial 的结构来找到底层纹理的句柄。我需要遍历材质，找出所有带有图像纹理的材质：

mainBodyMaterials = new THREE.MeshFaceMaterial(materials);
for(prop in mainBodyMaterials.materials) {
  if(mainBodyMaterials.materials[prop].map != null) {
    mainBodyMaterials.materials[prop].map.wrapS = THREE.RepeatWrapping;
    mainBodyMaterials.materials[prop].map.wrapT = THREE.RepeatWrapping;
    tex.push(mainBodyMaterials.materials[prop].map.clone());
    tex[tex_sequence].needsUpdate = true;
    tex_sequence++;
  }
}

在将 wrapS 和 wrapT 正确应用到纹理后，其中一种平铺材质得到正确渲染，但“纹理标记为更新但图像未定义”错误不断抛出。根据另一个问题，我需要克隆纹理以消除错误：Three.js r72 - Texture marked for update but image is undefined? 由于有几种材质有重复的瓦片，所以我需要在 JS 例程的开头创建一个全局数组，并在循环遍历材质时将修改后的纹理一一推送：

var tex = new Array();
var tex_sequence = 0;

修复 JS 调用后，其中一个纹理仍然无法正常工作。我忘记了三个.js 只允许 ONE UV 插槽。我需要在 Blender 的同一个 UV 槽下再次打开 UV。一切都像魅力一样，我希望我的痛苦经历可以帮助那些因类似问题而生气的人。

【讨论】：