当我使用 Three.js 更改 gltf 格式的纹理时，如何将纹理放到正确的位置？答案

【问题标题】：How can I get texture to the right place when I change texture in gltf format with Three.js?当我使用 Three.js 更改 gltf 格式的纹理时，如何将纹理放到正确的位置？
【发布时间】：2019-08-22 09:58:40
【问题描述】：

我尝试通过用THREE.TextureLoader 替换纹理来动态更改glTF 模型的纹理。纹理的颜色按照我的预期发生了变化，但是纹理的图案有些混杂。

这是我第一次做网络图形。我正在使用可以加载 glTF 模型的 three.js 重新混合一个 3d 模型查看器示例。我想通过按钮动态改变纹理。从各种格式中，我选择了 glTF，因为它看起来像是一个新标准。到目前为止，我能找到的最佳解决方案是在我的纹理加载器下方添加 texture.flipY = false;，但它不起作用。我还尝试更改纹理对象中的一些值，但没有任何反应。

这是我加载模型的地方：

loader.load( urls, function (texture) {
    var pmremGenerator = new THREE.PMREMGenerator( texture );
    pmremGenerator.update( renderer );

    var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
    pmremCubeUVPacker.update( renderer );

    var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
    var loader = new THREE.GLTFLoader().setPath( `models/${modelName}/`);

    loader.load(`${modelName}.gltf`, (gltf) => {

        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.material.envMap = envMap;
            }
        });

        gltf.scene.scale.set(0.01,0.01,0.01)
        scene.add(gltf.scene);
    });

我尝试通过实现这个函数来改变它的纹理：

function changeColor(color) {

    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(`models/${modelName}/textures/fabric-${color}.jpg`);

    texture.flipY = false;

    scene.traverse((child) => {
        if (child.isMesh) {
            if (child.material.map.format === 1022) {
                child.material.map = texture;
            }
        }
    });
}

虽然我能够定位我想要的网格并更改它的颜色，但纹理图案非常尴尬。它是椅子的顶部，由织物制成。

用文字画出来，好像是这样的……

它的本意是：

-------------------
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
| / / / / / / / / |
-------------------
Figure 1

现实：

-------------------
|      +++++      |
|      +++++      |
| ++++++++++++++  |
| ++++++++++++++  |
| ++++++++++++++  |
|      +++++      |
|      +++++      |
-------------------
Figure 2

要明确：通过上面的函数更改纹理文件时，如何保留如图1的纹理图案？

【问题讨论】：

虽然我喜欢 ASCII 插图，但很难知道您在这里看到了什么。 ;) 你设置flipY=false 是正确的。除此之外，模型最初是否具有您正在更改的纹理？或者没有内置纹理，但你正在添加它？如果模型中的网格没有 UV (mesh.geometry.attributes.uv)，那将是一个问题。通常，UV 映射是您控制纹理在网格上的位置的方式，最好在 Blender 等工具中完成。
@DonMcCurdy 很抱歉我画得不好 :( 如果你不介意，你可以访问 this link 看看它的样子。是的，模型最初有纹理，我试图只需将material.map 更改为我颜色不同的新JPG 文件即可。我将尝试使用UV 映射。谢谢您的帮助。

标签： javascript graphics three.js 3d gltf

【解决方案1】：

感谢DonMcCurdy的帮助，我终于得到了答案。

确实是UV贴图的问题。

为了在正确的位置获得纹理，我需要添加这些：wrapS、wrapT 和 RepeatWrapping

function changeColor(color) {

    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(`models/${modelName}/textures/fabric-${color}.jpg`);

    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.flipY = false;

    scene.traverse((child) => {
        if (child.isMesh) {
            if (child.material.map.format === 1022) {
                child.material.map = texture;
            }
        }
    });
}

官方文档： https://threejs.org/docs/#api/en/textures/Texture

【讨论】：