Meshes search function

Questions
1 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Meshes search</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #search-form {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    #search-results {
      position: absolute;
      top: 50px;
      left: 10px;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px;
      border-radius: 5px;
    }
    .search-result {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="search-form">
    <label for="search-input">Meshes search:</label>
    <input type="text" id="search-input">
    <button id="search-button">Meshes search</button>
  </div>
  
  
  <div id="search-results"></div>

  <script type="importmap">
    {
      "imports": {
        "three": "../three/build/three.module.js",
        "GLTFLoader": "../three/examples/jsm/loaders/GLTFLoader.js",
        "OrbitControls": "../three/examples/jsm/controls/OrbitControls.js",
        "DRACOLoader": "../three/examples/jsm/loaders/DRACOLoader.js"
      }
    }
  </script>

  <script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'GLTFLoader';
    import { OrbitControls } from 'OrbitControls';
    import { DRACOLoader } from 'DRACOLoader';

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    camera.position.z = 5;

    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('../three/examples/jsm/libs/draco/');

    const loader = new GLTFLoader();
    loader.setDRACOLoader(dracoLoader);

    let loadedModel;

    loader.load('test.gltf', (gltf) => {
      const model = gltf.scene;
      scene.add(model);

      loadedModel = gltf.scene;
      scene.add(loadedModel);

      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };

      animate();
    });

    function searchByName(myModel, query) {
      const result = [];

      // 
      const object = myModel.getObjectByName(query);

      if (object) {
        result.push(object);
      }

      return result;
    }

    // 
    let clickedMesh = null;

    // 
    const searchButton = document.getElementById('search-button');
    searchButton.addEventListener('click', () => {
      const searchInput = document.getElementById('search-input');
      const query = searchInput.value.trim();

      if (query) {
        const result = searchByName(loadedModel, query);
        if (result.length > 0) {
          // 
          const searchResultsDiv = document.getElementById('search-results');
          searchResultsDiv.innerHTML = ''; // 

          result.forEach((mesh, index) => {
            const resultDiv = document.createElement('div');
            resultDiv.className = 'search-result';
            resultDiv.textContent = `Search Results ${index + 1}`;
            resultDiv.addEventListener('click', () => {
              // 
              clickedMesh = mesh;
              // 
              loadedModel.traverse((child) => {
                if (child.isMesh) {
                  child.material.transparent = true;
                  child.material.opacity = 0; // 
                }
              });
              // 
              clickedMesh.material.transparent = false;
              clickedMesh.material.opacity = 1.0;
            });
            searchResultsDiv.appendChild(resultDiv);
          });
        } else {
          console.log("NO Meshes");
        }
      }
    });

    // 
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 
    directionalLight.position.set(1, 2, 3); // 
    scene.add(directionalLight); // 

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // 
    scene.add(ambientLight); // 

    const backLight = new THREE.DirectionalLight(0xffffff, 3); // 
    backLight.position.set(0, 0, -1); // 
    scene.add(backLight); // 
  </script>
</body>
</html>

I am a beginner.

I entered the mesh name,
When you click on the search results,
I want to make all meshes transparent except for the searched mesh.

What’s wrong with the code?

2

What’s the result you’re currently getting? If all meshes are still showing once the search is finished with a valid mesh.name, it’s likely all the meshes share the same material and are all being displayed as such with the transparent false and opacity 1 properties, one way to handle this would be to use mesh.visible = false on all non returned objects of the searched model graph and setting mesh.visible = true on the “clickedMesh” object