如何动态更改 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 默认设置不同。