Comparez le nom de la variable et l'ID du bouton pour charger dynamiquement le contenu dans ThreeJS

Question

J'utilise Three.js pour charger plusieurs modèles 3D et les stocker dans un tableau en arrière-plan. J'ai plusieurs boutons avec des identifiants uniques qui ajoutent ce modèle spécifique à la scène. Je souhaite maintenant comparer l'ID du bouton et le nom de la variable afin de pouvoir charger uniquement ce modèle spécifique et supprimer tous les autres modèles ajoutés à la scène. J'ai écrit une boucle for pour parcourir toutes les variables afin de comparer l'ID du bouton sur lequel vous avez cliqué, mais je ne peux pas accéder uniquement au nom de la variable afin de le comparer à l'ID du bouton.

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

Comment comparer uniquement le nom de la variable avec l'ID du bouton, sans comparer le contenu à l'intérieur de la variable ?

Answer 1

Utilisez des objets avec des noms de propriétés calculés au lieu de tableaux.

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

Vous avez maintenant un objet comme modelsByName["mandi_0"] === modelsByName.mandi_0 === mandi_0 et ainsi de suite pour d'autres variables. Mais comme vous n'utilisez pas de tableau, vous ne pouvez plus parcourir par index, alors changez la boucle.

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