# How to create search bar?

**URL:** <https://discourse.threejs.org/t/how-to-create-search-bar/49091>\
**Category:** Questions\
**Tags:** 3d-applications\
**Created:** [March 14, 2023, 3:57pm UTC](https://discourse.threejs.org/t/how-to-create-search-bar/49091 "2023-03-14T15:57:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marci](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@Marci](https://discourse.threejs.org/u/Marci)\
**Post date:** [March 14, 2023, 3:57pm UTC](https://discourse.threejs.org/t/how-to-create-search-bar/49091/1 "2023-03-14T15:57:19Z")

</div>

Hello.  
I have 1 large model in .glb that has multiple objects in it, and I would like to create 2 things in my application.

1. When I move the cursor over the model, the screen will show the name of the object.
2. Some search barw, here when I type the name of the object, the camera will show it to me.  
Could anyone help me how to do this?  
Thank you.  
 ![AAA_Screenshot 2023-03-14 164909](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/784623f71743477c3b4c1da1ba7c78a4ffa74665.jpeg)

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [March 14, 2023, 5:33pm UTC](https://discourse.threejs.org/t/how-to-create-search-bar/49091/2 "2023-03-14T17:33:17Z")

</div>

We will need more information about your project but it sounds that you both need to traverse your `.glb` model to search for individual geometries and set up a [Raycaster](https://threejs.org/docs/#api/en/core/Raycaster) to help you point at things and have a box appear on the scene whenever there is an intersection.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [March 14, 2023, 6:06pm UTC](https://discourse.threejs.org/t/how-to-create-search-bar/49091/3 "2023-03-14T18:06:24Z")

</div>

For the `mouseover` part you need a [Raycaster](https://threejs.org/docs/#api/en/core/Raycaster) with a [Sprite](https://stemkoski.github.io/Three.js/Sprite-Text-Labels.html) or a [CSS2DRenderer](https://threejs.org/examples/#css2d_label) to display the label.

The search is the easy part, the method below will get you all the objects with a matched name, you steel need some kind of interaction to show the resulting objects, may be with an [outline effect](https://stemkoski.github.io/Three.js/Outline.html).

```js
 searchByName(myModel: Object3D, query: string) {
    const result = [];
    myModel.travese(obj => {
        if(obj.name.includes(query)) result.push(obj)
    })
    return result;
}

```

---

<div class="post-metadata">

**Author:** ![Marci](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@Marci](https://discourse.threejs.org/u/Marci)\
**Post date:** [March 26, 2023, 3:05pm UTC](https://discourse.threejs.org/t/how-to-create-search-bar/49091/4 "2023-03-26T15:05:17Z")

</div>

Thank you for your answers.