Multiple GLTF's with onclick actions

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

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

Thanks a bunch!

2 Likes

Pinging @bghgary our gltf mastermind

Welcome @ariel!

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

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

2 Likes

Thanks :slight_smile: 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 :slight_smile:

https://www.babylonjs-playground.com/#YXM30S#2

Something like this?

https://www.babylonjs-playground.com/#YXM30S#3

3 Likes

You sir are awesome :slight_smile: thank you very much!

1 Like

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
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

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

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

Thanks for all the help :slight_smile:

1 Like

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

nope it can not handle transparency :slight_smile:

1 Like

Thanks for helping with this :slight_smile: This is what it resulted in: Link to project

1 Like