當我使用Three.js更改gltf格式的紋理時，如何將紋理到達正確的位置？

Question

我試圖通過用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所示？

Answer 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