# Multiple GLTF's with onclick actions

**URL:** <https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406>\
**Category:** Questions\
**Created:** [March 23, 2020, 7:57pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406 "2020-03-23T19:57:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [March 23, 2020, 7:57pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/1 "2020-03-23T19:57:52Z")

</div>

Hi everyone,

Total beginner here, with zero experience in Babylon or JS, who’s trying to learn some basics. What I would like to accomplish is to load some different gltfs and add some onclick actions.

This is what I have come up with so far: [https://www.babylonjs-playground.com/#YXM30S#1](https://www.babylonjs-playground.com/#YXM30S#1)

I would be very grateful for any feedback on whether this could be done in a better way.

Thanks a bunch!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [March 23, 2020, 9:18pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/2 "2020-03-23T21:18:01Z")

</div>

Pinging @bghgary our gltf mastermind

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [March 23, 2020, 9:28pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/3 "2020-03-23T21:28:39Z")

</div>

Welcome @rubenhode!

The playground code seems reasonable, assuming you will load different glTF assets and not the same ones 🙂 . I’ve never personally used ActionManager before, but the code looks good.

If you have a specific question, feel free to ask.

---

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [March 24, 2020, 6:41am UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/4 "2020-03-24T06:41:50Z")

</div>

Thanks 🙂 and thanks for the prompt reply, much appreciated!

Ideally, I would have liked to create a variable of the model and then add onclick function to that var. But I couldnt figure out how to do it.

Next I would like to create some sort of highlight when clicked. I found the HighlightLayer but havent figured out how to attach it to the function yet… If you have an idea and can nudge me in the right direction that be great. But I’ll be back tonight to try some more 🙂

[https://www.babylonjs-playground.com/#YXM30S#2](https://www.babylonjs-playground.com/#YXM30S#2)

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [March 24, 2020, 6:58pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/5 "2020-03-24T18:58:35Z")

</div>

Something like this?

[https://www.babylonjs-playground.com/#YXM30S#3](https://www.babylonjs-playground.com/#YXM30S#3)

---

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [March 25, 2020, 3:00pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/6 "2020-03-25T15:00:41Z")

</div>

You sir are awesome 🙂 thank you very much!

---

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [March 27, 2020, 9:13am UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/7 "2020-03-27T09:13:19Z")

</div>

HighlightLayer works like a charm. But when I set opacity/alpha to my material (outside of Babylon) the highlight layer doesn’t show. Can I set alpha from within Babylon on my gltf? Or a mesh in the gltf.

Found this one: [https://www.babylonjs-playground.com/#1KUJ0A#172](https://www.babylonjs-playground.com/#1KUJ0A#172)  
I’m guessing even if I set alpha in Babylon the highlight won’t show?

If it is possible to set alpha to gltf in Babylon, I can change alpha on click to illustrate the highlight instead

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [March 27, 2020, 6:15pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/8 "2020-03-27T18:15:25Z")

</div>

Can you put a playground up for what you are trying to do? I don’t understand what you mean.

---

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [March 28, 2020, 6:27am UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/9 "2020-03-28T06:27:08Z")

</div>

Hi, the HighlightLayer won’t show if material alpha is less than 1.0  
Instead, I set alpha to the material in my 3D software so that the exported gltf already had a transparent material. But it’s the same result.

So I thought if I set alpha to the whole mesh it would work. But same thing there as well.

New solution - I will illustrate hightlight with visibility: [https://www.babylonjs-playground.com/#YXM30S#5](https://www.babylonjs-playground.com/#YXM30S#5)

Thanks for all the help 🙂

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [March 30, 2020, 4:39pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/10 "2020-03-30T16:39:20Z")

</div>

@sebavan Is highlight layer supposed to work with visibility \< 1.0?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 30, 2020, 5:44pm UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/11 "2020-03-30T17:44:49Z")

</div>

nope it can not handle transparency 🙂

---

<div class="post-metadata">

**Author:** ![rubenhode](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rubenhode/32/31186_2.png) [@rubenhode](https://forum.babylonjs.com/u/rubenhode)\
**Post date:** [June 12, 2020, 6:39am UTC](https://forum.babylonjs.com/t/multiple-gltfs-with-onclick-actions/9406/12 "2020-06-12T06:39:54Z")

</div>

Thanks for helping with this 🙂
