Vergleichen Sie den Variablennamen und die Schaltflächen-ID, um Inhalte dynamisch in ThreeJS zu laden

Question

Ich verwende Three.js, um mehrere 3D-Modelle zu laden und sie in einem Array im Hintergrund zu speichern. Ich habe mehrere Schaltflächen mit eindeutigen IDs, die das jeweilige Modell zur Szene hinzufügen. Jetzt möchte ich die Schaltflächen-ID und den Variablennamen vergleichen, damit ich nur dieses bestimmte Modell laden und alle anderen zur Szene hinzugefügten Modelle entfernen kann. Ich habe eine for-Schleife geschrieben, um alle Variablen zu durchlaufen, um sie mit der ID der angeklickten Schaltfläche zu vergleichen, aber ich kann nicht nur auf den Variablennamen zugreifen, um ihn mit der Schaltflächen-ID zu vergleichen.

Hier ist mein Code:

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);
}

Wie vergleiche ich nur den Variablennamen mit der Schaltflächen-ID, ohne den Inhalt innerhalb der Variablen zu vergleichen?

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