比较变量名称和按钮 ID 以在 ThreeJS 中动态加载内容

Question

我正在使用 Three.js 加载多个 3D 模型并将它们存储在后台的数组中。我有多个具有唯一 ID 的按钮，可以将该特定模型添加到场景中。现在我想比较按钮 ID 和变量名称，以便我可以仅加载该特定模型并删除添加到场景中的任何其他模型。我编写了一个 for 循环来循环遍历所有变量以与单击的按钮的 ID 进行比较，但我无法仅访问变量名称以便将其与按钮 ID 进行比较。

以下是我的代码：

function modelShow() {

  let m;

  var models =  [mandi_0, maxi_0, mandi_1, maxi_1, mandi_2, maxi_2];

  for (m = 0; m < models.length; m++) {

    if(models[m].name == event.target.id){
      scene.add(models[m]);
    }
    else {
      scene.remove(models[m]);
    }
  }
}

let j;

for (j = 0; j < buttons.length; j++) {
   buttons[j].addEventListener('click', modelShow);
}

如何仅比较变量名称与按钮 ID，而不比较变量内的内容？

Answer 1

使用具有计算属性名称的对象< /a>，而不是数组。

const modelsByName = {
  mandi_0,
  maxi_0,
  mandi_1,
  maxi_1,
  mandi_2,
  maxi_2,
};

现在您有一个对象，例如 modelsByName["mandi_0"] === modelsByName.mandi_0 === mandi_0，其他变量依此类推。但由于您没有使用数组，因此无法再按索引进行迭代，因此请更改循环。

for ( let key in modelsByName ) {
  if ( modelsByName.hasOwnProperty( key ) && key === event.target.id ) {
    ...
  } else {
    ...
  }
}