How do I get multiple .gltf models to work in three.js webxr_ar_hittest example?

Question

I'm using this example https://threejs.org/examples/?q=webxr#webxr_ar_hittest from three.js and the example works very well but when I change the cylinder to a model it just lets me put one model instead of letting me put several models in the place where I click. Does anyone know how to solve this problem?

In the file I used the part where they put cylinders on the floor, however I want to replace it with a .gltf model.

            var geometry = new THREE.CylinderBufferGeometry( 0.1, 0.1, 0.2, 32 ).translate( 0, 0.1, 0 );
            function onSelect() {

                if ( reticle.visible ) {

                    var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.setFromMatrixPosition( reticle.matrix );
                    mesh.scale.y = Math.random() * 2 + 1;
                    scene.add( mesh );

                }

            }

I replace with:

var loader = new GLTFLoader().setPath('examples/models/gltf/Duck/glTF' );
                function onSelect() {
                    if ( reticle.visible ) {
                        loader.load('Duck.gltf', function ( gltf ) {
                            scene.add( gltf.scene );
                        });
                    }
                }

This example uses the camera to place virtual objects on the floor. Thank you in advance!