How to add collider based on model mesh?

I’m having trouble applying collider for the model. I have a model of a bowl, and I want to be able to toss small sphere in it (the bowl should be able to hold them). However, the generated collider is a hemispherical shape and it cannot hold objects. This is how I setup physics for it:

    const model = document.createElement('a-entity')
    model.setAttribute('position', position)
    model.setAttribute('gltf-model', '#bowlModel')
    model.setAttribute('shadow', {
      receive: false,

    model.setAttribute('aabb-collider', 'objects: .collidable;')
    model.setAttribute('body', 'type: static')


Any advice will be highly appreciated!

Hi, welcome to the forum :wave:

General advice - assuming you are using A-Frame - while a lot of glitch users use A-Frame, you may get more responses if you post the question on A-Frame communities such as discord: Community – A-Frame

Also, a link to your live page will help pinpoint the issue.

Given that, my questions are 1) if the bowl is colliding other objects at all and 2) if so, do you mean that the objects do collide/bounce but slip through the mesh?

If 1) is not working then something is wrong, and if 2) is the case (colliding and bouncing on the bowl but nevertheless they pass through the mesh), I think it’s a common problem with a non planar mesh. Maybe you need to limit the position of the objects programmatically. Above communities can perhaps give you better ideas :sweat_smile: