変数名とボタン ID を比較して、ThreeJS にコンテンツを動的にロードします

Question

Three.js を使用して複数の 3D モデルを読み込み、バックグラウンドで配列に保存しています。特定のモデルをシーンに追加する一意の ID を持つボタンが複数あります。ここで、ボタン ID と変数名を比較して、その特定のモデルのみをロードし、シーンに追加された他のモデルを削除できるようにしたいと思います。クリックされたボタンの ID と比較するためにすべての変数をループする for ループを作成しましたが、ボタン ID と比較するために変数名だけにアクセスすることができません。

以下は私のコードです:

リーリー

変数内の内容を比較せずに、変数名だけをボタン ID と比較するにはどうすればよいですか?

Answer 1

配列ではなく、 計算されたプロパティ名を持つオブジェクト を使用します。

const modelsByName = {
  mandi_0、
  マキシ_0、
  マンディ_1、
  マキシ_1、
  マンディ_2、
  マキシ_2、
};

これで、他の変数に対して modelsByName["mandi_0"] === modelsByName.mandi_0 === mandi_0 などのオブジェクトが完成しました。ただし、配列を使用していないため、インデックスによる反復処理ができなくなり、ループを変更します。

for (modelsByName にキーを入れます) {
  if ( modelsByName.hasOwnProperty( key ) && key ===event.target.id ) {
    ...
  } それ以外 {
    ...
  }
}