主页 / 问题 / 975892
Accepted
corocoto
Asked:2020-04-28 21:30:14 +0000 UTC2020-04-28 21:30:14 +0000 UTC

Three.js 改变纹理

  • 772

如何使用 3d 对象更改当前纹理（以编程方式设置）textureObjLoader？

textureObjLoader = new THREE.TextureLoader(),
        map = textureObjLoader.load(`./models/${allTextures[i][0]}`);
        material = new THREE.MeshPhongMaterial({map: map});
        objLoader = new THREE.OBJLoader();

        objLoader.load(`./models/${objects[i]}`, function (obj) {
            obj.traverse( node=>{if (node.isMesh) node.material = material});
            obj.name = names[i];
            scene.add(obj);
        });
javascript

1 个回答

  1. Best Answer

    要更改 y 纹理，THREE.MeshPhongMaterial只需更改参数并为现有材质map设置标志needsUpdate

       material.map = texture;
   material.needsUpdate = true;

    但是，纹理加载是一个异步操作，因此这些参数必须在图像加载后设置，在尚未加载的情况下。

    我从您的示例中更正了该功能，现在当您单击圆圈时，香蕉的纹理会发生变化。

    该方法的第二个参数load()是textureLoader纹理加载回调，我在其中放入了不会创建新材质而仅更改现有材质中的纹理的代码。

    function changeTexture(i) {
    let colorBlocks = document.querySelectorAll('.color_scheme__block');
    colorBlocks.forEach((val) => {
        val.onclick = () => {
            let value= val.style.background,
                arr = value.split('/'),
                result=arr[arr.length-1].slice(0,-2);
            textureObjLoader.load(`./models/${result}`, function(texture){
                var mat = scene.getObjectByName( names[i], true).children[0].material;
                mat.map = texture;
                mat.needsUpdate = true;
            });
        };
    });
}

    一般情况下的使用.children[0]是不正确的，但我并不聪明，因为有必要遍历对象中的所有网格以寻找必要的材料，因为 在一般情况下，模型中单个对象的材料可能不同，也可能不相同。但这是一首歌词，对于您的示例，代码可以正常工作

    每次单击按钮时创建新纹理也可能不是最佳选择，但这是一把双刃剑，这完全取决于纹理的数量和大小以及它们在应用程序中的使用性质（它们多久变化等）

    • 2

相关问题