three.js - 如何动态更改 GLTF 模型的纹理？

Question

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

Answer 1

一旦你在 A-Frame 或 Three.js 中加载了一个模型，它之前是什么格式并不重要1。对于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 上的文档了解需要编辑的属性，尽管这可能会因您加载的模型而异。

1 一个异常(exception)是 tex.flipY=false上面的设置——你(可能)只需要在 glTF 中使用它，其中 UV 的方向与 Three.js 默认的方向不同。