Three.js如何在触摸AR应用程序上的按钮时更改一个对象的两种材质

我最近第一次接触Three.js，我需要一些帮助来做一些测试

目前，我正在尝试创建一个AR应用程序，在这个应用程序中，使用手机的摄像头将一个对象插入到真实环境中。最初，对象以蓝色显示在屏幕上，但是在顶部，我想放置三个具有三种不同颜色的按钮，例如蓝色、红色和绿色，当触摸其中一个按钮时，对象只改变其颜色

我在Blender上创建了对象及其材质。对象的一个面有一个具有UV纹理的材质，而对象的其余面有第二个材质，没有纹理，只有一个具有初始节点的材质（在“混合器循环”中创建）。因此，我创建了6种材质，3种材质用于纹理，每种材质一种，3种材质用于颜色，每种材质一种。在Blender上，我将此对象导出为带有材质和纹理的.glb

现在我在Three.js上导入这个对象，我已经了解了如何将这个对象添加到场景中并渲染它，以便它显示在手机屏幕上。包括对象附带的第一批正常工作的材质（来自.glb），我没有在Three.js中创建任何关于材质的内容，到目前为止，场景中显示的所有内容都来自于我在blender中导出并刚刚加载到Three.js的.glb

现在我需要创建应用程序的第二部分，即：当我触摸一种颜色的按钮时，对象必须改变颜色以及“纹理”。正是在这里，我需要帮助

我该怎么做？ 我需要三个不同的物体吗？还是只有一个对象包含所有6种材质？如何在three.js上实现这些功能？我需要关于Blender和Three.js的帮助

有人能给我指路吗？或者是关于这个主题的一段视频或一段精彩对话的链接

---

提前感谢。

基本上，您需要做的是更改.glb文件中相关网格的材质

使用GLTFLoader加载.glb文件时，为其指定一个“onLoad”函数参数，在该参数中，您可以首先访问文件内容（文件本身是它自己的迷你场景）-这是您可以遍历场景、定位网格并将其另存为变量的点，以便以后可以对其进行操作

现在，假设文件中有多个网格，如何知道哪一个是正确的？最好的办法是直呼其名。由于您是从Blender创建对象的，因此可以为每个网格指定一个唯一的名称，以便稍后在three.js中识别

<现在>在OnLoad函数中，您可以插入一些逻辑来确认正确的网格是存储的变量，请考虑下面的代码：

let-meshFromGLTF；
const meshName=“MESH\u 0”//假设这是您在blender上给出的名称
...
loader=新的GLTFLoader（）；
loader.load（“路径/to/gltf”，（gltf）=>{
const scene=gltf.scene；
场景.遍历（（子项）=>{
如果（child.isMesh&&child.name==meshName）{//确认它是网格
meshFromGLTF=子对象；
//这也是将原始材质存储为变量的一个好方法
}
}
})

现在，由于您将网格存储为一个变量，因此可以通过按钮轻松更改其材质和纹理。单击按钮时，只需提供onClick函数，即可在该函数中执行以下操作：

const texture=textureLoader.load（'path/to/texture.png'）；
const materialBlue=新的MeshBasicMaterial（{贴图：纹理，颜色：'blue'}）；
函数onClickBlue（）{
meshFromGLTF.material=材料蓝色；
}

在为网格创建材质方面，这是一个相当广泛的主题，您可以查看并查看可能需要的材质类型，以及在材质本身上应用的纹理，参数包括“贴图”

我创建了一个实现这种方法的小示例