THREE.js 使用 JSONLoader 重复 UV 纹理

Question

我需要帮助才能在 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);

});

我的代码有什么问题吗，或者有什么解决方法可以正确呈现它？非常感谢所有帮助。

Answer 1

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

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 到纹理后，其中一个 materials 得到正确渲染，但 'Texture marked for update but image is undefined' 错误不断抛出。根据另一个问题，我需要克隆纹理以消除错误：由于有几个 materials 有重复的图块，我需要在 JS 例程的开头创建一个全局数组，并在遍历 materials 时将修改后的纹理一张一张地推送：

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

修复 JS 调用后，其中一个纹理仍然无法正常工作。我忘记了 three.js 只允许 ONE 个 UV 插槽。我需要在 Blender 中的同一个 UV 插槽下再次展开 UV。一切正常，我希望我的痛苦经历可以帮助那些被类似问题抓狂的人。

THREE.js 使用 JSONLoader 重复 UV 纹理

THREE.js repeating UV texture using JSONLoader

blender

three.js