如何动态更改GLTF模型的纹理？ [英] How do I change the texture of a GLTF model dynamically?

问题描述

在我的场景中，我已经加载了.gltf模型，并且可以很好地渲染。它具有.png纹理，可以在3d模型的表面上进行渲染。是否可以通过编程方式交换纹理？我正在使用Aframe（一个资产项和一个实体来加载gltf资产）

In my scene I have loaded a .gltf model and it is rendered just fine.. It has a .png texture that is rendered on the surface of the 3d model. Is it possible to swap the texture programmatically? I'm using aframe (a-asset-item and a-entity to load the gltf asset)

推荐答案

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

Once you’ve loaded a model in A-Frame or three.js, it doesn’t matter much what format it was before¹. For A-Frame, you can use JS to modify the model after it loads.

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 上的文档，以了解要编辑的属性，尽管这样做

See docs on THREE.MeshStandardMaterial to learn what properties there are to edit, although this could vary depending on the model you’re loading.

¹ 一个例外是 tex.flipY = false 上面的设置-您可能（可能）只需要glTF，因为UV的方向与three.js默认值不同。

¹ One exception is the tex.flipY=false setting above — you'll (probably) only need that for glTF, where the UVs have a different orientation than the three.js default.

这篇关于如何动态更改GLTF模型的纹理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！