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

Question

在我的场景中,我加载了一个.gltf模型并且渲染得很好..它有一个.png纹理,在3d模型的表面上渲染.是否可以通过编程方式交换纹理？我正在使用aframe(a-asset-item和a-entity来加载gltf资产)

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的默认方向不同.