比較變數名稱和按鈕 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

使用具有計算屬性名稱的物件，而不是陣列。

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 {
    …
  }
}