如何在ThreeJS中通过比较变量名与按钮ID加载对应3D模型？

你当前的问题在于，数组中存储的是模型对象本身，无法直接获取到原变量的名称。要实现按钮ID与变量名的匹配，你需要换一种模型存储方式——用键值对对象来绑定模型名称（对应按钮ID）和模型对象，这样就能直接通过按钮ID定位到目标模型。

修改后的代码实现 #

// 用对象存储模型，键名和按钮ID保持一致
const modelMap = {
  mandi_0: mandi_0,
  maxi_0: maxi_0,
  mandi_1: mandi_1,
  maxi_1: maxi_1,
  mandi_2: mandi_2,
  maxi_2: maxi_2
};

function modelShow(event) {
  const targetId = event.target.id;
  // 遍历所有模型
  for (const [modelName, model] of Object.entries(modelMap)) {
    if (modelName === targetId) {
      scene.add(model);
    } else {
      scene.remove(model);
    }
  }
}

// 绑定按钮点击事件
buttons.forEach(button => button.addEventListener('click', modelShow));

关键说明 #

• modelMap对象的键名就是你原来的变量名，同时和按钮的ID完全一致，这样点击按钮时直接通过event.target.id就能匹配到对应的键名。
• 使用Object.entries(modelMap)可以同时获取到模型的名称（键）和模型对象（值），方便直接对比按钮ID。
• 遍历过程中统一处理所有模型：匹配的添加到场景，不匹配的从场景移除，确保每次点击后场景中只有选中的模型。

内容的提问来源于stack exchange，提问作者Siddhesh Gunjal