Comparez le nom de la variable et l'ID du bouton pour charger dynamiquement le contenu dans ThreeJS
P粉301523298
P粉301523298 2024-02-21 20:27:15
0
1
407

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 ?

P粉301523298
P粉301523298

répondre à tous(1)
P粉615886660

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 {
    ...
  }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal