# Raycaster do action when specific object is selected

**URL:** https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833
**Category:** Questions
**Tags:** raycaster
**Created:** [November 14, 2019, 3:25pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833 "2019-11-14T15:25:00Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![morphix](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/morphix/32/7650_2.png) [@morphix](https://discourse.threejs.org/u/morphix)
#### Post date: [November 14, 2019, 3:25pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/1 "2019-11-14T15:25:01Z")

</div>

Hello fellow coders 🖐 I have a question related to raycaster.

In my scene, I have a few objects, and one of them is group named “gele” (means flower in my native language) (on the table):

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/03ee7bf3d6689ace544a383b52e77682fc0df0d2.jpeg)

**What I want** is to do specific action when flower is clicked. I have tried this by setting a name for my flower group:

```
gele.name = "flower";
scene.add(gele);

```

And then in the raycaster function I tried to check it like this:

```
function onMouseDown( event ) {
raycaster.setFromCamera( mouse, camera );
intersects = raycaster.intersectObjects( scene.children, true );
for ( var i = 0; i < intersects.length; i++ ) {
    if(intersects[i].object != plane){
    //intersects[i].object.material.color.set( Math.random() * 0xffffff );
    } 
//checking if flower is clicked
    if(intersects[i].object.parent.name == "flower"){
        window.location.href ='https://www.google.com/';
        console.log("Paspausta");
    }
}
}

```

However, this does not seem to work.

Is there any way to check what object is clicked and only if object matches some specific name, do some actions?

Whole JS code can be seen here: [Raycaster - Pastebin.com](https://pastebin.com/TwV71i5K)

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [November 14, 2019, 4:13pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/2 "2019-11-14T16:13:51Z")

</div>

Can you also share your code as a git repo? In this way, it’s easier to debug it 😇

---

<div class="post-metadata">

### Author: ![morphix](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/morphix/32/7650_2.png) [@morphix](https://discourse.threejs.org/u/morphix)
#### Post date: [November 14, 2019, 5:33pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/3 "2019-11-14T17:33:53Z")

</div>

Sure, here you go: [GitHub - morphixas/threejs-raycaster: Learning threejs and raycaster](https://github.com/morphixas/threejs-raycaster)

Haven’t used git that much, just learning now, so let me know if something is not working right or some files didn’t upload properly 🙏

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [November 14, 2019, 6:56pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/4 "2019-11-14T18:56:20Z")

</div>

> [@morphix](#):
>
> if(intersects[i].object.parent.name == “flower”){ window.location.href =‘[https://www.google.com/](https://www.google.com/)’; console.log(“Paspausta”); }

You assume here that all meshes that forms the flower are a direct child of the `flower` group. However, this is only true for the leaf. The meshes you create with `createStem()`, `createVase()` and `createStem()` are actually `Group` objects (because `SceneUtils.createMultiMaterialObject` returns an object of type `Group`). Have you tried to click on the leaf? The redirect to Google works 😉.

Instead of changing the way how you generate the flower, I would change the raycasting to this:

```js
intersects = raycaster.intersectObject( gele, true );

if ( intersects.length > 0 ) {

    window.location.href = 'https://www.google.com/';
    console.log("Paspausta");

}

```

So try to perform the raycasting with concrete objects and not with the entire scene. This is actually more performant since you save unnecessary intersection tests.

---

<div class="post-metadata">

### Author: ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [November 14, 2019, 6:58pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/5 "2019-11-14T18:58:18Z")

</div>

BTW: You can compute the `mouse` vector in the `onMouseDown()` listener, too. No need to do this in `onMouseMove()`.

---

<div class="post-metadata">

### Author: ![morphix](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/morphix/32/7650_2.png) [@morphix](https://discourse.threejs.org/u/morphix)
#### Post date: [November 14, 2019, 7:40pm UTC](https://discourse.threejs.org/t/raycaster-do-action-when-specific-object-is-selected/10833/6 "2019-11-14T19:40:28Z")

</div>

> [@Mugen87](#):
>
> The meshes you create with `createStem()` , `createVase()` and `createStem()` are actually `Group` objects (because `SceneUtils.createMultiMaterialObject` returns an object of type `Group` ). Have you tried to click on the leaf?

Oh wow, I would never have worked that out myself, so that’s why it wasn’t working, because MultiMaterial returns a Group. Hats down to you sir, as it is said: “the more you know” 🌈 🤓

Did it according to your suggestion, works well now, cheers!
