Bandingkan nama pembolehubah dan ID butang untuk memuatkan kandungan secara dinamik dalam ThreeJS

Question

Saya menggunakan Three.js untuk memuatkan berbilang model 3D dan menyimpannya dalam tatasusunan di latar belakang. Saya mempunyai berbilang butang dengan ID unik yang menambahkan model khusus itu ke tempat kejadian. Sekarang saya ingin membandingkan ID butang dan nama pembolehubah supaya saya boleh memuatkan model tertentu sahaja dan mengalih keluar mana-mana model lain yang ditambahkan pada tempat kejadian. Saya menulis gelung untuk gelung melalui semua pembolehubah untuk dibandingkan dengan ID butang yang diklik, tetapi saya tidak boleh mengakses hanya nama pembolehubah untuk membandingkannya dengan ID butang.

Ini kod saya:

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

Bagaimana untuk membandingkan hanya nama pembolehubah dengan ID butang, tanpa membandingkan kandungan di dalam pembolehubah?

Answer 1

Gunakan objek dengan nama sifat yang dikira dan bukannya tatasusunan.

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

Kini anda mempunyai objek seperti modelsByName["mandi_0"] === modelsByName.mandi_0 === mandi_0 dan sebagainya untuk pembolehubah lain. Tetapi kerana anda tidak menggunakan tatasusunan, anda tidak boleh lelaran mengikut indeks lagi, jadi tukar gelung.

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