模型换装功能

[KingCyril]

如何实现淘宝小程序中的模型换装功能

[singlecoder]

可以是替换贴图，也可以替换模型+贴图，看你们具体需求

[KingCyril]

有demo吗？可以有个参考

[singlecoder]

以换贴图为例，加载好新的贴图后，执行如下代码：

// 通过模型所在实体拿到模型的网格渲染器，如果模型是有动画的，就用 SkinnedMeshRenderer
const meshRenderer = gltfEntity.getComponent(MeshRenderer);
// 获取网格渲染器的材质
const material = meshRenderer.getMaterial();
// 给材质设置贴图即可完成替换贴图
material.baseTexture = texture;

如果是模型都换了，也就是重新加载模型和贴图，然后把老的去掉

[MQL9011]

首先需要用资源加载加载 Texture2D 资源, 也就是模型贴图

// 加载资源
  async resourceLoadTexture2D(url) {
    return new Promise((resolve) => {
      (this.engine as WebGLEngine).resourceManager
        .load<Texture2D>({
          url,
        })
        .then((texture) => {
          resolve(texture);
        });
    });
  },

拿到texture后可以找个变量存一下

加载模型后

// 加载模型
  async resourceLoadGLTF(url) {
    return new Promise((resolve) => {
      (this.engine as WebGLEngine).resourceManager
        .load<GLTFResource>(url)
        .then((gltf) => {
          resolve(gltf);
        });
    });
  },

从模型中获取材质, 给材质设置上texture

 // 加载篮球
    const lanqiu_gltf = await this.resourceLoadGLTF(LANQIU_GLTF);
    const entity_lanqiu = rootEntity.createChild('lanqiu');
    console.log(lanqiu_gltf.defaultSceneRoot);
    this.entity_lanqiu = entity_lanqiu;
    if (lanqiu_gltf.defaultSceneRoot.children) {
      const item = lanqiu_gltf.defaultSceneRoot.children[0];
      const skin = item.getComponent(MeshRenderer);
      const material = skin.getMaterial();
      material.baseTexture = this.texture_lanqiu;
      entity_lanqiu.transform.setPosition(0, -3.2, 0);
      entity_lanqiu.addChild(lanqiu_gltf.defaultSceneRoot);
    }

设置贴图的核心代码是这几行

const item = lanqiu_gltf.defaultSceneRoot.children[0];
const skin = item.getComponent(MeshRenderer);
const material = skin.getMaterial();
material.baseTexture = this.texture_lanqiu;