我如何动态更改GLTF模型的纹理？

Question

在我的场景中，我已经加载了一个.gltf模型，并且它已经被正确地渲染出来了。它有一个.png纹理，渲染在3D模型的表面上。是否可以通过编程方式交换这个纹理？我正在使用aframe（使用a-asset-item和a-entity来加载gltf资产）。

- reppair

---

我在这里找到了解决方案：https://dev59.com/y-o6XIcBkEYKwwoYLhXh - reppair

Answer 1

一旦在A-Frame或three.js中加载了模型，它之前的格式就不太重要了¹。对于A-Frame，您可以使用JS在模型加载后修改模型。

var tex = new THREE.TextureLoader().load('diffuse.png');
tex.flipY = false; // for glTF models.

el.addEventListener('model-loaded', function (e {
  e.detail.model.traverse(function(node) {
    if (node.isMesh) node.material.map = tex;
  });
});

请查看THREE.MeshStandardMaterial文档以了解可以编辑的属性，但这可能会因您加载的模型而有所不同。 ¹唯一的例外是上面的tex.flipY=false设置 - 您（可能）只需要在使用glTF时使用它，因为UV具有与three.js默认值不同的方向。

- Don McCurdy