如何在 three.js 中将纹理应用于导入的 GLTF 模型？

Question

我目前正在尝试在导入的 GLTF 模型上映射 three.js 中的纹理。我在立方体上尝试了纹理，结果是我想要的，但是当我尝试将相同的纹理应用于导入的模型时，纹理似乎没有应用，只有颜色发生变化而没有任何纹理细节 ： .你可以在这张照片上看到，在底部，立方体比背心有更多细节。

这是立方体的代码：

const textureLoader = new THREE.TextureLoader();
const tilesBaseColor = textureLoader.load('Fabric_Knitted_006_basecolor.jpg');
const plane2 = new THREE.Mesh(new THREE.BoxGeometry(3,3,3),
new THREE.MeshStandardMaterial(
  {
    map: tilesBaseColor,
  }
));
plane2.position.y = 3;
plane2.rotation.x = 0;
scene.add(plane2);

这是背心的代码：

const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
newTexture2.flipY = false;
const gltfLoader = new GLTFLoader();
gltfLoader.load('prom_suit/scene.gltf', (gltf) => {
  gltf.scene.scale.set(0.1*gltf.scene.scale.x, 0.1*gltf.scene.scale.y,0.1*gltf.scene.scale.z);
  const model = gltf.scene;
  const mesh = gltf.scene.getObjectByName('Object_212');
  mesh.material.map = newTexture2;
  mesh.material.needsUpdate = true;
  scene.add(model);

提前致谢

背心的代码确实有变化，因为颜色变成了纹理的颜色，但细节似乎不适用。

Answer 1

立方体有一个简单的 UV 贴图。可以正确应用纹理。 然而，GLTF 模型有更复杂的 UV 映射。

紫外光源： https://threejs.org/examples/?q=uv#misc_uv_tests

您可以尝试调整比例，

const textureLoader2 = new THREE.TextureLoader();
const newTexture2 = textureLoader2.load('Fabric_Knitted_006_basecolor.jpg');
textureLoader2.wrapS = texture.wrapT = THREE.RepeatWrapping
textureLoader2.repeat.set(20, 20);

我强烈建议使用 Blender 来处理 gltf 模型，而不是使用三个 js 函数，例如。着色器材质等